javascripthtmlcssswiper.js

Swiper js autoplay slider


I'm having autoplay Swiper js slider, which by default displays one slide at a time, I need to display three slides (or images) at a time, would you please advise me how to adjust it.

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

Solution

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