Question

26

Owl Carousel: Run function when last slide is reached

rated 0 times [ 33] [ 7] / answers: 1 / hits: 50606 / 11 Years ago, tue, january 14, 2014, 12:00:00

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

        }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

makenatiffanic

Add To Favorites

Follow

Total Points: 412

Total Questions: 106

Total Answers: 90

Location: Marshall Islands

Member since Tue, Sep 21, 2021

3 Years ago

answered 11 Years ago ellisw · Accepted 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/