如何仅在 Swiper JS 中为中间幻灯片启用中心幻灯片？答案

【问题标题】：How to enable center slides only for middle slides in Swiper JS?如何仅在 Swiper JS 中为中间幻灯片启用中心幻灯片？
【发布时间】：2018-10-30 02:05:50
【问题描述】：

使用 Swiper JS 处理滑块，并且希望仅为中间幻灯片启用中心幻灯片，而不是第一张和最后一张幻灯片。是否有一种简单且可配置的方法来指定以下居中幻灯片的索引？

 var swiper = new Swiper('.my-swiper-section', {
    slidesPerView: auto,
    spaceBetween: 1
  });

我想出了以下方法，但它现在可以 100% 正确工作：

 swiper.on('slideChangeTransitionStart', function () {
      if (swiper.isBeginning || swiper.isEnd) {
           swiper.params.centeredSlides = false;
      }
      else {
           swiper.params.centeredSlides = true;
      }
      swiper.update();
 });

【问题讨论】：

您好，您找到解决方案了吗？我也遇到了同样的问题。
我知道这是一件老事，但我遇到了同样的问题并设法让它工作，但过渡很丑陋。很高兴知道 Swiper 的作者会提出什么作为解决方案。
没有，还没有找到任何解决方案！

标签： javascript css carousel swiper

【解决方案1】：

刚刚找到真正的解决方案！

您需要向 Swiper 添加 2 个参数。

{
   centeredSlides: true,
   centeredSlidesBounds: true
}

希望它对未来的人有所帮助！

【讨论】：

【解决方案2】：

我认为解决方案是添加参数“initialSlide”。示例：

 var swiper = new Swiper('.my-swiper-section', {
    slidesPerView: auto,
    spaceBetween: 1,
    initialSlide: 3,
  });

【讨论】：