The Carousel component displays content in a sliding panel with navigation controls. It supports keyboard navigation, swipe gestures, autoplay, and multiple transition effects.
Basic Example
A carousel with custom slide content, dots, and arrow navigation:
No preview available
Example
Highlighting code...
Transitions
Choose between slide, fade, and none transition effects:
No preview available
Example
Properties
Core Properties
- count: Number of slides
- current: Active slide index (bindable)
- slide: Snippet receiving the slide index
- loop: Wrap around at boundaries (default: true)
Display Options
- transition: slide, fade, or none
- showDots: Show dot indicators (default: true)
- showArrows: Show navigation arrows (default: true)
- autoplay: Auto-advance slides
- interval: Autoplay interval in ms (default: 5000)
Keyboard & Gestures
- ArrowLeft / ArrowRight: Navigate between slides
- Home / End: Jump to first / last slide
- Swipe left / right: Touch navigation on mobile