Swiper spaceBetween 无法正常工作答案

【问题标题】：Swiper spaceBetween doesn't work properlySwiper spaceBetween 无法正常工作
【发布时间】：2019-11-21 14:28:06
【问题描述】：

我正在尝试将slidesPerView: 'auto' 与spaceBetween: 20 属性一起使用，但Swiper 每个视图只显示一张幻灯片。

我想在第一张幻灯片之后显示下一张幻灯片，即使它会被文档宽度切割。

  $(document).ready(function () {
     //initialize swiper when document ready
     var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        loop: false,
        slidesPerView: 3,
        spaceBetween: 40,
        navigation: {
           prevEl: '.slider .prev-btn',
           nextEl: '.slider .next-btn',
        },
        breakpoints: {
           1200: {
              slidesPerView: 'auto',
              spaceBetween: 40,
           },
           830: {
              slidesPerView: 'auto',
              spaceBetween: 10, // <- doesn't work
           }
        }
     });
  });

但它每个视图只显示一张幻灯片，并且忽略了选项中设置的空间。

如何严格设置幻灯片之间的间距？

【问题讨论】：

标签： javascript html slider gallery swiper

【解决方案1】：

slidesPerView 我也有同样的问题：'auto' 总是只显示一张幻灯片。我的解决方案是使用 CSS：(codepen)

.swiper-container{
  width: 100%;
}
.swiper-wrapper {
  width: 50%;
}
.swiper-slide {
  text-align: center;
  width: auto;
}
.slide-image {
  height: 400px;
  width: auto;
}
.my-gallery figure {
  margin: 0px;
}

【讨论】：

感谢您的回答它有效，但我的滑块从循环中的最后一个跳转到第一个。我添加了配置，就像在您的 codepem 项目中一样。你能帮帮我吗？

【解决方案2】：

代替slidesPerView:'auto'，使用这个

breakpoints: {
      "@0.00": {
        slidesPerView: 1,
      },
      "@0.75": {
        slidesPerView: 2,
      },
      "@1.00": {
        slidesPerView: 3,
      },
      "@1.50": {
        slidesPerView: 4,
      },

【讨论】：