0

Не работает функция 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>

1 ответ 1

0

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

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,
           },
      },
 });
});
1
  • Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 13 дек 2022 в 20:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.