猫头鹰轮播:到达最后一张幻灯片时运行功能 [英] Owl Carousel: Run function when last slide is reached

问题描述

当轮播到达最后一张幻灯片时，我正在尝试运行一个函数.我已经设法使用afterInit和afterMove回调来循环轮播项目，但是我只需要能够在循环结束时运行一个函数.

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.

希望您能提供帮助.

插件: 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();
        }

推荐答案

我找不到任何onEnd处理程序.

I can't find any onEnd handler.

但是您可以使用afterMove事件，通过访问轮播实例属性currentItem和itemsCount来检查显示的元素是否为最后一个元素.

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

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

代码:

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

演示: http://jsfiddle.net/IrvinDominin/34bJ6/

这篇关于猫头鹰轮播:到达最后一张幻灯片时运行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！