breakpoints with different slidesPerColumn issue

[Lovor01]

I have following initalize settings (I use JSON to load inital settings):

{
	"pagination": {
		"el": ".swiper-pagination",
		"type": "bullets"
	},
	"autoplay": {
		"delay": 9000
	},
	"breakpoints": {
		"0": {
			"slidesPerColumn": 3,
			"slidesPerView": 2,
			"spaceBetween": 14
		},
		"768": {
			"slidesPerColumn": 2,
			"slidesPerView": 3,
			"spaceBetween": 20
		}
	}
}

If page is resized (i.e. mobile orientation changed), and not reloaded, some of margins which were previously set for onte type of layout are not cleared and result in incorrectly shown layout.

More specifically: if screen is above 768px, 4th slide will get margin of 20px on top. However, when changing screen to less than 768px (without reloading), 4th slide will still have margin 20px, although this margin should be cleared, because now it is on top. Other margins are correctly set, it is only a matter of fixing clearing of certain margins when resizing.

• Swiper Version: 6.7.0
• Platform/Target and Browser Versions: Windows, Firefox for developers 90.0, Chrome for developers 93.0

(update) Demo:
https://56n2k.csb.app/

[nolimits4web]

Would be good to see the live demo using the template from issue template at first

[Lovor01]

Web page is not public yet, and it is password protected, can you give me some contact, to send you details in PM?

[nolimits4web]

Please use CodeSandbox or similar to illustrate the issue

[Lovor01]

Hello, there you have it:

https://56n2k.csb.app/
or:
https://codesandbox.io/s/swiper-bug-56n2k?file=/index.html&resolutionWidth=448&resolutionHeight=675
Live:
https://codesandbox.io/live/yrukwzj

This is excessively simplifed compared to my page, but demonstrates the issue. Open the demo in resolution over 768px horizontal, and try resizing to less than that and back.
I am using sandbox for the first time, if something does not work, please let me know.

[Lovor01]

I solved a problem by "hack", inserting clearing margin function on breakpoint event:
(note: .slider-with-title is a class of specific slider on which I have to fix this layout)

const fixElements = document.querySelectorAll('.slider-with-title .swiper-slide');
function fixFunction() {
	fixElements.forEach(function(el) {
		el.style.marginTop = '';
	})
}

setttings = {
...
on: {
    breakpoint: fixFunction
}
...
}

However, it would be nice to see it properly fixed :)

[Lovor01]

Hello, is the demo I provided in comments above adequate? If it is, then you could close "missing demo" issue

[nolimits4web]

Hello, is the demo I provided in comments above adequate? If it is, then you could close "missing demo" issue

yes, thanks, should be fixed now

[aashestakov]

Hello, is the demo I provided in comments above adequate? If it is, then you could close "missing demo" issue

yes, thanks, should be fixed now

Seems bug still exists. We can see problem at resize time: https://uyrrf.csb.app/ - just added breakpoints to example with slidesPerColumn param.
Swiper 6.8.0
var swiper = new Swiper(".mySwiper", { slidesPerView: 2, slidesPerColumn: 1, spaceBetween: 30, breakpoints: { 768: { spaceBetween: 30, slidesPerView: 3, slidesPerColumn: 2 } }, pagination: { el: ".swiper-pagination", clickable: true } });