问同时设置滑块滑块
EN

Stack Overflow用户

提问于 2021-07-02 06:13:05

回答 1查看 149关注 0票数 0

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

<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

Stack Overflow用户

发布于 2021-07-02 06:27:48

只需将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
  }
}

..。我在代码沙箱中看不到这些变化，但这似乎是他们这边的一个问题；代码原样在JSFiddle上工作得很好。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68217502

复制

相似问题

问同时设置滑块滑块
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同时设置滑块滑块EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同时设置滑块滑块
EN