主页 / 问题 / 1478421
Accepted
Alexsander
Asked:2022-12-17 03:34:42 +0000 UTC2022-12-17 03:34:42 +0000 UTC

Swiper：为什么断点不起作用？

  • 772

为什么swiper断点不起作用？在 640px responsive时，它​​不会将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,
        },
      }
      });
javascript

1 个回答

  1. Best Answer

    用一个参数指定最小断点，然后指定需要更改此参数的断点。

    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>

    • 1

相关问题