Examples Gallery
Explore Example Setups
Get started quickly by browsing our curated collection of functional examples. These setups demonstrate common UI patterns and show how to leverage the Embla Carousel API to create interactive experiences. All examples are hosted on CodeSandbox, allowing you to fork the code and experiment in real-time.
Navigation Indicators (Dots)
Dot navigation is the most common way to show pagination state. These examples demonstrate how to use the scrollSnaps() method to generate the correct number of dots and the select event to keep the active dot in sync with the carousel.
Technical Implementation
- API Methods: Use
emblaApi.scrollSnaps()to determine the total count. - Events: Listen to
emblaApi.on('select', callback)to update the active state. - Interactivity: Use
emblaApi.scrollTo(index)when a dot is clicked.
| Framework | Sandbox Link | | :--- | :--- | | Vanilla JS | View on CodeSandbox | | React | View on CodeSandbox | | Vue | View on CodeSandbox |
Thumbnail Syncing
Thumbnail navigation involves two separate carousels—a "Main" view and a "Thumb" navigation bar—that stay perfectly synchronized. This setup highlights Embla's ability to control multiple instances via a single event loop.
Technical Implementation
- Synchronization: When the main carousel fires a
selectevent, the thumbnail carousel callsemblaThumbsApi.scrollTo(mainApi.selectedSnap()). - Optimization: These examples show how to handle clicks on thumbnails to navigate the main carousel without creating infinite loops.
// Example: Syncing thumbnails to main carousel
const onSelect = () => {
thumbApi.scrollTo(mainApi.selectedSnap())
}
mainApi.on('select', onSelect)
| Framework | Sandbox Link | | :--- | :--- | | Vanilla JS | View on CodeSandbox | | React | View on CodeSandbox | | Svelte | View on CodeSandbox |
Parallax Effects
Create immersive, fluid transitions by applying CSS transforms based on the carousel's scroll progress. Instead of basic sliding, the content inside the slides moves at a different speed than the container.
Technical Implementation
- Event Hook: These examples utilize the
scrollevent, which fires on every frame during movement. - Mathematical Logic: Use
emblaApi.scrollProgress()to calculate the relative position of each slide and apply atranslateXorscaletransform to the slide's inner elements.
// Logic for Parallax
emblaApi.on('scroll', () => {
const progress = emblaApi.scrollProgress()
// Apply transforms to slide nodes based on progress
})
| Framework | Sandbox Link | | :--- | :--- | | Vanilla JS | View on CodeSandbox | | React | View on CodeSandbox | | Solid | View on CodeSandbox |
Additional Patterns
Looking for something more specific? The following examples cover advanced layouts and edge cases:
- Variable Widths: Slides with different dimensions using the
align: 'start'option. - Right-to-Left (RTL): Full support for bidirectional languages using the
direction: 'rtl'option. - Vertical Axis: Carousels that scroll on the Y-axis using
axis: 'y'. - Looping: Infinite scroll configurations that handle slide clones seamlessly.
Example Generator
If you need a custom boilerplate, use the Embla Carousel Generator to pick your framework, plugins, and options to generate a ready-to-use CodeSandbox instantly.