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

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

但是：Kua zxsw指出

Answer 2

以上作品（我想）在猫头鹰旋转木马1上，但如果你使用新的猫头鹰2测试版，你将需要：

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

我在这里得到了上面的答案顺便说一句：

 $('.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')
}
});

Answer 3

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

https://github.com/OwlFonk/OwlCarousel2/issues/292#event-140932502

我已经阅读了很多这样做的方法，但这看起来效果最好。

Answer 4

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

// 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

我知道这个问题有点陈旧，但我提出了一个更简单的解决方案，涵盖了两种情况：multiple（customItems）和singleItem，只需使用它：

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

小提琴：

$('.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
        }
    }
});

Answer 6

这是我对猫头鹰旋转木马100％工作的第二版（2）的解决方案。

对于触发器，我在这里使用api信息 - qazxsw poi

http://jsfiddle.net/rafaelmoni/1ty13y93/

Answer 7

我正在使用owl carousel 2并发现这些变量可能有助于：

https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

光滑的旋转木马是猫头鹰旋转木马的更好的替代品。我强烈推荐这一点。

Answer 8

var owlSlide = jQuery('.slide');
owlSlide.owlCarousel({
 loop:true,
 autoplay:true,
 autoplayTimeout: 3000
});
// jQuery method on
owlSlide.on('changed.owl.carousel',function(property){
  if( property.item.index == 0 ){

    $(property.target).find(".owl-prev").addClass('ailqk');
     $(property.target).find(".owl-next").removeClass('ailqk');

    }else{

        var currnetel = property.item.index + property.page.size;
      // last element
        if( currnetel ==  property.item.count ){
           $(property.target).find(".owl-next").addClass('ailqk');
            $(property.target).find(".owl-prev").removeClass('ailqk');
     }else{
             $(property.target).find(".owl-next").removeClass('ailqk');
         $(property.target).find(".owl-prev").removeClass('ailqk');
     }
  }
});