同时设置swiper滑块答案

【问题标题】：At the same time settings for swiper slider同时设置swiper滑块
【发布时间】：2021-07-01 22:13:04
【问题描述】：

我想为浏览器屏幕设置项目编号。这是关键部分：

<body>
    <!-- Swiper -->
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>

这里是CodeSandbox demo。在这里，我总是同时看到 3 个项目。我想将它设置为 5 张幻灯片；我该怎么做？

【问题讨论】：

标签： swiper

【解决方案1】：

只需将 slidesPerView 的值从 3 更改为您希望看到的值。实际上，您甚至可以为各种屏幕尺寸设置不同的方式，例如（取自official doc page）：

breakpoints: {
  // when window width is >= 320px
  320: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  // when window width is >= 480px
  480: {
    slidesPerView: 3,
    spaceBetween: 30
  },
  // when window width is >= 640px
  640: {
    slidesPerView: 4,
    spaceBetween: 40
  }
}

... 等等。我无法在 Code Sandbox 中看到这些更改，但这似乎是他们的问题；按原样执行的代码在JSFiddle 上运行良好。

【讨论】：