Question

My setup looks something like this:

$(".slideshow").cycle({
    slides: ".slide",
    timeout: 0,
    speed: 200,
    swipe: true
}).on("cycle-before", function(e, opts, outgoing, incoming, forwardFlag){
    // trying to cancel event here when some condition is met!
});

What I'm trying to do is to check if a certain slide is reached and then do some other action instead of transitioning to the next slide.

I tried return false, e.stopPropagation(), e.stopImmediatePropagation() and combinations thereof, but the slideshow still continues to the next slide, no matter what I do.

Is there a way to cancel the transition to the next slide from inside the cycle-before event handler?

Was it helpful?

Solution

One way is to override they cycle2 internal API as described on http://jquery.malsup.com/cycle2/api/advanced.php

Only call the original internal fn when your condition is met. It will look something like this:

    $( '#mySlideshow' ).on( 'cycle-bootstrap', function( e, optionHash, API ) {
        // advanceSlide handles next, prev
        var origAdvanceSlide = API.advanceSlide;
        API.advanceSlide = function(n) {
            if (<condition>) {
                origAdvanceSlide.call(API,n);
            }
        }

        // jump handles the goto a specific slide
        var origJump = API.jump;
        API.jump = function(n) {
            if (<condition>) {
                origJump.call(API,n);
            }
        }
    });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top