Swiper如何实现居中放大主幻灯片且不重叠前后幻灯片？

方案一：固定显示数量+缩放+预留间距 #

这是最稳妥的方案，兼顾居中、放大和不重叠：

• 开启centeredSlides: true确保激活幻灯片居中
• 设置slidesPerView: 3（可根据需求调整数量，比如想显示更多就设4），让前后始终有幻灯片占位
• 通过spaceBetween参数设置足够的间距，给激活态放大预留空间
• 用CSS的transform: scale()控制激活态和非激活态的大小，配合过渡动画

const swiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView: 3,
  spaceBetween: 40, // 间距根据缩放比例调整，放大倍数越大，间距要越大
  loop: true, // 可选，需要循环轮播就开启
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

.swiper-slide {
  transition: transform 0.3s ease;
  transform: scale(0.8); /* 非激活态缩小 */
}
.swiper-slide-active {
  transform: scale(1.5); /* 激活态放大 */
}

方案二：自动适配宽度+激活态加宽+间距控制 #

如果必须用slidesPerView: 'auto'，可以通过调整宽度和边距实现：

• 开启centeredSlides: true和slidesPerView: 'auto'
• 给非激活态设置固定宽度，激活态设置更大宽度，同时增加左右边距避免重叠
• 开启watchSlidesProgress确保样式随幻灯片位置实时更新

const swiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView: 'auto',
  spaceBetween: 20,
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

.swiper-slide {
  width: 200px;
  transition: all 0.3s ease;
}
.swiper-slide-active {
  width: 300px;
  margin: 0 50px; /* 增加左右边距，避免和前后幻灯片重叠 */
}

方案三：缩放+层级+间距优化（针对原scale导致重叠的问题） #

如果坚持用transform: scale()，可以通过以下调整避免重叠：

• 给激活态幻灯片设置更高的z-index，让它显示在最上层
• 加大spaceBetween的数值，确保缩放后的幻灯片不会覆盖前后的幻灯片

.swiper-slide {
  transition: transform 0.3s ease, z-index 0.3s ease;
  z-index: 1;
}
.swiper-slide-active {
  transform: scale(1.5);
  z-index: 10; /* 激活态层级更高 */
}

const swiper = new Swiper('.swiper', {
  centeredSlides: true,
  slidesPerView: 3,
  spaceBetween: 80, /* 足够大的间距抵消缩放带来的宽度增加 */
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

内容的提问来源于stack exchange，提问作者havremjölk