CardCarousel ONE

CardCarousel

I started building a timeline component with AI, then saw the potential for other use cases. I did my best to make it as responsive and customisable as possible.

A deeply customisable multi-image card carousel for product overviews, timelines and more.

📄 Content

• Per section: button label, title, subtitle, tags, caption, filter values and any number of images

• Bold, italic and line breaks in text fields

• No limit on sections

🧭 Navigation

• Previous, next and menu buttons, optional progress bar

• Menu overlay listing all sections

• Arrow keys, swipe, image arrows and indicator dots

• Arrows hide automatically when only one section is left

🔍 Filter

• Show all sections or only selected ones

• Match against the filter field, the tags, or both

• Filter fields can be bound to a variable, so one component serves several pages

• Optional live filter: visitors switch the selection themselves

🖼 Lightbox

• Full-screen view with arrows, dots, close button and backdrop

• Separate opening and closing transitions

• Optional page-scroll locking, or switch it off entirely

▶ Autoplay

• Steps through all images of a card before moving on

• Pauses on hover, on hidden tabs, out of view, and after any manual step

✨ Animation

• Crossfade, Zoom and Swipe, set separately for cards, images and lightbox

• Framer's own transition editor throughout

• Optional Ken Burns effect

♿ Accessibility

• Semantic HTML, ARIA labels, screen-reader announcements

• Focus handling in the lightbox, full keyboard navigation

• Respects reduced-motion preferences

🎨 Styling

• Seventeen property groups: fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches

• All through Framer's native controls

ℹ Notes Uses Framer's animation library and Phosphor Icons. Version ONE.five.

Questions and feedback via the Framer Community. I hope it is useful for your project too.