CODEWITHSUNDEEP
javascripthtmlcssswiper.js
Parit Sawjani
Parit Sawjani

Reputation: 898

How can I change the number of slides shown per click with swiper js?

For example, I have 6 slides, and I would like it to show in "threes" on click rather than going clicking the button one by one for each slide. I checked the Swiper Methods & Properties but couldn't find what I was looking for. Any suggestions on how I can go about it? Thanks

My Code

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15
    }
  }
});
.product-block {
  background: #ffffff;
  border-radius: 4px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

Upvotes: 2

Views: 2567

Answers (1)

Ezra Siton
Ezra Siton

Reputation: 7741

slidesPerGroup

Set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1 https://swiperjs.com/swiper-api#param-slidesPerGroup

Example (Based on your code):

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      slidesPerGroup: 3, /* The answer to your Q */
      spaceBetween: 15
    }
  }
});
.product-block {
  background: #ffffff;
  border-radius: 4px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

Upvotes: 2

Related Questions