Qbessi Qbessi - 1 year ago 189
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

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

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

function moved(){
//clear interval
//start again

Answer Source

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.


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


// carousel setup
    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/