About Sections Carousel

Sections Carousel

This framer code component is a deep customizable Multi-Image Sections Carousel, that presents content as a series of cards. Each card holds a title, subtitle, tags, a caption and its own image gallery. Visitors move between cards with buttons, a menu overlay, arrow keys or swipe gestures.

Suitable for timelines, product overviews, case studies and team profiles.

Content

Per section: button label, title, subtitle, tags, caption, filter values and any number of images. Text fields support bold, italic and line breaks. No limit on sections.

Navigation

Previous, next and menu buttons with an optional progress bar. A menu overlay lists all sections. Arrow keys, swipe gestures, image arrows and indicator dots included.

Lightbox

Opens images full screen, with arrows, dots, close button, backdrop, separate opening and closing transitions and optional page-scroll locking. Can be switched off.

Filter

Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages.

Autoplay

Steps through all images of a card before moving on. Pauses on hover, on hidden browser tabs, when scrolled out of view, and for a set delay after any manual step.

Animation

Fade, Crossfade, Zoom and Swipe, set separately for cards, images and the lightbox, each with Framer's transition editor. Optional Ken Burns effect.

Accessibility

Semantic HTML, ARIA labels, screen-reader announcements on card changes, focus handling in the lightbox, full keyboard navigation, and reduced-motion support.

Styling

Twelve property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, all through Framer's native controls.