CODEWITHSUNDEEP
javascripthtmlcssswiper.js
Adel
Adel

Reputation: 77

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>

Upvotes: 3

Views: 49471

Answers (3)

Kyawl Layy
Kyawl Layy

Reputation: 1

<script src="js/swiper.min.js"></script>
  <script>
    
    var mySwiper = new Swiper('#fk-top-ad .swiper-container', {
      loop: true, // 循环模式选项
      autoplay: true,
      delay: 500,
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      /*
      pagination:{
          el: '#fk-top-ad .swiper-pagination',
          type: 'custom',
          renderCustom: function (swiper, current, total) {
            var paginationHtml = " ";
            for (var i = 0; i < total; i++) {
                if (i === (current - 1)) {
                    paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                }else{
                    paginationHtml += '<span class="swiper-pagination-customs"></span>';
                }
            }
            return paginationHtml;
          }
      }
      */
    })
    
    
  </script>

Upvotes: 0

thedude12
thedude12

Reputation: 79

If anyone else is wondering, as of now it's available a parameter called "slidesPerGroup", and it takes the number of how many slides you want to slide.

Upvotes: 1

vadivel a
vadivel a

Reputation: 1794

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>

Upvotes: 5

Related Questions