Как в Swiper пролистывать слайды после завершения анимации?

Question

Когда ты пролистываешь несколько раз идёт быстрый переход, а нужно чтобы можно было пролистывать только когда завершится анимация пролистывания. В слик слайдере такое видел

Вот пример - https://swiperjs.com/demos#effect-fade Если быстро свайпить слайды накладываются друг на друга

Answer 1

Если я правильно понял, вам был нужен параметр loopPreventsSlide: true. Он как раз не дает использовать слайдер, пока не завершится смена слайда.

Проблема только в том, что этот параметр работает только в сочетании с зацикливанием (loop: true).
При включении зацикливания, loopPreventsSlide установлен в true по умолчанию.

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

<link href="https://unpkg.com/[email protected]/swiper-bundle.min.css" rel="stylesheet" />

<div class="swiper-container mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>


<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    effect: "fade",
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
</script>

БЛОГ НА HUSL

Как в Swiper пролистывать слайды после завершения анимации?

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