var swiper = new Swiper(".new-arrival", {
slidesPerView: 4,
centeredSlides: false,
spaceBetween: 30,
autoplay: {
delay: 5500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
i want to change SlidesPerView: 4; to SlidesPerView: 1; when its gonna be max-width 390px how can do it?
Add this to your code.
var swiper = new Swiper(".new-arrival", {
slidesPerView: 4,
centeredSlides: false,
spaceBetween: 30,
breakpoints: {
390: {
slidesPerView: 1,
spaceBetween: 0
},
autoplay: {
delay: 5500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});