猫头鹰旋转木马中的克隆项目答案

【问题标题】：Cloned items in owl carousel猫头鹰旋转木马中的克隆项目
【发布时间】：2015-10-14 07:22:38
【问题描述】：

在构建轮播时，我意识到猫头鹰添加了克隆的重复项目。我的猫头鹰配置看起来像这样。我该如何阻止这种情况发生。

owlDfe.owlCarousel({
            loop: false,
                        autoWidth:false,
                        nav:false,
                        responsiveClass:true,
                        responsive:{
                            0:{
                                items:sizes.mobile_portrait
                            },
                            568:{
                              items:sizes.mobile_landscape
                            },
                            768:{
                              items:sizes.ipad
                            },
                            800:{
                                items:sizes.desktop
                            },
                            1000:{
                                items:sizes.desktop,
                            }
                        }
          });

【问题讨论】：

标签： owl-carousel

【解决方案1】：

我遇到了这个问题 - 我发现将循环选项设置为 false 为我解决了这个问题。

【讨论】：

这确实解决了它...但我希望我的幻灯片循环播放:(
解决了我的问题 :-) 但我对 OwlCarousel 有一个担忧——为什么他们要克隆每件商品？这一切有什么具体原因吗？
我在代码中添加了一个检查，超过 X 项将激活循环。否则没有循环。

【解决方案2】：

所以，我一直在努力解决这个克隆问题，将点击事件传递给克隆的幻灯片......

最终为我解决的是设置这两个配置值：

loop: false,

rewind: true

这将允许轮播仍然循环播放，但不会复制幻灯片。

【讨论】：

不能解决问题，因为当您在幻灯片末尾时，它是倒带而不是循环，但仍然是公认答案的更好解决方案。谢谢。

【解决方案3】：

为这个问题的超棒解决方案做好准备：

如果您想在项目数量超过特定数量的情况下设置 loop:true（在我的情况下，我在屏幕上使用 5 个项目，可滚动项目总数为 15）

loop: ( $('.owl-carousel .items').length > 5 )

如果项目少于 6 个，上述解决方案将不会运行循环，而如果项目超过 5 个，则将自动启用循环。

这解决了我的问题，我希望这对你也有帮助。感谢您提出这个问题并享受这段代码:)

【讨论】：

非常聪明的解决方案！在我的情况下工作。谢谢@Kamlesh
感谢您的回答，我认为使用此选择器loop: ( $('.owl-carousel > *').length > 5 ), 更通用。再次感谢您的聪明回答
这很好，但一个问题是，如果您有一个响应式轮播，其中显示的项目数量会根据断点而变化，那么这将不起作用。但是，如果您从不改变显示的项目数量，这仍然是一个很好的解决方案。
@Hashcut 这可以完美解决您的问题，从主选项中删除循环，并将其放在每个断点中，例如 780: { items: 3, dots: false, loop: ( $('.owl-carousel .items').length > 3 ), }, 1000: { items: 4, dots: false, loop: ( $('.owl-carousel .items').length > 4 ), }

【解决方案4】：

jQuery('.owl-carousel2').owlCarousel({
    loop:false,
    margin:10,
    nav:true,
    mouseDrag:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3
        }
    }
})

         });

使循环为假，它不会创建克隆项目

【讨论】：

【解决方案5】：

在我的情况下，我发现当我添加items: 4，但项目数量少于那个时，它会克隆重复。

【讨论】：

【解决方案6】：

设置循环：假
就我而言，我将 loop: true 传递给每个响应式项目，即使您传递 loop: false 也会创建克隆项目。所以也删除它

$('.owl-carousel1').owlCarousel({
    loop:false,
    margin: 10,
    nav: true,
    navText:[
        prevIcon,
        nextIcon
    ],
    responsive: {
        0: {
            items: 1,               
            loop:true
            ---------
        },
        576: {
            items: 2,               
            loop:true
            ---------
        },
        768: {
            items: 3,               
            loop:true
            ---------
        },
        992: {
            items: 4,               
            loop:true
            ---------
        },
        1200: {
            items: 4,               
            loop:true
            ---------
        }
    }
});

【讨论】：

【解决方案7】：

所有这些答案都解决了根本问题，但是你不能使用循环:(

我能够通过根据需要更新数据来保留循环和点击行为，这样 owl 就不必为我克隆元素。

var toClone = Object.keys(owlConfig.responsive).length - slides;
if(toClone > 0) {
    slides= [...slides, ...slides.splice(0, toClone)];
}
// initialize carousel here

【讨论】：