owl 轮播中的克隆项目

Question

在构建轮播时，我意识到 owl 添加了克隆的重复项目。我的 owl 配置如下所示。我该如何阻止这种情况发生。

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

Answer 1

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

Answer 2

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

         });

使循环为 false 并且它不会创建克隆项目

Answer 3

在我的例子中，我发现，当我添加 items: 4，但项目数量少于此数量时，它会复制副本。

Answer 4

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

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

loop: false,

rewind: true

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

Answer 5

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

我能够通过根据需要更新数据来保留循环和单击行为，因此 owl 永远不需要为我克隆元素。

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

Answer 6

准备好解决这个问题：

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

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

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

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

Answer 7

设置循环：假
在我的例子中，我将 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
            ---------
        }
    }
});

Answer 8

这对我有用！！！问题在于这个“loop:true”。将其设为 false 或按照以下给出的方式应用它。

$(".employerList").owlCarousel({      
   loop:true,
    margin:20,
    nav:true,
    center: true,
    responsiveClass:true,
    responsive:{
        0:{
            items:3,
            nav:true
        },
        768:{
            items:5,
            nav:true
        },
        1170:{
            items:10,
            nav:true,
            loop:( $('.employerList').length > 4 )
        }
    }
});

owl 轮播中的克隆项目

Cloned items in owl carousel

owl-carousel