Swiper работает некорректно

Question

Не работает функция watchOverflow, но при ресайзе экрана все становится нормально.

const sliders = document.querySelectorAll('.swiper');
sliders.forEach(el => {
    const swiper = new Swiper(el, {
        speed: 400,
        spaceBetween: 10,
        slidesPerView: 1.1,
        watchOverflow: true,
        spaceBetween: 5,
        breakpoints: {
            992: {
                spaceBetween: 40,
            },
            480: {
                spaceBetween: 40,
                slidesPerView: 3,
            },
        },
    });
});

Разметка

<div class="gifts__slider swiper">
    <div class="gifts__wrapper swiper-wrapper">
        <div class="gifts__slide swiper-slide">
            <a class="gifts__img-lnk fanc" href="images/grs-landing-caviar/gift_larchik_1.jpg" data-fancybox-group="gifts-1">
                <img class="gifts__img" src="images/grs-landing-caviar/gift_preview/gift_larchik_1.jpg" alt="img">
            </a>
        </div>
        <div class="gifts__slide swiper-slide">
            <a class="gifts__img-lnk fanc" href="images/grs-landing-caviar/gift_larchik_2.jpg" data-fancybox-group="gifts-1">
                <img class="gifts__img" src="images/grs-landing-caviar/gift_preview/gift_larchik_2.jpg" alt="img">
            </a>
        </div>
        <div class="gifts__slide swiper-slide">
            <a class="gifts__img-lnk fanc" href="images/grs-landing-caviar/gift_larchik_3.jpg" data-fancybox-group="gifts-1">
                <img class="gifts__img" src="images/grs-landing-caviar/gift_preview/gift_larchik_3.jpg" alt="img">
            </a>
        </div>
    </div>
</div>

Answer 1

Ошибка была в брейкпоинтах

const sliders = document.querySelectorAll('.swiper');

sliders.forEach(el => {
const swiper = new Swiper(el, {
      speed: 400,
      watchOverflow: true,
      spaceBetween: 5,
      slidesPerView: 3,
      // centeredSlides: true,
      breakpoints: {
           992: {
                spaceBetween: 40,
           },
           480: {
                // centeredSlides: false,
                spaceBetween: 40,
                slidesPerView: 3,
           },
           320: {
                spaceBetween: 10,
                slidesPerView: 1.1,
           },
      },
 });
});

БЛОГ НА HUSL

Swiper работает некорректно

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