About CMS image carousel

- 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

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