Carousel: adjust number of slides to browser width

Hello,

Thanks for the detailed example, that made the issue very clear.

I’ve added a new feature to the dev branch that directly addresses this. It makes the carousel layout more responsive between breakpoints by dynamically adjusting the number of visible items based on available space.

Here’s how it works, using your example:
If you configure 7 items for large screens, and each slide is around 300px wide (plus some spacing), the carousel will check the actual container width (e.g., 2000px) and reduce the number of visible slides if there isn’t enough room, even if the layout hasn't hit a new breakpoint yet.

Important: the configured values (itemsSmall/itemsBig) now act as maximums, not fixed counts. That means the carousel will never exceed that number, but it may show fewer if space is limited.

Just make sure your settings are realistic for the space you're working with. For example, if your wrapper has a max-width: 1000px, don’t set itemsBig = 4 if each slide is 400px wide, there's simply not enough room. The layout logic respects your max values but can’t override physical constraints.

This responsive behavior currently applies to horizontal carousels only. Let me know how it works for you!

Best wishes,
Alaa

Thank you, again!

May I ask: Does it calculate the Slide Gap also?
And when will the carousel check the actual container width: does it do this on page load or also on resize of the browser window?

Hello,

Does it calculate the slide gap? Yes, it does.
Does it perform this calculation on page load? Yes.
Does it also recalculate on browser resize? Yes, that’s included as well.

Please download the latest development version to apply this update.

Best wishes,
Alaa