Search code examples
javascriptangularjsionic-frameworkion-slide-box

Is there a way to dynamically change ion-slide box slide-interval value?


I have been struggling with this for days now, I'll appreciate your help.

I have a directive where there's an ads slide which slide-interval is tied to a var in the scope and I'm trying to change how long each one of them stays active in the slideChanged function by updating that variable, next line of code is to reload the ionicSlideBoxDeletegate, however, it's not speeding up the animation at all. Here's the code...

.directive('adDirective', function( $ionicSlideBoxDelegate ){
    return {
        restrict: "E",
        replace: true,
        template: ( '<div class="absolute promo-banner-wrp">'
                    + '<ion-slide-box ng-init="disableSwipe()" auto-play="true" on-slide-changed="slideChanged(index)" show-pager="false" does-continue="true" slide-interval="{{speed}}" ng-if="ads.length">'
                        + '<ion-slide ng-click="adTap(ad)" ng-repeat="ad in ads">'
                            + '<img ng-src="{{ad.src}}" />'
                        + '</ion-slide>'
                    + '</ion-slide-box></div>' ),
        controller: function($scope) {
            $scope.slideChanged = function ( index ) {
                $scope.speed = parseInt( $scope.ads[index].category + '000' );
                $ionicSlideBoxDelegate.update();
            };
            $scope.speed = 2000;//In miliseconds
        }
    }
})

Solution

  • I think in order to do what you're asking you'd have to modify ionic.bundle.js as I'm not sure this is supported. Instead, you could just turn off autoplay and manage the looping yourself:

    var nextSlide = function(){
        $ionicSlideBoxDelegate.$getByHandle(YOUR_DELEGATE_HANDLE).next(ANIMATION_SPEED);
        setTimeout(nextSlide, YOUR_SLIDE_INTERVAL);
    }
    nextSlide();
    

    You might also want to catch users changing slides themselves and reset your timeout function.