Search code examples
jqueryjquery-pluginsjquery-cycle2

Is there a way to cancel an event in the jQuery Cycle2 plugin?


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?


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