Swiper js 自动播放滑块

Question

我有自动播放 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>

Answer 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>

Answer 2

如果其他人想知道，到目前为止，可以使用一个名为“slidesPerGroup”的参数，它需要您想要滑动的幻灯片数量。