猫头鹰旋转木马"Synced"无限循环



我在互联网上找到了这个代码,但问题是它不是无限循环,它所做的是,如果最后一个项目显示它倒回第一个项目。有可能使它无限吗?

因为如果你在旋转木马上有100个项目,它可能会因此减慢其他设备的速度。

这是同步的演示http://owlgraphic.com/owlcarousel/demos/sync.html

感谢

=============================

下面的代码

$(document).ready(function() {
          var sync1 = $("#sync1");
          var sync2 = $("#sync2");
          sync1.owlCarousel({
            singleItem : true,
            slideSpeed : 1000,
            navigation: true,
            pagination:false,
            afterAction : syncPosition,
            responsiveRefreshRate : 200,
            autoPlay: 3000,
          });
          sync2.owlCarousel({
            items : 15,
            itemsDesktop      : [1199,10],
            itemsDesktopSmall     : [979,10],
            itemsTablet       : [768,8],
            itemsMobile       : [479,4],
            pagination:false,
            responsiveRefreshRate : 100,
            afterInit : function(el){
              el.find(".owl-item").eq(0).addClass("synced");
            }
          });

          function syncPosition(el){
            var current = this.currentItem;
            $("#sync2")
              .find(".owl-item")
              .removeClass("synced")
              .eq(current)
              .addClass("synced")
            if($("#sync2").data("owlCarousel") !== undefined){
              center(current)
            }

          }
          $("#sync2").on("click", ".owl-item", function(e){
            e.preventDefault();
            var number = $(this).data("owlItem");
            sync1.trigger("owl.goTo",number);
          });
          function center(number){
            var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
            var num = number;
            var found = false;
            for(var i in sync2visible){
              if(num === sync2visible[i]){
                var found = true;
              }
            }
            if(found===false){
              if(num>sync2visible[sync2visible.length-1]){
                sync2.trigger("owl.goTo", num - sync2visible.length+2)
              }else{
                if(num - 1 === -1){
                  num = 0;
                }
                sync2.trigger("owl.goTo", num);
              }
            } else if(num === sync2visible[sync2visible.length-1]){
              sync2.trigger("owl.goTo", sync2visible[1])
            } else if(num === sync2visible[0]){
              sync2.trigger("owl.goTo", num-1)
            }
          }
        });

请使用最新版本的旋转木马,并使用 loop:true : http://www.owlcarousel.owlgraphic.com/demos/basic.html

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
html:

<div class="owl-carousel">
    <div class="item">
        <img src="https://static.pexels.com/photos/136301/pexels-photo-136301-medium.jpeg" alt="">
    </div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

相关内容

  • 没有找到相关文章

最新更新