Breakpoints don't work with slidesPerColumn and spaceBetween correctly after resize window

[alvteren]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.4.1.

• Platform/Target and Browser Versions: CHROME

• Live Link or JSFiddle/Codepen or website with isssue: https://stackblitz.com/edit/swiper-demo-17-multi-row-slides-layout-nnemkk?file=index.html

I wrote this config:

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      slidesPerColumn: 2,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        400: {
          slidesPerColumn: 1,
        }
      }
    });

and after resize window I see wrong margins

Before resize:

After resize to >400px:

[mmanista]

As a workaround, you can potentially listen for window resize events, and, when bypassing the breakpoint defined in Swiper (400px in your case), remove the margin-top from the shifted slides. Not ideal, but should work.

Here's the demo I've created that doesn't use the loop mode (that needs some extra configuration when slidesPerView is used: https://stackblitz.com/edit/swiper-demo-17-multi-row-slides-layout-r1qmq6

In the example above, you would need to reset the margin-top of 4th slide or 5th slide, depending on the current viewport width.