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

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?

Does pausing the slideshow not work for you? like $('#mySlideshow').cycle('pause'); — Maurice, Feb 14 '14 at 10:57

score 1 · Accepted Answer · answered Sep 21 '14 at 00:23

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

Didn't know about these hooks. Thanks a lot. – bummzack Sep 28 '14 at 05:59 — bummzack, Sep 28 '14 at 05:59

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

1 Answers1