Question

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

＆＃13;

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

＆＃13;

Answer 1

我有这个问题 - 我发现将loop选项设置为false可以解决它。

Answer 2

因此，我一直在通过将点击事件传递给克隆的幻灯片来解决这个克隆问题。

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

loop: false,

rewind: true

这将使转盘仍然循环播放，但不能复制幻灯片。

Answer 3

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

         });

将循环设为false并且无法创建克隆项目

Answer 4

准备好解决该问题的好方法：

如果要设置loop：true，则有多个特定项目（在我的情况下，我在屏幕上使用5个项目，可滚动项目总数为15）

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

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

这解决了我的问题，希望对您有所帮助。感谢您提出这个问题，并喜欢下面的代码:)

Answer 5

在我的情况下，我发现，当我添加items: 4时，但项数少于该值时，它将克隆重复项。

Answer 6

所有这些答案都解决了根本问题，但是您不能使用loop：（

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

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

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

6 个答案: