Carousel changes height back and forth after slide animation is finished causing all subsequent elements to wiggle down and up.

[supa-freak]

Checks

• [x] Not a duplicate.
• [x] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.4

Description

This issue does not occur in v3. After scrolling left or right, as soon as the animation ends, there seems to be a wiggle that increases the height of the carousel for a split second, causing the rest of the page to jump down and up again. You can also see 3 dots appearing during that split second on the left bottom corner of the active slide, which might be part of the issue.

Reproduction Link

https://codesandbox.io/p/sandbox/xywd6t

Steps to Reproduce

1. open codesandbox
2. scroll left or right.
3. you will see the arrows jump down and up (this is the effect of the carousel increasing and decreasing its height)

Expected Behaviour

this height increase + decrease should not happen, it causes very bad layout shift plus an unpleasant experience for the user.

[kevinstewartmercurio]

tl;dr try assigning a height and overflow-y: clip to your splide__track element.

I've been working with Splide for almost a year now and I've had to find creative ways around this specific issue. If you know that your carousel will be a certain height then you can assign that height and overflow-y: clip to your element with the splide__track class. However, I've had to build some carousels where the slide contents might change and unfortunately in these scenarios we aren't able to set one height value for the splide__track. I've gotten around this scenario by looping over each slide, finding the maximum slide height, passing that value to splide__track via a CSS variable, and then using CSS to set splide__track's height to the value of that variable. Again, making sure that splide__track still has overflow-y: clip.

All of the carousels I've built have been for client projects that I can't really share, but let me know if that was too confusing to follow and I can set up a sandbox link to provide some more clarification. There's probably different ways of going about implementing my suggestion, I just explained it in the context of the framework I'm familiar with. Hopefully this one is resolved in a future release but for now this is what I've found to work best!