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

5anewei6 于 2024-01-09 发布在其他

关注(0)|答案(3)|浏览(86)

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

型

css

来源：https://stackoverflow.com/questions/53056390/how-to-enable-center-slides-only-for-middle-slides-in-swiper-js

3条答案

按热度按时间

93ze6v8z1#

刚刚找到了真实的解决方案！
您需要添加2个参数到您的Swiper。

{
   centeredSlides: true,
   centeredSlidesBounds: true
}

字符串
希望将来能帮助到别人！

赞(0）回复(0）举报 2024-01-09

ru9i0ody2#

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

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

字符串

赞(0）回复(0）举报 2024-01-09

bfnvny8b3#

我解决了这个问题

.swiper-slide {
  display: flex;
  justify-content: center
}

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

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

3条答案

相关问题

热门标签

最新问答