Slick Slider无限循环CSS过渡动画异常问题求助

问题根源 #

Slick的无限循环功能是通过在原始滑块组前后复制首尾滑块实现的（比如你有5个真实滑块，插件会在开头加第5个的复制、末尾加第1个的复制）。当滚动到末尾的复制滑块时，插件会瞬间将轨道重置到真实第1个滑块的位置，这个瞬间操作会跳过CSS过渡动画，导致视觉上的跳变。

解决方案 #

通过手动控制轨道的过渡状态，在复制滑块切换时平滑修正位置，具体步骤如下：

1. 修改Slick初始化配置，添加切换后的回调逻辑处理复制滑块的位置重置：

$('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  speed: 500, // 需和CSS过渡时长保持一致
  onAfterChange: function(slick, currentSlide) {
    const totalSlides = slick.slideCount;
    const realSlideCount = 5; // 你的真实滑块数量，此处为5
    // 滚动到末尾复制滑块（对应真实第1个滑块）
    if (currentSlide === totalSlides - 1) {
      // 临时移除过渡动画
      $('.slick-track').css('transition', 'none');
      // 无动画跳转到真实第1个滑块（索引1，因开头有1个复制滑块）
      slick.slickGoTo(1, false);
      // 强制重绘后恢复过渡
      setTimeout(() => {
        $('.slick-track').css('transition', `transform ${slick.options.speed}ms ease`);
      }, 0);
    }
    // 滚动到开头复制滑块（对应真实最后一个滑块）
    else if (currentSlide === 0) {
      $('.slick-track').css('transition', 'none');
      // 无动画跳转到真实最后一个滑块（索引realSlideCount，因开头有1个复制滑块）
      slick.slickGoTo(realSlideCount, false);
      setTimeout(() => {
        $('.slick-track').css('transition', `transform ${slick.options.speed}ms ease`);
      }, 0);
    }
  }
});

2. 确保CSS过渡规则正确，给轨道添加明确的过渡属性：

.slick-track {
  transition: transform 500ms ease !important; /* 时长需和JS配置的speed一致 */
}

原理说明 #

• 当切换到复制的首尾滑块时，先临时移除轨道的过渡动画，瞬间跳转到对应真实滑块的位置，该操作用户无感知；
• 随后恢复过渡动画，保证下一次滚动依然有平滑的过渡效果；
• 注意保持JS配置的speed和CSS过渡时长一致，避免动画不同步。

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