Swiper JS自定义滑块过渡效果异常问题求助

核心问题 #

你当前的问题根源在于Swiper默认动画机制覆盖了自定义CSS过渡，且未配置匹配目标网站的核心参数——Ridibooks的滑块效果是「中心滑块放大高亮，两侧滑块缩小半透明」的堆叠式过渡，需要Swiper配置+CSS样式配合实现。

具体修复步骤 #

1. 调整Swiper初始化配置 #

将Swiper初始化代码修改为以下内容，开启居中模式并适配堆叠效果：

const swiper = new Swiper('.swiper', {
  centeredSlides: true, // 开启滑块居中，这是效果核心
  slidesPerView: 'auto', // 让滑块根据自身宽度自适应显示数量
  spaceBetween: 20, // 设置滑块间间距
  loop: true,
  coverflowEffect: {
    rotate: 0, // 不需要旋转效果
    stretch: -20, // 让两侧滑块向内收缩
    depth: 100,
    modifier: 1.5, // 控制效果强度
    slideShadows: false // 关闭默认阴影避免干扰
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

2. 重写滑块CSS过渡样式 #

给滑块添加明确的过渡属性，分别定义不同状态下的样式，确保过渡平滑生效：

.swiper-slide {
  width: 280px;
  height: 380px;
  transition: all 0.3s ease-in-out; /* 明确过渡属性及时长 */
  opacity: 0.6;
  transform: scale(0.85); /* 默认状态：缩小+半透明 */
}

.swiper-slide-active {
  opacity: 1;
  transform: scale(1); /* 中心激活滑块：放大+完全不透明 */
}

.swiper-slide-prev,
.swiper-slide-next {
  opacity: 0.8;
  transform: scale(0.92); /* 前后相邻滑块：中间过渡状态 */
}

3. 清理冲突样式 #

删除代码中给.swiper-wrapper添加的自定义过渡规则，Swiper内部会处理滑动容器的动画，额外的过渡规则会和内置逻辑冲突，导致动画失效。

效果验证 #

修改完成后切换滑块，就能实现和目标网站一致的效果：中心滑块始终处于视觉焦点，切换过程中滑块平滑完成缩放与透明度变化，形成自然的堆叠过渡。

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