$ionicSlides.slideChageStart and $ionicSlides.slideChageEnd events not working

I have been trying to implement a slider from the documentation and I am trying to detect when a slide change

The event handlers doesn’t seem to fire for
"$ionicSlides.slideChangeStart"
and
"$ionicSlides.slideChangeEnd"

.controller(‘TutorialCtrl’, function($scope, $ionicSlideBoxDelegate) {
$scope.options = {
loop: false,
effect: ‘fade’,
speed: 500,
}

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

$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
console.log(‘Slide change is beginning’);

$scope.activeIndex = data.activeIndex;
$scope.previousIndex = data.previousIndex;

});

})

2 Likes

I had a similar problem until I upgraded to Ionic 1.3.1

I have the same problem (v 1.3.1), did anyone found a solution about this ?

The culprit is the slide effect. $ionicSlides.slideChangeStart and slideChangeEnd fire when the effect is ‘slide’ but don’t seem to fire when any other effect is set – options are “slide”, “fade”, “cube” or “coverflow” btw.

$scope.options = {
    loop: false,
    /* effect: 'fade', */ // comment out or replace with 'slide'
    speed: 500,
}

I’m still trying to figure out why they’re not firing with the fade effect, but if you want a quick fix, just omit the effect line.

1 Like

This is working! Thanks