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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了猫头鹰轮播:到达最后一张幻灯片时运行功能相关的知识,希望对你有一定的参考价值。

我正在尝试在达到旋转木马的最后一张幻灯片时运行一个功能。我已经设法使用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');
    }
}

但是:Kua zxsw指出

另一答案

以上作品(我想)在猫头鹰旋转木马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') } });

另一答案

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

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

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

另一答案

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

// 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");
});
另一答案

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

另一答案

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

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

http://jsfiddle.net/rafaelmoni/1ty13y93/
另一答案

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

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

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

另一答案

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

以上是关于猫头鹰轮播:到达最后一张幻灯片时运行功能的主要内容,如果未能解决你的问题,请参考以下文章

猫头鹰旋转木马2 - 如何在幻灯片放映之外获得左箭头和右箭头?

将项目添加到 Owl Carousel 的第一个位置

调整jquery css大小时的猫头鹰轮播响应裁剪宽度

到达最后一张幻灯片时,使用键盘左箭头键不应向左滚动

光滑的轮播 JS 库在第一张幻灯片上堆叠所有内容

安卓轮播图怎么让到最后一张的时候来