Force Swiper.js to display only one slide on mobile viewport

user_16714190 0
Viewed 1251

I was working on a Swiper.js and I have the following HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
          <img src="images/img1.jpg" alt="">
          <div class="slide-text">
            <h2>Slide One</h2>
            <a class="btn-slider" href="#">LEARN MORE &rarr;</a>
          </div>
      </div>
      <div class="swiper-slide">
        <img src="images/img2.jpg" alt="">
        <div class="slide-text">
         <h2>Slide Two</h2>
         <a class="btn-slider" href="#">LEARN MORE &rarr;</a>
        </div>
    </div>
    <div class="swiper-slide">
        <img src="images/img3.jpg" alt="">
        <div class="slide-text">
         <h2>Slide Two</h2>
         <a class="btn-slider" href="#">LEARN MORE &rarr;</a>
        </div>
    </div>
</div>

By default, you will have the following JS to make it work:

var swiper = new Swiper(".swiper-container", {
  autoplay: {
    slidesPerView: 1,
    disableOnInteraction: false,
  },
});

I was wondering if its possible to force Swiper.js to only display one slide on mobile viewport instead of showing all 3 slides on mobile?

swiper.js javascript
1 Answers

YES, you can use breakpoints object alongside your autoplay, Like this

var swiper = new Swiper(".swiper-container", {
  autoplay: {
    slidesPerView: 1,
    disableOnInteraction: false,
  },
  breakpoints: {
    640: {
      slidesPerView: 1,
      spaceBetween: 20,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 40,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 50,
    },
  },
});

Here Is The Documentation Example For Responsive Sliders

https://codesandbox.io/s/3blv5?file=/index.html

user_86279750
Related