Почему swiper работает некорректно?

Question

[Илья]

У меня есть слайдер, в котором на экране отображаются 12 слайдов по 4 элемента в 3 столбца, остальные элементы должны быть на другом слайде, но как я не задавал значение fill свайперу, он продолжается рисовать слайды по рядам:


Первое изображение это фактический вывод, второе необходимый.

var swiper = new Swiper('.sample_slider', {
        slidesPerView: 4,
        grid:
            {
                rows:4,
                fill: "row",
            },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

<div class="swiper sample_slider">
                <div class="swiper-wrapper">
                <? foreach ($arResult["ITEMS"] as $index_cur => $arItem) {?>

                    <div class="swiper-slide _1">
                                <div class="list_services__item"
                                     data-tab="<?= $arItem["CODE"] ?>">
                                    <?= $arItem["NAME"] ?>
                                </div>
                    </div>
                        <?}?>
                </div>
                </div>

Answer 1

[Александр Васильев]

в следующий раз бери код из demo библиотеки, клади в codepen и экспериментируй