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', {&nbsp; slidesPerView: 3,&nbsp; spaceBetween: 30,&nbsp; centeredSlides: true,&nbsp; autoplay: {&nbsp; &nbsp; delay: 2500,&nbsp; &nbsp; disableOnInteraction: false,&nbsp; },&nbsp; pagination: {&nbsp; &nbsp; el: '.swiper-pagination',&nbsp; &nbsp; clickable: true,&nbsp; },&nbsp; navigation: {&nbsp; &nbsp; nextEl: '.swiper-button-next',&nbsp; &nbsp; prevEl: '.swiper-button-prev',&nbsp; },});<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">&nbsp; <div class="swiper-wrapper">&nbsp; &nbsp; <div class="swiper-slide">Slide 1</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 2</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 3</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 4</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 5</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 6</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 7</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 8</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 9</div>&nbsp; &nbsp; <div class="swiper-slide">Slide 10</div>&nbsp; </div>&nbsp; <!-- Add Pagination -->&nbsp; <div class="swiper-pagination"></div>&nbsp; <!-- Add Arrows -->&nbsp; <div class="swiper-button-next"></div>&nbsp; <div class="swiper-button-prev"></div></div>

Answer 2

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