Owl Carousel：到达最后一张幻灯片时运行功能

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/

Answer 2

上述方法（我想）适用于 Owl Carousel 1，但如果您使用的是新的 Owl 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

Answer 3

在我看来，一个更好的解决方案： （上面的代码没有考虑一次显示可变数量项目的响应式布局）

  mySlider.on('change.owl.carousel', function(e) {
    // number of items on screen updates on responsive
    var shown = e.page.size

    // total number of slides
    var total = e.relatedTarget.items().length - 1

    // current slide index
    var current = e.item.index

    // how many slides to go?
    var remain = total - (shown + current)

    if( !remain ){
      // last slide, fire a method - but dont forget to add checks that you only fire it or execute it once
    }
  });

  mySlider.on('changed.owl.carousel', function(e) {
    // am i the first slide? I do it this way so that we can check for first being true
    var first = ( !e.item.index)

    if( first ){
      // first slide, fire a method - but dont forget to add checks that you only fire it or execute it once
    }
  });

Answer 4

对于在 2016 年使用 Beta 版的任何人，最简单的方法是使用“翻译”事件，如下所示：-

// I'm using Drupal so I already have a carousel going.
var owl = $('#owl-carousel-page2');
// After slide has moved fire some stuff
owl.on('translated.owl.carousel', function (event) {
    console.log(event, "the event after move");
});

我已经阅读了很多这样做的方法，但这似乎是最好的参考。

Answer 5

我遇到了同样的问题，所以我进行了搜索，但这些答案对我不起作用，所以这是我的解决方案，它也适用于多项目幻灯片和单项目幻灯片。

$('.owl-carousel').on('changed.owl.carousel', function(e) {
          if (e.page.index+1 == e.page.count) {
            console.log('last');
          }
          if (e.item.index==0) {
            console.log('start');
          }
        });

Answer 6

上述所有解决方案均不适用于 Owl Carousel 2.3.4

所以我必须想办法做到这一点，我最终得到了以下解决方案

$('.owl-carousel').on('changed.owl.carousel', function(e) {

    var items     = e.item.count;     // Number of items
    var item      = e.item.index;     // Position of the current item
    var size      = e.page.size;      // Number of items per page

    if (item === 0) {
        console.log('Start')
    }

    if ((items - item) === size) {
        console.log('Last')
    }
    

});

Answer 7

我知道这个问题有点老了，但我提供了一个更简单的解决方案，涵盖了这两种情况：multiple(customItems) 和 singleItem，就像这样使用它：

$('.wrap_carousel_feeds').owlCarousel({
    rewindNav: false,
    responsiveRefreshRate: 50,
    //singleItem: true, //works
    itemsCustom: [
        [2570, 15], [2390, 14], [2210, 13], [2030, 12], [1850, 11], [1670, 10], [1490, 9], [1310, 8], [1130, 7], [950, 6], [770, 5], [590, 4]
    ], //works too
    afterMove: function(owl){
        data = $(owl).data('owlCarousel');
        isLast = data.currentItem + data.visibleItems.length == data.itemsAmount;
        if(isLast){ //returns true when reaches the last
            //do stuffs
        }
    }
});

小提琴： http://jsfiddle.net/rafaelmoni/1ty13y93/

Answer 8

我正在使用owl carousel 2，发现这些变量可能会有所帮助：

 $('.owl-carousel').on('change.owl.carousel', function(e) { 
   var carousel = e.currentTarget,
       totalPageNumber = e.page.count, // count start from 1
       currentPageNumber = e.page.index + 1; // index start from 0
   if(currentPageNumber === totalPageNumber - 1){
     console.log('last page reached!');
   }
  });
});

Slick carousel 是 owl carousel 的更好替代品。我强烈推荐。

Answer 9

$carousel.on('change.owl.carousel', function (e) {
         if (e.namespace && e.property.name === 'position' && e.item.index === e.item.count - 1) {
              if (ko.isObservable(values.loaded)) {
                   values.loaded(false);
              }
     }
});

Answer 10

见下文：

$(".owl-carousel").on('change.owl.carousel', function(e) { 

    var total = e.item.count, // # of total items
    itemsPerPage = e.page.size, // # of items that appear per page
    itemGoOut = e.item.index, // index of last item that appeared then went out (index start with 0)
    itemRemain = total - (itemsPerPage + itemGoOut + 1);

    if(itemRemain === 0){
        console.log("No more Items");
    }

});