- 10 Individual Image Slots: Connect separate images or leave unused slots empty
- Automatic empty slot filtering
- Preview placeholder when no images connected
- Support for any image format (JPG, PNG, WebP, SVG)
- 7 Transition Types: Fade, Blur, Scale, Slide Left, Slide Right, Slide Up, and Zoom Rotate
- Adjustable transition duration (0.1-2 seconds)
- Smooth, hardware-accelerated animations with Framer Motion
- Direction-aware transitions
- Arrow Positioning: 7 positions (Sides, Center/Left/Right Bottom, Center/Left/Right Top)
- Customizable arrow size (24-120px)
- Precise X/Y offset controls
- Custom SVG icon support
- Backdrop blur effect toggle
- Drop shadow toggle
- Hover scale animation with smooth transitions
- Dot Navigation: Clickable dots with instant navigation
- Adjustable dot size (6-24px)
- Customizable inactive dot opacity
- Slide Counter: Shows current/total slides
- Adjustable counter font size (10-24px)
- Optional visibility toggles for all UI elements
- Drag/Swipe: Touch and mouse drag support
- Adjustable drag threshold (0-200px)
- Velocity-based swipe detection
- Autoplay: Configurable speed (1-10 seconds)
- Pauses on canvas, active in preview/published
- Click-to-navigate dots
- Unified Color Controls:
- Single foreground color for arrows, dots, and counter
- Background color with separate opacity control
- Consistent design language
- Backdrop blur effects
- Drop shadow controls
- Smooth hover states
How to Use
1. Add Component: Drag MultiImageCarousel onto your canvas
2. Add Images: Connect images to slots 1-10 (use as many as needed)
3. Customize Layout: Choose arrow position and adjust offsets
4. Style UI: Set colors, sizes, and toggle blur/shadow effects
5. Configure Behavior: Enable autoplay, adjust transitions, set drag threshold
6. Publish: Component works automatically in preview and live sites
Toon Leemans
