Ion-slides 1.2.1 ionic. How to get active slide?


#1

I just update ionic and am using the new ion-slides box. How do I get which current box I am at?


#2

$ionicSlideBoxDelegate.currentIndex() returns the index of the currently active slide.
Note that it is ‘zero-based’, so the index of your first slide is 0.

more info can be found in the docs.


#3

$ionicSlideBoxDelegate is deprecated, since it was only used for controlling ion-slide-box.
With ion-slides it works a bit different. You need to use $scope.$watch to get the slider object, then you have full access to its api (see here):

$scope.$watch("slider", function(slider){
	if (slider){
            // save it to a local variable, e.g.:
	    ctrl.slider = slider;
	}
});

Then do whatever you want, in your case:
var newIndex = ctrl.slider.activeIndex


The new slider ion-slide in 1.2
#4

Does anyone have a Codepen with complete example of how $scope.$watch works in case of new ?
Because my value of slider is always undefined…
Thanks


#5

Tried a watch on the slider. Didnt work. What worked for me is this.

$scope.swiperOptions = { /* Whatever options */ effect: 'slide', initialSlide: 0, /* Initialize a scope variable with the swiper */ onInit: function(swiper){ $scope.swiper = swiper; }, onSlideChangeEnd: function(swiper){ console.log('The active index is ' + swiper.activeIndex); } };

HTML
<ion-slides slider="swiper" options="swiperOptions"> <ion-slide-page><h1>TEST HEADER 1</h1></ion-slide-page> <ion-slide-page><h1>TEST HEADER 2</h1></ion-slide-page> <ion-slide-page><h1>TEST HEADER 3</h1></ion-slide-page> </ion-slides>


Ion-slides 1.2.1 $watch not working
#6

The Srijith version works well ! Thank you


#7

Sweet, thanks for the onInit suggestion! I had tried the $scope.$watch method, and while I was able to get it to work, that method is very clunky and unintuitive.


#8

worked for me as well, thank you!


#9

Works for me, thanks Srijith


#10

That worked for me, too.

I would like to know , though, where can I find the documentation for ion-slides so I can write more complicated things like this?


#11

Its very poorly documented, but here… http://idangero.us/swiper/api/


#12

But how do we know how their docs relate to ionic? At what point do you know to do something different in ionic to their docs/api? As the ionic version for example is initialised differently.

I’m struggling to get even the basic one working, which is very strange.


#13

See this comment I left there on that thread asking about the subject matter as same.


#14

For dynamic image sliding it is not working


#15

so i dont understand:

initilaize slider:

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  console.log('sliderInitialized'); 
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
});

when move one slide left or right etc.

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');
});

The picture sliding work fine, but nothing in console


#16

@Srijith You Sir, are a lifesaver. Thanks for pointing us to the Swiper docs. Everything I needed, found.


#17

Cool! Here’s a blog i wrote with this stuff


#18

How can I implement a function (button ng-click) to switch to next slides?

Tried something like this, but did not work.

slideNext: function(swiper){
swiper.slideNext();
}


#19

can you try swiper.slideTo(slideIndex)?


#20

Didn’t work:

$scope.options = {
    loop: false,
    initialSlide: 0,
    direction: 'horizontal',
    effect: 'fade',
    speed: 500,
    paginationClickable: true,
    onInit: function(swiper){
      $scope.swiper = swiper;
    },
    onSlideChangeEnd: function(swiper){
      console.log('active slide is '+swiper.activeIndex);
    },
    slideNext: function(swiper){
      swiper.slideTo(2); //test slide to page 2
    }
  };

Also tried this:

$scope.slideNext = function(swiper){
          swiper.slideTo(2);
}

Thanks for your help!