Javascript 同一页上的ionic1 2个滑块及其事件以更改特定幻灯片

当我按下按钮时，我需要更换幻灯片，因为我对爱奥尼亚还不熟悉，所以我无法做到这一点

<div>
    <ion-slides options="options" slider="data.slider" style="border: 1px solid;text-align: center">
        <ion-slide-page>
            <img src="slide1.png">
        </ion-slide-page>
        <ion-slide-page>
            <img src="slide1.png">
        </ion-slide-page>
    </ion-slides>
</div>
<ion-slides options="options" slider="data.slider" style="background: #fff">
    <ion-slide-page>
        <div class="product-listing-container">
        </div>
    </ion-slide-pag>
</ion-slides>
<div>
    <a class="button" ng-click="changeSlide(0)">Change Slide1</a>
    <a class="button" ng-click="changeSlide(1)">Change Slide2</a>
</div>

更改幻灯片1
更改幻灯片2

现在我需要在我点击按钮时改变幻灯片，就像我点击改变幻灯片1按钮一样，那么幻灯片1也应该改变，幻灯片2也应该改变

有人能帮我解决这个问题吗

---

提前感谢：）

你可以这样做。在控制器中：

$scope.$on('$ionicSlides.sliderInitialized', function(event, data){
    $scope.slider = data.slider;
});

$scope.changeSlide = function(slideIndex){
    $scope.slider.slideto(slideIndex);
};

$scope.prevSlide = function(){
    $scope.slider.slidePrev();
};

$scope.nextSlide = function(){
    // you can check some condition if you need to
    // if ($scope.slider.activeIndex === 1){ ... }
    $scope.slider.slideNext();
};

在模板中：

<ion-slides  options="options" slider="slider">
(...)
<a class="button" ng-click="prevSlide()">Previous slide</a>
<a class="button" ng-click="changeSlide(0)">Change Slide1</a>
<a class="button" ng-click="nextSlide()">Next slide</a>

插入控制器，并获取每个滑块的手柄：

$scope.slider1 = $ionicSlideBoxDelegate.$getByHandle('slider1');
$scope.slider2 = $ionicSlideBoxDelegate.$getByHandle('slider2');

然后在方法中使用它（注意$ionicSlideBoxDelegate方法是不同的）：

---

使用多个滑块

您可以通过这种方式进行操作。在控制器中：

$scope.$on('$ionicSlides.sliderInitialized', function(event, data){
    $scope.slider = data.slider;
});

$scope.changeSlide = function(slideIndex){
    $scope.slider.slideto(slideIndex);
};

$scope.prevSlide = function(){
    $scope.slider.slidePrev();
};

$scope.nextSlide = function(){
    // you can check some condition if you need to
    // if ($scope.slider.activeIndex === 1){ ... }
    $scope.slider.slideNext();
};

在模板中：

<ion-slides  options="options" slider="slider">
(...)
<a class="button" ng-click="prevSlide()">Previous slide</a>
<a class="button" ng-click="changeSlide(0)">Change Slide1</a>
<a class="button" ng-click="nextSlide()">Next slide</a>

插入控制器，并获取每个滑块的手柄：

$scope.slider1 = $ionicSlideBoxDelegate.$getByHandle('slider1');
$scope.slider2 = $ionicSlideBoxDelegate.$getByHandle('slider2');

然后在方法中使用它（注意$ionicSlideBoxDelegate方法是不同的）：

---

使用多个滑块时，由于在同一视图中有多个幻灯片，我们可能会出现一些意外行为，因为我们使用的是同一个Swiper实例。我意识到，如果您有多张幻灯片，则每个幻灯片都会触发事件“$ionicSlides.sliderInitialized”，并在data.slider中返回每个幻灯片的实例。我找到的解决方案是在slideName之类的选项中传递一个标识符，然后开始询问每个事件并将实例保存在单独的变量中，因此当我们单击next时，只移动相应的幻灯片

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
    // data.slider is the instance of Swiper
    if(event.targetScope.options.sliderName === 'slider1'){

      $scope.slider1 = data.slider;

    }
    else if (event.targetScope.options.sliderName === 'slider2'){
      $scope.slider2 = data.slider;
    }
});

---

现在，在您的视图中，您可以使用ng click=“slider2._slideNext（200）；$event.stopPropagation（）；”转到下一张幻灯片

由于同一视图中有多张幻灯片，我们可能会出现一些意外行为，因为我们使用了相同的Swiper实例。我意识到，如果您有多张幻灯片，则每个幻灯片都会触发事件“$ionicSlides.sliderInitialized”，并在data.slider中返回每个幻灯片的实例。我找到的解决方案是在slideName之类的选项中传递一个标识符，然后开始询问每个事件并将实例保存在单独的变量中，因此当我们单击next时，只移动相应的幻灯片

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
    // data.slider is the instance of Swiper
    if(event.targetScope.options.sliderName === 'slider1'){

      $scope.slider1 = data.slider;

    }
    else if (event.targetScope.options.sliderName === 'slider2'){
      $scope.slider2 = data.slider;
    }
});

---

现在，您可以在视图中使用ng click=“slider2.\u slideNext（200）；$event.stopPropagation（）；”要转到下一张幻灯片

您所说的“更改幻灯片”是什么意思？如果我们在幻灯片第1页并单击按钮，则幻灯片第2页应显示查看此示例您所说的“更改幻灯片”是什么意思？如果我们在幻灯片第1页并单击按钮，则幻灯片第2页应显示查看此示例谢谢，@Gustavo这对我很有效，但现在我在同一个页面中有两个滑块。我们如何处理这两个事件？对不起，我没有考虑到有两个滑块。看看这个。我会更新答案。谢谢，@Gustavo它对我有效，但现在我在同一页中有两个滑块。我们如何处理这两个事件。对不起，我没有考虑到有两个滑块。看看这个。我会更新答案。