ionic1 2 curseurs sur la même page et ses événements pour changer de diapositive particulière

Question

J'ai besoin de changer de diapositives quand j'appuie sur le bouton, comme je suis nouveau à Ionic je ne suis pas capable de le réaliser.

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

Et maintenant je dois changer les diapositives que je clique sur les boutons comme si je clique sur le bouton Changer Slide 1 puis faites glisser 1 devrait changer et même pour la diapositive 2 ainsi.

Quelqu'un peut-il m'aider à régler le problème?

Merci à l'avance :)

Answer 1

Vous pouvez le faire de cette façon. Dans votre contrôleur:

$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(); 
}; 

Dans votre modèle:

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

Si vous avez plus d'un curseur comme dans votre cas, alors vous devez attribuer un delegate-handle à chacun d'eux :

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

Injecter dans votre contr Oller et obtenir la poignée à chacun des curseurs:

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

et de l'utiliser ensuite dans les méthodes (notez que les méthodes ionicSlideBoxDelegate $ sont différentes):

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

codepen example avec plusieurs curseurs