How can i change "SlidesPerView: 4;"?

Question

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?

Answer 1

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"
  },

});