Swiper js自动播放滑块答案

【问题标题】：Swiper js autoplay sliderSwiper js自动播放滑块
【发布时间】：2020-06-28 02:55:58
【问题描述】：

我有自动播放 Swiper js 滑块，默认情况下一次显示一张幻灯片，我需要一次显示三张幻灯片（或图像），请您告诉我如何调整它。

 <!-- Swiper -->
    <div class="swiper-container">
   <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 class="swiper-slide">Slide 10</div>
 </div>
 <!-- Add Pagination -->
 <div class="swiper-pagination"></div>
 <!-- Add Arrows -->
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
</div>

 <!-- Swiper JS -->

 <script src="../package/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
      <script>
       var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
        delay: 2500,
        disableOnInteraction: false,
        },
      pagination: {
       el: '.swiper-pagination',
       clickable: true,
       },
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      },
     });
   </script>

【问题讨论】：

slidesPerView 参数：swiperjs.com/api/#parameters。文档演示：swiperjs.com/demos/#multiple_slides_per_view。响应式断点演示：swiperjs.com/demos/#responsive_breakpoints

标签： javascript html css swiper

【解决方案1】：

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<div class="swiper-container">
  <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 class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

【讨论】：

我的代码和你朋友的代码没有任何区别
因为我想一次显示三张幻灯片，所以这段代码一次只显示一张幻灯片
@Adel 立即更新检查

【解决方案2】：

如果其他人想知道，到目前为止，它有一个名为“slidesPerGroup”的参数，它需要您要滑动多少张幻灯片。

【讨论】：