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

Question

[crack_user]

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

Для полной картины - прикладываю видео
Ссылка на видео - https://www.youtube.com/watch?v=hmNfNA0CjGQ&ab_cha...

<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>

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

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,
        },
    });

Comments

[Kentavr16]

А до какого зума верстка должна держаться? 75 процентов это вроде окей. Насколько я знаю потолок для отзывчивости часто и ставится 75-90 процентов

[crack_user]

Kentavr16, Получается то как у меня сейчас слайдер ломается на 100% - это норма?

[Kentavr16]

crack_user, каждый сам определяет норму.

Answer 1

[Виталий Першин]

А какого эффекта ты ждешь когда прописываешь фиксированное значение ширины слайда? Ты сам его ломаешь нарушая логику работы и не давая подставить значения, которые swiper рассчитал относительно своего размера.

Вот этого вообще не должно быть в стилях слайда:

min-width: 530px;
max-width: 530px;
width: 530px;
margin: 0 10px;

Если очень хочется свои размеры вставлять, тогда используй slidesPerView: "auto",