Qbessi Qbessi - 2 months ago 45
jQuery Question

Owl Carousel: Run function when last slide is reached

I'm trying to run a function when the last slide of the carousel has been reached. I've managed to use afterInit and afterMove callbacks to cycle the carousel items but I just need to be able to run a function when the cycle ends.

Hope you can help.

Plugin: http://owlgraphic.com/owlcarousel/#customizing

slideshow.owlCarousel({
navigation: false, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
autoPlay: false,
stopOnHover: false,
afterInit : cycle,
afterMove : moved,
});

function cycle(elem){
$elem = elem;
//start counting
start();
}

function start() {
//reset timer
percentTime = 0;
isPause = false;
//run interval every 0.01 second
tick = setInterval(interval, 10);
};

function interval() {
if(isPause === false){
percentTime += 1 / time;
//if percentTime is equal or greater than 100
if(percentTime >= 100){
//slide to next item
$elem.trigger('owl.next')
}
}
}

function moved(){
//clear interval
clearTimeout(tick);
//start again
start();
}

Answer

I can't find any onEnd handler.

But you can use afterMove event to check if the displayed element is the last by accesing the carousel instance properties currentItem and itemsCount.

Ref:

var owl = $(".owl-carousel").data('owlCarousel');

Code:

// carousel setup
$(".owl-carousel").owlCarousel({
    navigation: false,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    autoHeight: true,
    afterMove: moved,
});


function moved() {
    var owl = $(".owl-carousel").data('owlCarousel');
    if (owl.currentItem + 1 === owl.itemsAmount) {
        alert('THE END');
    }
}

Demo: http://jsfiddle.net/IrvinDominin/34bJ6/

Comments