Почему swiper выводит все itemы?

Question

[an]

делаю слайдер
нужно в пк версии вывести 3 слайда в ряд
для моб. нужно по 1 слайду в ряд, 2 мя рядами
на пк, все ок
а на мобиле выводит безконечные ряды, т.е все слайды пускает на новые ряд
вроде указано все правильно rows: 2,

var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 30,
            initialSlide: 2,
            centeredSlides: true,
            grid: {
                    rows: 2,
                    },

            pagination: {
                el: ".swiper-pagination",
                clickable: true
            },

            breakpoints: {
            768: {
                slidesPerView: 3,
                grid: {
                    rows: 1,
                    },
                
            },
            
            },

            
      });

Comments

[Ankhena]

Самая частая ошибка в свайпере в несколько рядов - это забытая высота обертки и/или детей.

[an]

Ankhena, а как же тогда сделать, если высота не может быть фиксированной?

[Ankhena]

an, как-то разобраться с дизайнером или высотой в относительных единицах измерения.
Есть пропорции, calc и т.д.

Ведь текст у вас и по дизайну не может быть бесконечным. Ведь слайдер должен весь целиком помещаться в высоту страницы (в свободное от шапки и других деталек место)

[an]

Ankhena, ну на счет высоты ясно
но почему все itemы разворачиваются?

[Ankhena]

an,

но почему все itemы разворачиваются?

Я даже не знаю, что вы имеете в виду под этой фразой.

[an]

Ankhena, ну должны идти 3шт в 3ряда по 1му слайду
выводятся все что есть

[Ankhena]

an, потому что, скорее всего, у вас заданы неверные стили, а именно высота родителя и/или слайдов.

[an]

Ankhena, та вы что то не так понимаете видимо
стили тут чему?
в js задаются параметры. даю

grid: {
                    rows: 2,
                    },

он вместо 2 рядов выводит все itemы новыми рядами
т.е если имеется 10 слайдов, он все 10 выводит 10ю рядами
тут с js что то не то, может еще какие то параметры нужно дописывать
стилями мы только оформляем вид

[Ankhena]

an, что-то я устала...
Пойдите в демки, найдите свой пример, сбейте высоту, посмотрите что будет. И это самая частая причина, почему свайпер не работает.

Возможно, у вас дело в другом, но вы же не делаете песочницу на codepen, вы просто показываете кусок кода, которого недостаточно для выяснения причин.

Как решать самостоятельно: берете весь код из работающей демки и аккуратно адаптируете под свой макет. По шагам. Проверяя в какой момент сломалось.

Да, можно и js дописать, чтобы не нужно было редактировать количество строк и в js и в css, а было бы достаточно поменять в одном месте кастомное свойство. Я именно так поступала в своё время.

Но сначала имеет смысл разобраться с хардкорным вариантом.