猫头鹰旋转木马:到达最后一张幻灯片时运行功能



>我正在尝试在到达轮播的最后一张幻灯片时运行一个函数。我已经设法使用 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();
        }

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

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

裁判:

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/

以上(我想)适用于猫头鹰旋转木马 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

在我看来

,一个更好的解决方案:(上面的代码没有考虑一次显示可变数量的项目的响应式布局)

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

对于在2016年使用测试版的任何人来说,最简单的方法是使用"翻译"事件,如下所示:

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

我已经阅读了很多执行此操作的方法,但这似乎最适合仅供参考。

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

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

以上所有解决方案都不适用于猫头鹰旋转木马 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')
    }
    
});

我知道这个问题有点老了,但我提出了一个更简单的解决方案,涵盖了两种情况: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/

我正在使用猫头鹰轮播 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!');
   }
  });
});
光滑的旋转木马

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

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

见下文:

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

最新更新