如何实现参考示例中的slick-slider轮播效果？开启CenterMode后其余图片样式如何设置？

你不需要强制使用伪元素实现该需求，两种常见可行方案如下：

方案1：直接调用Slick自带状态类调整样式（推荐） #

开启centerMode后，Slick会自动给轮播项添加三类状态标识：

• 居中激活项：自带.slick-center类
• 两侧可见非激活项：自带.slick-active类，无.slick-center类
• 不可见隐藏项：无.slick-active类

你可以直接通过类名区分状态自定义样式，示例CSS代码：

/* 所有轮播项默认统一样式：缩小、降低透明度、加灰度 */
.slick-slide {
  transform: scale(0.8);
  opacity: 0.5;
  filter: grayscale(80%);
  transition: all 0.3s ease;
}
/* 居中激活项覆盖为正常展示样式 */
.slick-slide.slick-center {
  transform: scale(1);
  opacity: 1;
  filter: grayscale(0);
}

如果需要实现裁剪、偏移等特殊效果，直接调整.slick-slide:not(.slick-center)的对应属性即可。

方案2：伪元素实现（适配额外装饰需求场景） #

如果你的设计需要给两侧非居中项叠加蒙层、渐变遮罩等无法通过元素本身样式实现的效果，可以搭配伪元素实现，示例代码：

/* 轮播项加相对定位，方便伪元素对齐 */
.slick-slide {
  position: relative;
  transform: scale(0.8);
  transition: all 0.3s ease;
}
/* 非居中项加半透黑色蒙层 */
.slick-slide:not(.slick-center)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 1;
  pointer-events: none; /* 避免蒙层遮挡点击事件 */
}
/* 居中项取消蒙层，恢复正常大小 */
.slick-slide.slick-center {
  transform: scale(1);
}
.slick-slide.slick-center::after {
  display: none;
}

配置补充说明 #

如果出现两侧项显示不全的问题，调整Slick初始化参数中的centerPadding值即可，示例初始化配置：

$('.slider').slick({
  centerMode: true,
  centerPadding: '100px', // 两侧预留的显示宽度，可根据设计调整
  slidesToShow: 3, // 同时展示的轮播项数量
  dots: true,
  infinite: true
});

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