Variants
Scale Animation
A carousel with smooth scaling transitions between slides, featuring overlay content and dot navigation.Parallax Effect
A dynamic carousel with parallax scrolling effects and gradient overlays, creating depth and visual interest.Fade Transition
A simple yet elegant carousel with smooth fade transitions and navigation arrows.Card Stack
An interactive card-based carousel with 3D perspective and overlapping cards.Features
- Multiple animation variants (scale, parallax, fade, cards)
- Smooth transitions using Framer Motion
- Touch/drag support (when implemented)
- Responsive design
- Auto-play functionality
- Navigation controls (dots, arrows, play/pause)
- Customizable timing and easing
Props
Carousel variants typically accept:slides- Array of slide data objects with image, title, descriptionautoplay- Enable/disable automatic slide progressioninterval- Time between auto-slides (milliseconds)showControls- Show/hide navigation controls
Usage
Carousels are perfect for:- Hero sections
- Product showcases
- Image galleries
- Testimonials
- Feature highlights
- Portfolio displays
Customization
Each carousel can be customized by modifying:- Transition animations and timing
- Navigation control styles
- Overlay content and positioning
- Indicator styles (dots, bars)
- Container dimensions and borders
- Background overlays and gradients