swiper как настроить breakpoints на мобильной и планшет одинаково, десктоп стандартно

Question

Подскажите как в swiper настроить breakpoints на мобильной, планшет и малых экранах мониторов чтобы было 1 слайд , а на десктоп стандартно 4 слайда. Как ни делаю мобилка и большой экран работает, остальное берет с десктопа.

    new Swiper(".indexSliderProduct", {
        slidesPerView: 4,
        spaceBetween: 0,
        loop: false,
        allowTouchMove: true,
        freeMode: true,
        navigation: {
            nextEl: ".swiper-button-next1",
            prevEl: ".swiper-button-prev1"
        },
        breakpoints: {
            // when window width is >= 320px
            320: {
                slidesPerView: 1,
                spaceBetween: 0,
                slideToClickedSlide: true,
            },
            // when window width is >= 480px
            480: {
                slidesPerView: 1,
                spaceBetween: 0,
                slideToClickedSlide: true,
            },
            // when window width is >= 640px
            640: {
                slidesPerView: 4,
                spaceBetween: 0,
                slideToClickedSlide: true,
            }
        }
    });

Answer 1

Измените значение 640 на 991 (для примера)

Пример

new Swiper(".indexSliderProduct", {
  slidesPerView: 4,
  spaceBetween: 0,
  loop: false,
  allowTouchMove: true,
  slideToClickedSlide: true,
  freeMode: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  breakpoints: {
    // mobile + tablet - 320-990
    320: {
      slidesPerView: 1
    },
    // desktop >= 991
    991: {
      slidesPerView: 4
    }
  }
});

.indexSliderProduct {
  text-align: center;
}

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper indexSliderProduct">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

БЛОГ НА HUSL

swiper как настроить breakpoints на мобильной и планшет одинаково, десктоп стандартно

Ответы (1 шт):