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