ionic1 2 sliders on same page and its events to change particular slide

Question

I need to change slides when I press button, as I am new to Ionic I am not able to achieve it.

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

And now I need to change slides as I click on buttons as if I click on change Slide 1 button then slide 1 should change and same for slide 2 as well.

Can anyone help me to sort out the issue?

Thanks in advance :)

if we are on slide page1 and click on button then slide page 2 should display — Vikas Kad, Aug 09 '17 at 06:59

Gustavo Iñiguez Goia · Accepted Answer · 2017-08-11T11:46:46.727

You can do it in this way. In your controller:

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

In your template:

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

If you have more than one slider like in your case, then you have to assign a delegate-handle to each of them:

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

Inject $ionicSlideBoxDelegate in your controller, and get the handle to each of the sliders:

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

And use it then in the methods (note that the $ionicSlideBoxDelegate methods are differents):

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

codepen example with multiple sliders

Thanks, @Gustavo it worked for me but Now issue I have 2 sliders in the same page how can we handle this both events — Vikas Kad, Aug 11 '17 at 09:58
Uops, sorry, I didn't take into account that there were 2 sliders. Take a look at this [codepen](https://codepen.io/anon/pen/xLrNrK). I´ll update the answer. — Gustavo Iñiguez Goia, Aug 11 '17 at 11:26

score 1 · Answer 2 · answered Nov 27 '18 at 04:11

As we have several Slides in the same view, we may present some unexpected behaviors, as we used the same instance of the Swiper. I realized that if you have more than one slide the event '$ionicSlides.sliderInitialized' will be triggered by each of the slides and will return in the data.slider the instance of each of them. The solution I found was to pass an identifier in the options like slideName and then start asking the event that shot each and save the instances in separate variables, so when we click next only move the corresponding slide.

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

Now in your view you can use ng-click="slider2._slideNext(200); $event.stopPropagation();" to go to the next slide

ionic1 2 sliders on same page and its events to change particular slide

2 Answers2