Swiper - 如果总滑块宽度适合容器宽度，中心如何滑动

Question

"swiper": "^4.2.6"

Swiper demo

Swiper repository

您好， 我有这个滑块设置：

const options = {
      wrapperClass: 'slides-list',
      slideClass: 'slide',
      centeredSlides: true,
      slidesPerView: 'auto',  // Default slides per view
      spaceBetween: 20,
      loop: false,
      navigation: {
        prevEl: '.slider_btn--prev',
        nextEl: '.slider_btn--next'
      },
      pagination: {
        el: '.slider_pagination',
        clickable: true,
      },
      speed: 300,
      on: {
        init: function () {
          console.log('swiper initialized');
        },
      }
    };

所以我有这个设置。 滑块包装的黑色边框，幻灯片列表的红色边框。

在移动设备上正常运作

但是让我们面对所有幻灯片宽度都能适应滑块包装的时刻，我怎样才能居中，然后禁用拖动选项。

我不知道幻灯片的宽度，所以现在在示例中我只有3张幻灯片，这是当前的行为

这个是理想的那个

我无法使用媒体查询，因为我不知道幻灯片何时适合容器。那么，Swiper有没有实现这个目标呢？ 提前谢谢。

  

我不想使用slidesPerView: 3，正如我所说，重点是   能够检查我们拥有的所有幻灯片，然后是否所有幻灯片都适合   在容器中，以它们为中心。不要强制X数量的幻灯片   视图

Answer 1

Javascript

const slider = new Swiper(element, {
  slidesPerView: 'auto',
  watchOverflow: true
});
    
slider.on('resize', function (instance) {
  element.classList.toggle('.slider-active', instance.virtualSize > instance.size);
});

CSS

.swiper-wrapper {
  justify-content: center;
}

.slider-active .swiper-wrapper {
  justify-content: normal;
}

通过这种方式，当幻灯片包装器不会溢出容器时，您可以应用 css 来使幻灯片居中。反之亦然重置