Swiper. js slidesPerGroup или slidesPerView не группируют нечетные элементы

Question

Я использую Swiper. js для слайдера на веб-сайте, который я создаю для клиента. Их требование примерно такое: внутри слайдера 10 элементов, 4 будут видны одновременно, и каждый раз, когда вы нажимаете на стрелку, 4 элемента будут выдвигаться, а 4 новых элемента будут вставлены. Так что, если бы у меня были слайды 1- 10, вот как должен вести себя слайдер:

Первый вид: 1-4 слайда Второй вид: 5-8 слайдов Третий вид: 9, 10, 1, 2 слайда Четвертый вид: 3-6 слайдов .. .. и так далее.

Это бесконечное l oop, и всегда будет скользить 4 за раз. Я попытался создать такой слайдер с помощью swiper. js и подошел очень близко, но не совсем там. Вот что мне удалось создать: https://i.gyazo.com/3ef7e1d8f35b067bce961c853214150a.mp4

Вы заметите, что это хорошо в первые два клика, как и ожидалось, но как только слайд 9, 10, 1 и 2, и я нажимаю «Далее», одновременно перемещаются только 2 слайда, в результате отображаются слайды 1–4. Мне нужно, чтобы этого не происходило, и чтобы оно всегда перемещало 4 слайда за раз в бесконечном l oop. Вот мой код:

<script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 10,
      slidesPerGroup: 4,
      loop: true,
      loopFillGroupWithBlank: false,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

Заранее спасибо! Приветствия