如何在Swiper JS中仅为中间幻灯片启用中心幻灯片?

时间:2018-10-30 02:05:50

标签: javascript css carousel swiper

使用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();
 });

2 个答案:

答案 0 :(得分:2)

我认为解决方案正在添加参数“ initialSlide”。示例:

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

答案 1 :(得分:2)

找到真正的解决方案!

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

{
   centeredSlides: true,
   centeredSlidesBounds: true
}

希望它将对以后的人有所帮助!