Join the Webstudio community

Updated 2 months ago

Swiper js demo

At a glance

The post shares a link to a Swiper JS demo. The comments discuss various improvements and issues with the demo, such as preventing jumping by setting an initial CSS position, addressing padding issues on smaller screens, and setting overflow hidden on parent wrappers to prevent horizontal scrolling. Community members suggest these improvements and note that some issues have been fixed in recent updates. There is no explicitly marked answer.

Useful resources
O
D
M
15 comments
one improvement would be is to prevent jumping by having a css-based initial position
so when it kicks in it doesn't jump around
ya, that's actually a good idea
@Oleg Isonen take another look when you get the time.
padding issue on smaller screensizes, i'll have to take a look later, wife yellig at me now πŸ™‚
alright, stupid on my end, figured it out
You might want to set overflow hidden on one of the parent wrappers so that one can't just scroll horizontally
Attachment
Screenshot_20240216-202131.png
@MrShrek where you seeing that at?
I just made some adjustments to the template. Mainly with the Slider Items themselves. Probably best to set a percentage for the slide width depending on your situation. For this example, I decided to not use built in swiper option to set the slide item gutter spacing, however once custom data attributes are allowed, I'll made a template for all of the default swiper demos that community can clone / copy and paste.
@MrShrek this should be fixed with the most recent update.
You are right, the most recent update fixed the issue
@MrShrek well, not so much because i'm using 100vw so I will need to revist a bit
Add a reply
Sign up and join the conversation on Discord