Slick Carousel从最后项切换至第一项时center类失效问题

嘿，我之前也碰到过Slick无限轮播的类似样式bug，你的问题根源在于无限轮播循环时Slick的DOM克隆机制：当从最后一张切到第一张时，Slick会自动克隆幻灯片元素来实现无缝过渡，这时候默认的slick-center类绑定逻辑会因为DOM元素的动态排序出现延迟或错位，导致样式没正确应用到真实的当前幻灯片上。

修复方案 #

我们可以通过手动监听切换事件，强制给当前激活的幻灯片设置样式，绕过自动类绑定的bug：

1. 调整CSS（统一过渡逻辑）

先给所有幻灯片加上基础的过渡样式，确保透明度变化有平滑效果：

.slick-slide {
  opacity: 0.5;
  transition: opacity 1s ease-in-out; /* 统一过渡动画 */
}
.slick-slide.slick-center {
  opacity: 1;
}

2. 修改JS（强制绑定中心类）

在Slick初始化后，监听afterChange事件，每次切换完成后手动给当前幻灯片添加slick-center类：

$(document).ready(function(){
  const $slider = $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    infinite: true,
    arrows: true,
    autoplay: false
  });

  // 每次切换完成后重新绑定中心类
  $slider.on('afterChange', function(event, slick, currentSlide){
    // 先移除所有幻灯片的中心类
    $('.slick-slide').removeClass('slick-center');
    // 给当前激活的幻灯片添加中心类
    $(slick.$slides[currentSlide]).addClass('slick-center');
  });
});

为什么这能解决问题？ #

Slick的无限轮播依赖克隆幻灯片来实现“无缝”效果，当循环切换时，克隆的元素会插入到DOM中，默认的slick-center类可能会错误地加到克隆元素上，而不是真实的当前幻灯片。通过afterChange事件获取Slick内置的currentSlide索引，直接操作对应的幻灯片元素，就能确保样式始终应用到正确的位置，透明度过渡也能正常触发。

亲测这个修改后，不管是正向还是反向循环切换，中心幻灯片的透明度都会平滑过渡到1.0，不会再出现失效的情况。

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