javascript - 猫头鹰旋转木马 : Run function when last slide is reached

Question

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

希望你能帮到你。

插件: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 1

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

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

引用:

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/