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 >
  <div >
    <article >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 ></div>
  <div ></div>

</div>

CodePudding user response：

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 >
  <div >
    <article >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 >
      <header >
        <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 ></div>
  <div ></div>

</div>