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


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


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


$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

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…


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

<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

The Srijith version works well ! Thank you


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.


worked for me as well, thank you!


Works for me, thanks Srijith


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?


Its very poorly documented, but here…


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.


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


For dynamic image sliding it is not working


so i dont understand:

initilaize slider:

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // 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


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


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


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


can you try swiper.slideTo(slideIndex)?


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

Thanks for your help!