ionic1 2同じページにスライダーとそのイベントの特定のスライド

Question

を変更するには、私は私がイオンに新しいですと、私はそれを達成することはできませんよ、私はボタンを押したときに、スライドを変更する必要があります。

<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ボタンをクリックしているかのように私は、ボタンをクリックするとスライドを変更する必要があるが、その後1が同様に変更し、スライド2も同じはずですスライドさせます。

誰もが問題を整理するために私を助けることができますか？

ありがとうございます。

Answer 1

このようにすることができます。お使いのコントローラでは：

テンプレートで

$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> 

https://ionicframework.com/docs/v1/api/directive/ionSlides/

、あなたはそれらのそれぞれにdelegate-handleを割り当てる必要があります：

<ion-slides options="options" delegate-handle="slider1" style="border: 1px solid;text-align: center"> 
</ion-slides> 
... 
<ion-slides options="options" delegate-handle="slider2" style="border: 1px solid;text-align: center"> 
</ion-slides> 

あなたのcontrの中にを入れてくださいoller、スライダのそれぞれのハンドルを取得：

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

および方法でそれを使用する（$ ionicSlideBoxDelegate方法は貴様であることに注意してください）：複数のスライダ

と

$scope.nextSlide = function(){ 
    $scope.slider1.next(); 
}; 

codepen example