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