This component works especially well for:
portfolio sections
project showcases
service highlights
case study previews
product storytelling
image-based landing pages
brand presentation modules
feature or content sliders
Perfect when you want a carousel that feels more curated, premium, and visual than a standard slider.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
card images
headlines and text
button labels and links
active and inactive scale
card gap
mobile overlap
border radius
border width
overlay color and opacity
shadow intensity
animation speed
fonts and colors
background color
indicator color
Built to look polished from the start, but flexible enough to adapt to different visual styles.
–––––––––––––––––––––––––––
Desktop: Larger centered card with surrounding preview cards on both sides.
Tablet: Card size and spacing adjust for balanced composition.
Mobile: Cards scale down and overlap more naturally for smaller screens.
Static renderer support: Uses a stable static state inside Framer’s canvas/export environment.
–––––––––––––––––––––––––––
Centered focus card: One card stays active in the center while nearby cards remain visible.
Layered card layout: Inactive cards scale down slightly and sit behind the active card.
Premium visual style: Rounded cards, image overlays, soft shadows, and clean typography.
Square image format: Great for strong visuals, product shots, lifestyle imagery, or project previews.
Responsive sizing: Cards adapt automatically across desktop, tablet, and mobile.
–––––––––––––––––––––––––––
Drag navigation: Users can drag horizontally to move through the carousel.
Click-to-focus: Clicking an inactive card brings it smoothly into focus.
Dot indicators: Built-in pagination makes navigation clear and simple.
CTA per card: Each card can include its own button label and link.
Keyboard support: Inactive cards can be selected with Enter or Space.
–––––––––––––––––––––––––––
moritz strobel
