猫头鹰轮播:到达最后一张幻灯片时运行功能

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事件来检查,如果显示的元素是最后由accesing转盘实例属性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/

Answer 2

以上作品(我想)在猫头鹰旋转木马1上,但如果你使用新的猫头鹰2测试版,你将需要:

 $('.owl-carousel').on('change.owl.carousel', function(e) {
if (e.namespace && e.property.name === 'position' 
&& e.relatedTarget.relative(e.property.value) === e.relatedTarget.items().length - 1) {
// put your stuff here ...
console.log('last slide')
}
});

我在这里得到了上面的答案顺便说一下:https://github.com/OwlFonk/OwlCarousel2/issues/292#event-140932502