Skip to content

component

CMS image carousel

By Toon Leemans

Details

Summary

Versatile image carousel with 10 slots

Description

🖼️ Image Management - 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) 🎨 Transition Effects - 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 🎯 Navigation Controls - 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 📍 Progress Indicators - 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 🎬 Interaction - 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 🎨 Styling System - 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

Introduction

Versatile image carousel with 10 slots

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150118588/148/208/279/39/10
  • All · #1283