Carousel
Carousels display rotating images or content with navigation arrows, indicators, and optional autoplay.
Key Features
- Autoplay - Automatic slide advancement with configurable interval
- Navigation - Arrow buttons and dot indicators
- Animations - Slide or fade transitions
- Loop Mode - Continuous cycling through slides
const carousel = Domma.elements.carousel('#carousel', {
autoplay: true,
interval: 5000,
loop: true
});
Quick Start
Examples
With Autoplay
Best Practices
- Accessibility - Provide alt text for images, pause controls
- Performance - Optimize images, lazy load off-screen slides
- Mobile - Ensure touch swipe gestures work properly
API Reference
| Option | Type | Default | Description |
|---|---|---|---|
autoplay |
Boolean | false |
Auto-advance slides |
interval |
Number | 5000 |
Autoplay interval (ms) |
loop |
Boolean | true |
Loop to beginning |
animation |
String | 'slide' |
'slide' or 'fade' |
Methods
| Method | Description |
|---|---|
next() |
Go to next slide |
prev() |
Go to previous slide |
goTo(index) |
Go to specific slide |
play() |
Start autoplay |
pause() |
Pause autoplay |
Declarative Configuration
Configure carousels declaratively with $.setup() for cleaner, more maintainable code.
Basic Carousel Setup
$.setup({
'#hero-carousel': {
component: 'carousel',
options: {
autoplay: true,
interval: 5000,
loop: true,
animation: 'slide'
}
}
});
Product Gallery with Events
$.setup({
'.product-gallery': {
component: 'carousel',
options: {
showArrows: true,
showIndicators: true,
pauseOnHover: true,
onChange: (index, instance) => {
// Update product URL
history.replaceState(null, '', `?slide=${index}`);
// Track view
analytics.track('Product Image Viewed', {
imageIndex: index
});
}
}
}
});
Side-by-Side: Programmatic vs Declarative
Programmatic
const carousel = Domma.elements.carousel(
'#carousel',
{
autoplay: true,
interval: 5000
}
);
carousel.play();
Declarative (Recommended)
$.setup({
'#carousel': {
component: 'carousel',
options: {
autoplay: true,
interval: 5000
}
}
});