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 →</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 →</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 →</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?
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