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.

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 select event, the thumbnail carousel calls emblaThumbsApi.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)

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 scroll event, which fires on every frame during movement.
Mathematical Logic: Use emblaApi.scrollProgress() to calculate the relative position of each slide and apply a translateX or scale transform to the slide's inner elements.

// Logic for Parallax
emblaApi.on('scroll', () => {
  const progress = emblaApi.scrollProgress()
  // Apply transforms to slide nodes based on progress
})

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.