Expandable Animated Card Slider

The Expandable Animated Card Slider turns a Collection List into an interactive row of cards. Each card shows only its title until it's clicked, at which point it widens and reveals its description while every other card returns to its collapsed state.

The expand animation is driven by width and transform transitions defined in Webflow, with the active state toggled by a single attribute rather than a class. Owl Carousel handles the horizontal scrolling and variable card widths, running on the jQuery that Webflow already loads.

Key Features

• CMS-driven — bind any Collection List; card count adapts automatically
• Click to expand, click again to collapse, one card open at a time
• Attribute-based state (ms-code-slider-state) so class renames don't break it
• Variable-width cards via Owl Carousel's autoWidth, which native Webflow sliders can't do
• Responsive card sizing across desktop, tablet and mobile breakpoints
• Gradient scrim keeps title and body text legible over any image
• Respects prefers-reduced-motion
• Pagination dots included; arrows available via a config flag

Setup Notes

• Requires the head and footer code blocks from the component's custom code
• The footer block must sit before </body> — Webflow loads jQuery there, and the script needs it
• Delete the Collection List's empty state if you ever filter the list, or the carousel will render it as a stray card
• Card and scrim need matching corner radii; mismatched radii cause square corners to bleed past the rounded card during the expand transition