Swiper: Почему не работает breakpoints?

Question

Почему не работает breakpoints у swiper? При адаптиве 640px, не изменяется allowTouchMove: false на allowTouchMove: true.

var swiper = new Swiper(".comment-content__slider", {
      spaceBetween: 1,
      slidesPerView: 2,
      centeredSlides: true,
      slidesPerView: "auto",
      allowTouchMove: false,
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      loop: true,
      loopAdditionalSlides: 4,
      navigation: {
        nextEl: ".swiper-custom-button-next",
        prevEl: ".swiper-custom-button-prev"
      },
      breakpoints: {
        640: {
          allowTouchMove: true,
        },
      }
      });

Answer 1

Указывайте минимальный брейкпоинт с одним параметром, а потом брекпоинт где этот параметр нужно изменить.

breakpoints: {
  320: {
    allowTouchMove: true,
  },
  640: {
    allowTouchMove: false,
  },
}

const swiper = new Swiper(".swiper", {
  spaceBetween: 1,
  slidesPerView: 2,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  loop: true,
  loopAdditionalSlides: 4,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  breakpoints: {
        320: {
            allowTouchMove: true,
        },
    640: {
            allowTouchMove: false,
    },
  }
});

.swiper {
  width: 400px;
  height: 250px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet" />

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Answer 2

Потому что вы указали .swiper-custom-button-next вместо родного .swiper-button-next

БЛОГ НА HUSL

Swiper: Почему не работает breakpoints?

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