jQuery Slick Slide网站轮播最后一屏显空白再循环的问题排查

问题核心原因 #

1. 重复配置项冲突：代码中重复定义了slidesToScroll: 1和autoplaySpeed，后定义的配置会覆盖前项，虽不是空白问题的直接诱因，但会导致配置逻辑混乱。
2. 连续滚动模式的衔接bug：你使用了autoplaySpeed: 0配合cssEase: 'linear'实现连续滚动，且slide总数（10个）恰好是slidesToShow（5个）的整数倍。Slick的无限循环克隆机制在这种场景下无法生成足够的衔接slide，导致滚动到末尾后出现空白区域，直至新一轮循环启动。

修复步骤 #

步骤1：清理重复配置代码 #

先删除冗余配置，确保逻辑清晰：

$(document).ready(function() {
  $('.customer-logos5').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0, // 连续滚动核心配置
    speed: 8000, // 滚动完所有slide的总时长
    arrows: false,
    dots: false,
    infinite: true,
    pauseOnHover: true,
    cssEase: 'linear',
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1
      }
    }]
  });
});

步骤2：解决连续滚动空白问题 #

推荐通过手动克隆slide实现无缝衔接，让轮播容器内的slide总数翻倍，确保滚动到末尾时能自然衔接开头内容：

$(document).ready(function() {
  // 克隆现有slide并追加到容器末尾
  $('.customer-logos5').append($('.customer-logos5 .slick-slide').clone());
  
  $('.customer-logos5').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 0,
    speed: 8000,
    arrows: false,
    dots: false,
    infinite: true,
    pauseOnHover: true,
    cssEase: 'linear',
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1
      }
    }]
  });
});

步骤3：验证slide宽度样式 #

确保每个slide的宽度适配容器，避免布局错位导致空白：

.customer-logos5 .slick-slide {
  width: 20% !important; /* 5个slide均分容器宽度，可根据实际布局调整 */
  box-sizing: border-box;
}

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