A premium product focus carousel with one active product in the center and surrounding products visible on both sides. Built for editorial product storytelling, smooth drag interaction, responsive layouts, and flexible styling directly in Framer.
This component works especially well for:
fashion shops
lookbook sections
product highlights
capsule collections
new collection launches
designer brand pages
e-commerce landing pages
featured product modules
campaign showcases
lifestyle product storytelling
Perfect when you want a product carousel that feels more premium, editorial, and curated than a standard shop slider.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
product images
product titles
product subtitles
button labels and links
active and inactive scale
card gap
card radius
overlay color and opacity
background color
text and subtitle colors
button colors
arrow colors
arrow visibility
button visibility
autoplay
autoplay speed
Built with responsive image controls, so product images can support flexible sizing and alt text directly in Framer.
–––––––––––––––––––––––––––
Centered product focus: One product card stays active in the center and becomes the main visual focus.
Visible side cards: Nearby product cards remain visible on both sides for a more dynamic, editorial layout.
Premium fashion style: Large product imagery, rounded cards, soft shadows, gradient overlays, and clean typography.
Product-first structure: Each card includes image, title, subtitle, and optional CTA button.
Layered depth: Inactive cards scale down and sit behind the active card to create a polished showcase effect.
Responsive sizing: The carousel adapts across desktop, tablet, and mobile screens.
–––––––––––––––––––––––––––
Drag navigation: Users can drag horizontally to move through the product carousel.
Click-to-focus: Clicking an inactive product card brings it smoothly into the center.
Arrow controls: Optional left and right arrows make navigation clear and simple.
CTA per product: Each active card can include its own button label and link.
Autoplay option: Autoplay can be enabled and adjusted, with hover pause behavior.
Smooth transitions: Spring-based animations keep the carousel movement soft and premium.
–––––––––––––––––––––––––––
Desktop: Large centered product card with multiple surrounding preview cards visible on both sides.
Tablet: Cards scale down and spacing adjusts for a balanced product showcase.
Mobile: One main product card stays dominant, with swipe-friendly navigation and reduced spacing.
Static renderer support: Uses a stable static state inside Framer’s canvas/export environment to avoid autoplay or interval issues.
–––––––––––––––––––––––––––
moritz strobel
