Carousel height broken
-
My carousel height is broken. I keep getting this random spacing https://prnt.sc/U62pwTWPn6Cw. I have 3 carousels on the page. Sometimes the spacing on 1 is perfectly fine then on refresh it’ll break again. Sometims all 3 are broken. I don’t know what’s causing it. It doesn’t happen on desktop.
I have tried to manually set max-height to fix it but I need a new media query like every 200px, that is so incredibly tedious.Any ideas as to what’s causing this? Here’s my website, thank you.
-
@annaise please try updating the carousel to v2 (version 2) which now uses Swiper.js, a more modern slider/carousel. It’s simple:
- Update the plugin to the latest version.
- Open the post or page with the old Carousel Slider block.
- Click on the Carousel block.
- In the block toolbar (the floating bar above), click the block icon (first button on the left).
- Select “Transform to Carousel Slider v2” from the dropdown.
- Your carousel settings will be preserved — but the HTML markup and design will change with v2.
- Tip: After updating the carousel to v2, double-check your layout and styles. If you used any custom CSS for the old carousel, you may need to reapply them, as class names changed.
I suggest starting by copying the carousel to a test page first. Let me know if this fixes the issue.
The topic ‘Carousel height broken’ is closed to new replies.
