Using margin left in CSS to position on load adds white space

[lukecharle]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-slides-per-view-auto-forked-wwq3wt?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cluvo6owc00072e66dsxpgcnu%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cluvo6owc00032e66y12x0wmz%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cluvo6owc00042e66ramhyg9z%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cluvo6owc00062e662gemsh5a%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cluvo6owc00032e66y12x0wmz%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluvo6owc00022e663wxejq6p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A53%252C%2522startColumn%2522%253A5%252C%2522endLineNumber%2522%253A59%252C%2522endColumn%2522%253A6%257D%255D%257D%255D%252C%2522id%2522%253A%2522cluvo6owc00032e66y12x0wmz%2522%252C%2522activeTabId%2522%253A%2522cluvo6owc00022e663wxejq6p%2522%257D%252C%2522cluvo6owc00062e662gemsh5a%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluvo6owc00052e66i7sd0ofn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cluvo6owc00062e662gemsh5a%2522%252C%2522activeTabId%2522%253A%2522cluvo6owc00052e66i7sd0ofn%2522%257D%252C%2522cluvo6owc00042e66ramhyg9z%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cluvo6owc00042e66ramhyg9z%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug description

So to ensure my slides/cards don't jump until swiper/javascript inits, I add a margin right with the same value of space between to space them out. Once swiperjs loads it actually adds the same as an inline style. But by having the margin right on load its actually causing extra space at the end of the slides

Is there any way to be able to apply the spacing on load and ensure it doesn't cause this extra spacing?

Expected Behavior

No extra space should be at the end of the slider carousel

Actual Behavior

Extra space is added at the end due to using margin right on load

Swiper version

11.1.1

Platform/Target and Browser Versions

macOS Sonoma 14.3 / Firefox 124.0.2

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[lukecharle]

@nolimits4web Is this a discussion? Feels like it should be a bug/issue seeing as having the margin right applied before swiper inits breaks the layout..