如何阻止Owl Carousel轮播项目重复？少于5项时禁止循环播放

你遇到的项目重复问题是配置项loop: true导致的。Owl Carousel的loop模式为了实现无限滚动效果，会在实际项目数量少于单屏设置的展示数（你这里设的是5）时，自动复制重复项目填充空缺位，完全匹配你项目数<5时的异常表现。

根据你的使用需求可以选两种处理方式： #

方式1：项目数≥5时开启循环，<5时自动关闭循环无重复 #

先获取轮播实际项目总数，动态判断是否开启loop和自动播放，修改后的JS代码如下：

$(function(){
  // 获取轮播内实际项目数量
  const itemCount = $(".recent-visited-slider .item").length;
  $(".recent-visited-slider.owl-carousel").owlCarousel({
    dots: true,
    // 项目足够时才开自动播放，不足时不需要滚动可以直接关闭
    autoplay: itemCount >= 5,
    // 核心修改：只有项目数≥5时才开循环，否则关闭避免重复
    loop: itemCount >= 5,
    nav: true,
    items: 5,
  });
});

该方案可以完美匹配你的需求：项目≥5时保持原有的循环轮播效果，项目不足5时直接展示所有现有项目，不会出现重复内容，单屏最多展示5个的规则也不受影响。 #

方式2：全场景不需要循环轮播 #

如果不管项目多少都不需要循环滚动，直接把配置里的loop: true改为loop: false即可。

内容的提问来源于stack exchange，提问作者Rohit Verma