Как исправить некорректную верстку у слайдера Swiper?

Question

использую слайдер Swiper, но почему-то, он корректно работает только при 75% зуме в браузера, если делаю больше, тогда он видимо не понимает какой размер я задал и показывает только пару слайдов, дальше - он не дотягивается. Словами корректно - не знаю как описать, поэтому приложу лучше видео.

Ссылка на видео - https://www.youtube.com/watch?v=hmNfNA0CjGQ&ab_channel=markezemarkeze

const swiper_2 = new Swiper('.swiper-2', {
        slidesPerView: 3,
        spaceBetween: 25,
        slidesPerGroup: 3,
        autoplay: {
            delay: 8000,
            disableOnInteraction: false,
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 0,
            },
            600: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 0,
            },
            768: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 0,
            },
            1000: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 0,
            },
            1480: {
                slidesPerView: 3,
                slidesPerGroup: 3,
                spaceBetween: 0,
            },
        },
        pagination: {
            el: ".swiper-pagination-2",
            clickable: true,
        },
    });

.swiper-slide-2
        {
            min-width: 530px;
            max-width: 530px;
            border-radius: 45px;
            width: 530px;
            height: 530px;
            margin: 0 10px;
            background-color: #818181;
        }

<link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<div class="swiper swiper-2">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-2">
                123123
            </div>
            <div class="swiper-slide swiper-slide-2">
                123123
            </div>
            <div class="swiper-slide swiper-slide-2">
                123123
            </div>
            <div class="swiper-slide swiper-slide-2">
                123123
            </div>
            <div class="swiper-slide swiper-slide-2">
                123123
            </div>
            <div class="swiper-slide swiper-slide-2">
                123123
            </div>
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-2"></div>

БЛОГ НА HUSL

Как исправить некорректную верстку у слайдера Swiper?

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