Swiperjs slides in custom layout. How to do?

Question

React

Hey! There are 15 slides, in the mobile they are displayed one by one (this is done), it is necessary that the desktop displays 5 slides in a group ... and also switch 5 slides. In total, we have, as it were, 3 slides, united by a group of 5 pieces, in this arrangement:

poke

The problem comes precisely from the fact that slidesPerColumn: 2 should be on small slides, and on large slidesPerColumn: 1... How to release it, I can not understand .. please tell me!

Ps The numbers on small slides are not particularly important ... that is, their location can be any

Answer 1

Forgot return. Or the curly braces are redundant. In articles.map.

Answer 2

https://swiperjs.com/demos/#responsive_breakpoints

<script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      // init: false,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 5,
          spaceBetween: 50,
        },
      }
    });
  </script>