Equivalent of on-slide-changed for ion-slides

Question

I am migrating from ion-slide-box to ion-slides.

I was using on-slide-changed with ion-slide-box like this:

<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false"> 

but I can't find the equivalent for ion-slides :

<ion-slides on-slide-changed="slideChanged(index)" options="data.sliderOptions" slider="data.slider" >

I am using Ionic 1 as you can see.

Answer 1

Actually, there is no API build as on-slide-changed for <ion-slides> it is only for <ion-slide-box> only.

But you can use events directly for ion-slides like this:

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

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

So you can call your function like this:

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
   $scope.slideChanged(data.slider.activeIndex);
});

Cheers :)