Embla Carousel

https://www.embla-carousel.com/
Admin
Embla Carousel is a lightweight carousel library featuring fluid motion, great swipe precision, and...
Tokens:60,993
Snippets:591
Trust Score:8.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Installation Methods

Source: https://www.embla-carousel.com/docs/plugins/autoplay

Installation commands and CDN link for the Embla Carousel Autoplay plugin.

```html
<script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
```

```shell
npm install embla-carousel-autoplay --save
```

```shell
pnpm add embla-carousel-autoplay
```

```shell
yarn add embla-carousel-autoplay
```

--------------------------------

### Installation Methods

Source: https://www.embla-carousel.com/docs/plugins/accessibility

Installation commands for various package managers and a CDN link for direct browser usage.

```html
<script src="https://unpkg.com/embla-carousel-accessibility/embla-carousel-accessibility.umd.js"></script>
```

```shell
npm install embla-carousel-accessibility --save
```

```shell
pnpm add embla-carousel-accessibility
```

```shell
yarn add embla-carousel-accessibility
```

--------------------------------

### Install Auto Height via Package Managers

Source: https://www.embla-carousel.com/docs/plugins/auto-height

Install the plugin using npm, pnpm, or yarn.

```shell
npm install embla-carousel-auto-height --save
```

```shell
pnpm add embla-carousel-auto-height
```

```shell
yarn add embla-carousel-auto-height
```

--------------------------------

### Install Fade Plugin via Package Managers

Source: https://www.embla-carousel.com/docs/plugins/fade

Install the plugin using npm, pnpm, or yarn.

```shell
npm install embla-carousel-fade --save
```

```shell
pnpm add embla-carousel-fade
```

```shell
yarn add embla-carousel-fade
```

--------------------------------

### Install Autoplay plugin

Source: https://www.embla-carousel.com/docs/get-started/module

Commands to install the optional Autoplay plugin for Embla Carousel.

```shell
npm install embla-carousel-autoplay --save
```

```shell
pnpm add embla-carousel-autoplay
```

```shell
yarn add embla-carousel-autoplay
```

--------------------------------

### Install Class Names Plugin

Source: https://www.embla-carousel.com/docs/plugins/class-names

Installation methods for the Class Names plugin using various package managers or a CDN.

```html
<script src="https://unpkg.com/embla-carousel-class-names/embla-carousel-class-names.umd.js"></script>
```

```shell
npm install embla-carousel-class-names --save
```

```shell
pnpm add embla-carousel-class-names
```

```shell
yarn add embla-carousel-class-names
```

--------------------------------

### Start Autoplay

Source: https://www.embla-carousel.com/docs/plugins/autoplay

Starts the autoplay timer. The optional instant parameter overrides the default instant configuration.

```javascript
emblaApi.plugins().autoplay?.play(true | false)
```

--------------------------------

### Install Auto Scroll Plugin

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Installation methods for the Auto Scroll plugin using various package managers or CDN.

```html
<script src="https://unpkg.com/embla-carousel-auto-scroll/embla-carousel-auto-scroll.umd.js"></script>
```

```shell
npm install embla-carousel-auto-scroll --save
```

```shell
pnpm add embla-carousel-auto-scroll
```

```shell
yarn add embla-carousel-auto-scroll
```

--------------------------------

### Install Embla Carousel SSR Plugin

Source: https://www.embla-carousel.com/docs/guides/server-side-rendering

Installation commands for the SSR plugin across different package managers.

```html
<script src="https://unpkg.com/embla-carousel-ssr/embla-carousel-ssr.umd.js"></script>
```

```shell
npm install embla-carousel-ssr --save
```

```shell
pnpm add embla-carousel-ssr
```

```shell
yarn add embla-carousel-ssr
```

--------------------------------

### Initialize carousel with plugins

Source: https://www.embla-carousel.com/docs/get-started/module

Example of passing an array of plugins during carousel initialization.

```js
import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const prevButtonNode = wrapperNode.querySelector('.embla__prev')const nextButtonNode = wrapperNode.querySelector('.embla__next')
const emblaApi = EmblaCarousel(viewportNode, { loop: false }, [Autoplay()])
prevButtonNode.addEventListener('click', () => emblaApi.goToPrev(), false)nextButtonNode.addEventListener('click', () => emblaApi.goToNext(), false)
emblaApi.plugins().autoplay?.play()
```

--------------------------------

### Install Embla Carousel Svelte

Source: https://www.embla-carousel.com/docs/get-started/svelte

Install the required package using your preferred package manager.

```shell
npm install embla-carousel-svelte --save
```

```shell
pnpm add embla-carousel-svelte
```

```shell
yarn add embla-carousel-svelte
```

--------------------------------

### Configure startSnap

Source: https://www.embla-carousel.com/docs/api/options

Sets the initial scroll snap index, starting at 0.

```javascript
{ startSnap: 0 }
```

--------------------------------

### Install Wheel Gestures via CDN

Source: https://www.embla-carousel.com/docs/plugins/wheel-gestures

Include the plugin directly in your HTML via a script tag.

```html
<script src="https://unpkg.com/embla-carousel-wheel-gestures/dist/embla-carousel-wheel-gestures.umd.js"></script>
```

--------------------------------

### Configure Global Plugin Options

Source: https://www.embla-carousel.com/docs/api/plugins

Examples demonstrating how to set global options for the Autoplay plugin across different frameworks.

```js
import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')
const emblaApi = EmblaCarousel(viewportNode, { loop: true }, [Autoplay()])
emblaApi.plugins().autoplay?.play()
```

```html
<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

```jsx
import React, { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
export function EmblaCarousel() {  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [Autoplay()])
  useEffect(() => {    if (!emblaApi) return    emblaApi.plugins().autoplay?.play()  }, [emblaApi])
  return (    <div className="embla">      <div className="embla__viewport" ref={emblaRef}>        <div className="embla__container">          <div className="embla__slide">Slide 1</div>          <div className="embla__slide">Slide 2</div>          <div className="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

```html
<script setup>import { watch } from 'vue'import useEmblaCarousel from 'embla-carousel-vue'import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [Autoplay()])
watch(  emblaApi,  (api) => {    if (!api) return    api.plugins().autoplay?.play()  },  { immediate: true })</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>  </div></template>
```

```jsx
import { createEffect, on } from 'solid-js'import useEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay'
Autoplay.globalOptions = { delay: 4000 }
export function EmblaCarousel() {  const [emblaRef, emblaApi] = useEmblaCarousel(    () => ({ loop: true }),    () => [Autoplay()]  )
  createEffect(    on(emblaApi, (api) => {      if (!api) return      api.plugins().autoplay?.play()    })  )
  return (    <div class="embla">      <div class="embla__viewport" ref={emblaRef}>        <div class="embla__container">          <div class="embla__slide">Slide 1</div>          <div class="embla__slide">Slide 2</div>          <div class="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

```svelte
<script>  import useEmblaCarousel from 'embla-carousel-svelte'  import Autoplay from 'embla-carousel-autoplay'
  Autoplay.globalOptions = { delay: 4000 }
  let options = { loop: true }  let plugins = [Autoplay()]
  const onInit = (event) => {    emblaApi = event.detail    emblaApi.plugins().autoplay?.play()  }</script>
<div class="embla">  <div    class="embla__viewport"    on:emblainit={onInit}    use:useEmblaCarousel={{ options, plugins }}  >    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

--------------------------------

### Start Autoplay

Source: https://www.embla-carousel.com/docs/plugins/autoplay

Call the play method to initiate the autoplay functionality.

```javascript
emblaApi.plugins().autoplay?.play()
```

--------------------------------

### Install Embla Carousel React

Source: https://www.embla-carousel.com/docs/get-started/react

Commands to install the Embla Carousel React package using different package managers.

```shell
npm install embla-carousel-react --save
```

```shell
pnpm add embla-carousel-react
```

```shell
yarn add embla-carousel-react
```

--------------------------------

### Install Autoplay Plugin via CDN

Source: https://www.embla-carousel.com/docs/api/plugins

Include the Autoplay plugin directly in your HTML using the unpkg CDN.

```html
<script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>
```

--------------------------------

### Install Wheel Gestures via Package Managers

Source: https://www.embla-carousel.com/docs/plugins/wheel-gestures

Add the plugin to your project dependencies using npm, pnpm, or yarn.

```shell
npm install embla-carousel-wheel-gestures --save
```

```shell
pnpm add embla-carousel-wheel-gestures
```

```shell
yarn add embla-carousel-wheel-gestures
```

--------------------------------

### play(instant?: boolean)

Source: https://www.embla-carousel.com/docs/plugins/autoplay

Starts the autoplay functionality. The optional instant parameter allows for immediate slide transitions.

```APIDOC
## play(instant?: boolean)

### Description
Starts autoplay. Set the instant parameter to true when you want autoplay to do instant slide transitions when advancing.

### Parameters
- **instant** (boolean) - Optional - If true, performs instant slide transitions.

### Returns
- **void**
```

--------------------------------

### emblaApi.plugins().autoScroll.play()

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Starts the auto scroll functionality for the carousel instance.

```APIDOC
## Method
`emblaApi.plugins().autoScroll?.play()`

### Description
Starts the continuous auto-scrolling animation for the carousel. This method must be called to initiate the auto scroll behavior.
```

--------------------------------

### Install Auto Height via CDN

Source: https://www.embla-carousel.com/docs/plugins/auto-height

Include the plugin via a script tag for browser-based usage.

```html
<script src="https://unpkg.com/embla-carousel-auto-height/embla-carousel-auto-height.umd.js"></script>
```

--------------------------------

### Implement Carousel in Solid

Source: https://www.embla-carousel.com/docs/guides/previous-and-next-buttons

Solid component setup using the embla-carousel-solid hook.

```jsx
import useEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() {  const [emblaRef] = useEmblaCarousel(() => ({    loop: false  }))
  return (    <div class="embla">      <div class="embla__viewport" ref={emblaRef}>        <div class="embla__container">          <div class="embla__slide">Slide 1</div>          <div class="embla__slide">Slide 2</div>          <div class="embla__slide">Slide 3</div>        </div>      </div>
      {/* Place your navigation buttons here */}    </div>  )}
```

--------------------------------

### play(startDelay?: number)

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Starts the auto scroll functionality. An optional startDelay can be provided to override the initialized setting.

```APIDOC
## play(startDelay?: number)

### Description
Starts auto scroll. Pass a startDelay if you want to change the startDelay option after the plugin has been initialized.

### Signature
emblaApi.plugins().autoScroll?.play(startDelay?: number)

### Returns
- **void**
```

--------------------------------

### Install Fade Plugin via CDN

Source: https://www.embla-carousel.com/docs/plugins/fade

Include the plugin directly in your HTML via a script tag.

```html
<script src="https://unpkg.com/embla-carousel-fade/embla-carousel-fade.umd.js"></script>
```

--------------------------------

### Install Embla Carousel Vue package

Source: https://www.embla-carousel.com/docs/get-started/vue

Commands to install the Embla Carousel Vue wrapper using various package managers.

```shell
npm install embla-carousel-vue --save
```

```shell
pnpm add embla-carousel-vue
```

```shell
yarn add embla-carousel-vue
```

--------------------------------

### Initialize carousel API

Source: https://www.embla-carousel.com/docs/get-started/module

Basic setup to initialize the carousel and bind navigation buttons to the API.

```js
import EmblaCarousel from 'embla-carousel'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const prevButtonNode = wrapperNode.querySelector('.embla__prev')const nextButtonNode = wrapperNode.querySelector('.embla__next')
const emblaApi = EmblaCarousel(viewportNode, { loop: false })
prevButtonNode.addEventListener('click', () => emblaApi.goToPrev(), false)nextButtonNode.addEventListener('click', () => emblaApi.goToNext(), false)
```

--------------------------------

### Configure Global Options in Vue

Source: https://www.embla-carousel.com/docs/api/options

Sets global options for the Vue implementation using the script setup syntax.

```html
<script setup>import useEmblaCarousel from 'embla-carousel-vue'
useEmblaCarousel.globalOptions = { loop: true }
const [emblaRef] = useEmblaCarousel({ align: 'start' })</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>  </div></template>
```

--------------------------------

### Initialize Embla Carousel in Vanilla JS

Source: https://www.embla-carousel.com/docs/guides/previous-and-next-buttons

Setup for the carousel root and viewport nodes in a vanilla JavaScript environment.

```javascript
import EmblaCarousel from 'embla-carousel'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const emblaApi = EmblaCarousel(viewportNode, { loop: false })
```

--------------------------------

### Start Auto Scroll

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Call the play method on the plugin instance to initiate the auto scroll behavior.

```javascript
emblaApi.plugins().autoScroll?.play()
```

--------------------------------

### Setup Live Region

Source: https://www.embla-carousel.com/docs/plugins/accessibility

Registers a live region element for announcing slide changes. Requires the announceChanges option to be set to true.

```javascript
emblaApi.plugins().accessibility?.setupLiveRegion(  document.querySelector('.embla__live-region') | '.embla__live-region')
```

--------------------------------

### Install Embla Carousel package

Source: https://www.embla-carousel.com/docs/get-started/module

Commands to add the Embla Carousel package to your project dependencies.

```shell
npm install embla-carousel --save
```

```shell
pnpm add embla-carousel
```

```shell
yarn add embla-carousel
```

--------------------------------

### Configure Slide Grouping with slidesToScroll

Source: https://www.embla-carousel.com/docs/guides/grouping-slides

Examples showing how to set the slidesToScroll option across different frameworks to group slides.

```javascript
import EmblaCarousel from 'embla-carousel'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const emblaApi = EmblaCarousel(viewportNode, {  slidesToScroll: 2})
```

```html
<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

```jsx
import React from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() {  const [emblaRef] = useEmblaCarousel({ slidesToScroll: 2 })
  return (    <div className="embla">      <div className="embla__viewport" ref={emblaRef}>        <div className="embla__container">          <div className="embla__slide">Slide 1</div>          <div className="embla__slide">Slide 2</div>          <div className="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

```vue
<script setup>import useEmblaCarousel from 'embla-carousel-vue'
const [emblaRef] = useEmblaCarousel({ slidesToScroll: 2 })</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>  </div></template>
```

```jsx
import useEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() {  const [emblaRef] = useEmblaCarousel(() => ({
    slidesToScroll: 2  }))

  return (    <div class="embla">      <div class="embla__viewport" ref={emblaRef}>        <div class="embla__container">          <div class="embla__slide">Slide 1</div>          <div class="embla__slide">Slide 2</div>          <div class="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

```svelte
<script>  import useEmblaCarousel from 'embla-carousel-svelte'
  let options = { slidesToScroll: 2 }</script>
<div class="embla">  <div class="embla__viewport" use:useEmblaCarousel={{ options }}>    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

--------------------------------

### Configure Embla Carousel in Vue

Source: https://www.embla-carousel.com/docs/api/options

Use EmblaOptionsType within a Vue script setup block. Ensure embla-carousel is installed as a devDependency when using pnpm.

```html
<script setup lang="ts">import { ref } from 'vue'import { EmblaOptionsType } from 'embla-carousel'import emblaCarouselVue from 'embla-carousel-vue'
const options = ref<EmblaOptionsType>({ loop: true })const [emblaRef] = emblaCarouselVue(options)</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>  </div></template>
```

--------------------------------

### Setup Previous and Next Buttons

Source: https://www.embla-carousel.com/docs/plugins/accessibility

Registers previous and next buttons for ARIA attribute management. Accepts either an HTMLElement or a selector string.

```javascript
emblaApi.plugins().accessibility?.setupPrevAndNextButtons(  document.querySelector('.embla__prev-button') | '.embla__prev-button',  document.querySelector('.embla__next-button') | '.embla__next-button')
```

--------------------------------

### Setup Dot Buttons

Source: https://www.embla-carousel.com/docs/plugins/accessibility

Registers the dot buttons wrapper to enable ARIA attribute management for dot navigation. Accepts an HTMLElement or a selector string.

```javascript
emblaApi.plugins().accessibility?.setupDotButtons(  document.querySelector('.embla__dots') | '.embla__dots')
```

--------------------------------

### Play auto scroll

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Starts the auto scroll functionality. An optional startDelay can be passed to override the initialized setting.

```javascript
emblaApi.plugins().autoScroll?.play(true | false)
```

--------------------------------

### Initialize Autoplay Plugin in Solid

Source: https://www.embla-carousel.com/docs/api/plugins

Use the useEmblaCarousel hook with reactive accessors for options and plugins.

```jsx
import { createEffect, on } from 'solid-js'import useEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay'
export function EmblaCarousel() {  const [emblaRef, emblaApi] = useEmblaCarousel(    () => ({ loop: true }),    () => [Autoplay({ delay: 4000 })]  )
  createEffect(    on(emblaApi, (api) => {      if (!api) return      api.plugins().autoplay?.play()    })  )
  return (    <div class="embla">      <div class="embla__viewport" ref={emblaRef}>        <div class="embla__container">          <div class="embla__slide">Slide 1</div>          <div class="embla__slide">Slide 2</div>          <div class="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

--------------------------------

### slideNodes

Source: https://www.embla-carousel.com/docs/api/methods

Get all the slide nodes inside the container.

```APIDOC
## slideNodes()

### Description
Get all the slide nodes inside the container. This method can be useful when you need to manipulate the slide elements dynamically or similar.

### Returns
- **HTMLElement[]**
```

--------------------------------

### containerNode

Source: https://www.embla-carousel.com/docs/api/methods

Get the container node that holds the slides.

```APIDOC
## containerNode()

### Description
Get the container node that holds the slides. This method can be useful when you need to manipulate the container element dynamically or similar.

### Returns
- **HTMLElement**
```

--------------------------------

### snapIndex

Source: https://www.embla-carousel.com/docs/api/methods

Get the selected scroll snap index with an offset.

```APIDOC
## snapIndex(offset: number)

### Description
Get the selected scroll snap index. Provide a positive or negative offset to compute a different index.

### Parameters
- **offset** (number) - Required - The offset to compute the index.
```

--------------------------------

### Initialize Autoplay Plugin in Solid

Source: https://www.embla-carousel.com/docs/api/plugins

Pass plugins as a function returning an array to the useEmblaCarousel hook.

```jsx
import { createEffect, on } from 'solid-js'import useEmblaCarousel from 'embla-carousel-solid'import Autoplay from 'embla-carousel-autoplay'
export function EmblaCarousel() {  const [emblaRef, emblaApi] = useEmblaCarousel(    () => ({ loop: true }),    () => [Autoplay()]  )
  createEffect(    on(emblaApi, (api) => {      if (!api) return      api.plugins().autoplay?.play()    })  )
  return (    <div class="embla">      <div class="embla__viewport" ref={emblaRef}>        <div class="embla__container">          <div class="embla__slide">Slide 1</div>          <div class="embla__slide">Slide 2</div>          <div class="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

--------------------------------

### previousSnap

Source: https://www.embla-carousel.com/docs/api/methods

Get the index of the previously selected scroll snap.

```APIDOC
## previousSnap()

### Description
Get the index of the previously selected scroll snap. This method can be useful when you need to know which scroll snap was previously selected.

### Returns
- **number**
```

--------------------------------

### autoscroll:play

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Event fired when auto scroll starts playing.

```APIDOC
## autoscroll:play

### Description
Fires when auto scroll starts playing.

### Signature
emblaApi.on('autoscroll:play', (emblaApi) => {})
```

--------------------------------

### Get container node

Source: https://www.embla-carousel.com/docs/api/methods

Retrieves the container element that holds the slides.

```javascript
emblaApi.containerNode()
```

--------------------------------

### Implement Dot Navigation in Vanilla JavaScript

Source: https://www.embla-carousel.com/docs/guides/dot-buttons

Uses the snapList method to dynamically generate buttons and attach click event listeners for navigation.

```javascript
import EmblaCarousel from 'embla-carousel'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const dotsNode = wrapperNode.querySelector('.embla__dots')const emblaApi = EmblaCarousel(viewportNode, { loop: false })
let dotNodes = []
const createDotButtonHtml = (emblaApi, dotsNode) => {  const dotTemplate = document.getElementById('embla-dot-template')  const snapList = emblaApi.snapList()  dotsNode.innerHTML = snapList.reduce((acc) => acc + dotTemplate.innerHTML, '')  return Array.from(dotsNode.querySelectorAll('.embla__dot'))}
const addDotButtonClickHandlers = (emblaApi, dotNodes) => {  dotNodes.forEach((dotNode, index) => {    dotNode.addEventListener('click', () => emblaApi.goTo(index), false)  })}
const createAndSetupDotButtons = (emblaApi, dotsNode) => {  dotNodes = createDotButtonHtml(emblaApi, dotsNode)  addDotButtonClickHandlers(emblaApi, dotNodes)}
createAndSetupDotButtons(emblaApi, dotsNode)emblaApi.on('reinit', () => createAndSetupDotButtons(emblaApi, dotsNode))
```

```html
<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div>
  <div class="embla__dots"></div>
  <script type="text/template" id="embla-dot-template">    <button class="embla__dot">      <!-- Button content -->    </button>  </script></div>
```

--------------------------------

### Autoplay Configuration Options

Source: https://www.embla-carousel.com/docs/plugins/autoplay

Configuration settings for the Autoplay plugin.

```javascript
{ active: false | true }
```

```javascript
{   delay: 4000,  '(min-width: 768px)': { delay: 2000 }}
```

```javascript
{ delay: 4000 | (snapList) => snapList.map((_, index) => index * 1000) }
```

```javascript
{ instant: true | false }
```

```javascript
{ defaultInteraction: true | false }
```

```javascript
{ stopOnLastSnap: true | false }
```

```javascript
{ rootNode: null | (emblaRoot) => emblaRoot.parentElement }
```

--------------------------------

### Listen to autoscroll:play event

Source: https://www.embla-carousel.com/docs/plugins/auto-scroll

Fires when auto scroll starts playing.

```javascript
emblaApi.on('autoscroll:play', (emblaApi) => {})
```

--------------------------------

### Initialize Embla Carousel with Plugins in TypeScript

Source: https://www.embla-carousel.com/docs/api/plugins

Demonstrates manual initialization of Embla Carousel with the Autoplay plugin using TypeScript.

```ts
import EmblaCarousel, { EmblaPluginType } from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const wrapperNode = <HTMLElement>document.querySelector('.embla')const viewportNode = <HTMLElement>wrapperNode.querySelector('.embla__viewport')
const plugins: EmblaPluginType[] = [Autoplay()]
const emblaApi = EmblaCarousel(viewportNode, { loop: true }, plugins)
emblaApi.plugins().autoplay?.play()
```

--------------------------------

### rootNode

Source: https://www.embla-carousel.com/docs/api/methods

Get the root node that holds the scroll container with slides inside.

```APIDOC
## rootNode()

### Description
Get the root node that holds the scroll container with slides inside. This method can be useful when you need to manipulate the root element dynamically or similar.

### Returns
- **HTMLElement**
```

--------------------------------

### Get slide nodes

Source: https://www.embla-carousel.com/docs/api/methods

Retrieves an array of all slide elements within the container.

```javascript
emblaApi.slideNodes()
```

--------------------------------

### goTo

Source: https://www.embla-carousel.com/docs/api/methods

Scroll to a scroll snap by its unique index.

```APIDOC
## goTo(index: number, instant?: boolean, direction?: 'forward' | 'backward')

### Description
Scroll to a scroll snap by its unique index. Set the instant parameter to true when you want the scroll to happen instantly (no scroll animation). If loop is enabled and the direction parameter is omitted, Embla Carousel will choose the closest way to the target scroll snap.

### Parameters
- **index** (number) - Required - The target scroll snap index.
- **instant** (boolean) - Optional - Set to true for instant scroll.
- **direction** ('forward' | 'backward') - Optional - The direction of the scroll.
```

--------------------------------

### Get root node

Source: https://www.embla-carousel.com/docs/api/methods

Retrieves the root element holding the carousel container.

```javascript
emblaApi.rootNode()
```

--------------------------------

### Implement Carousel in Svelte

Source: https://www.embla-carousel.com/docs/guides/previous-and-next-buttons

Svelte component setup using the embla-carousel-svelte action.

```svelte
<script>  import useEmblaCarousel from 'embla-carousel-svelte'
  let options = { loop: false }</script>
<div class="embla">  <div class="embla__viewport" use:useEmblaCarousel={{ options }}>    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div>
  <!-- Place your navigation buttons here --></div>
```

--------------------------------

### Implement Carousel in Vue

Source: https://www.embla-carousel.com/docs/guides/previous-and-next-buttons

Vue component setup using the embla-carousel-vue hook.

```vue
<script setup>import useEmblaCarousel from 'embla-carousel-vue'
const [emblaRef] = useEmblaCarousel({ loop: false })</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>
    <!-- Place your navigation buttons here -->  </div></template>
```

--------------------------------

### Initialize Embla Carousel and handle select events in Svelte

Source: https://www.embla-carousel.com/docs/api/events

Demonstrates initializing the carousel using the Svelte action and attaching a select event listener.

```svelte
<script lang="ts">  import {    EmblaCarouselType,    EmblaEventModelType,    EmblaOptionsType  } from 'embla-carousel'  import useEmblaCarousel from 'embla-carousel-svelte'
  let emblaApi: EmblaCarouselType  let options: EmblaOptionsType = { loop: true }
  const logSelectEvent = (    emblaApi: EmblaCarouselType,    event: EmblaEventModelType<'select'>  ): void => {    const { sourceSnap, targetSnap } = event.detail
    console.log('Previous snap index: ', sourceSnap)    console.log('Current snap index: ', targetSnap)  }
  const onInit = (event: CustomEvent<EmblaCarouselType>): void => {    emblaApi = event.detail    emblaApi.on('select', logSelectEvent)  }</script>
<div class="embla">  <div    class="embla__viewport"    on:emblainit={onInit}    use:useEmblaCarousel={{ options }}  >    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

--------------------------------

### Implement Carousel in React

Source: https://www.embla-carousel.com/docs/guides/previous-and-next-buttons

React component setup using the embla-carousel-react hook.

```jsx
import React from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() {  const [emblaRef] = useEmblaCarousel({ loop: false })
  return (    <div className="embla">      <div className="embla__viewport" ref={emblaRef}>        <div className="embla__container">          <div className="embla__slide">Slide 1</div>          <div className="embla__slide">Slide 2</div>          <div className="embla__slide">Slide 3</div>        </div>      </div>
      {/* Place your navigation buttons here */}    </div>  )}
```

--------------------------------

### Configure Embla Carousel via constructor

Source: https://www.embla-carousel.com/docs/api/options

Demonstrates setting the loop option to true using the constructor across different frameworks.

```javascript
import EmblaCarousel from 'embla-carousel'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')
const emblaApi = EmblaCarousel(viewportNode, { loop: true })
```

```html
<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

```jsx
import React from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() {  const [emblaRef] = useEmblaCarousel({ loop: true })
  return (    <div className="embla">      <div className="embla__viewport" ref={emblaRef}>        <div className="embla__container">          <div className="embla__slide">Slide 1</div>          <div className="embla__slide">Slide 2</div>          <div className="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

```html
<script setup>import useEmblaCarousel from 'embla-carousel-vue'
const [emblaRef] = useEmblaCarousel({ loop: true })</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>  </div></template>
```

```jsx
import useEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() {  const [emblaRef] = useEmblaCarousel(() => ({ loop: true }))
  return (    <div class="embla">      <div class="embla__viewport" ref={emblaRef}>        <div class="embla__container">          <div class="embla__slide">Slide 1</div>          <div class="embla__slide">Slide 2</div>          <div class="embla__slide">Slide 3</div>        </div>      </div>    </div>  )}
```

```svelte
<script>  import useEmblaCarousel from 'embla-carousel-svelte'
  let options = { loop: true }</script>
<div class="embla">  <div class="embla__viewport" use:useEmblaCarousel={{ options }}>    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

--------------------------------

### select

Source: https://www.embla-carousel.com/docs/api/events

Runs when the selected scroll snap changes.

```APIDOC
## select

### Description
Runs when the selected scroll snap changes. The select event is triggered by drag interactions or the goToNext, goToPrev or goTo methods.

### Detail
{ targetSnap: number, sourceSnap: number }

### Usage
```javascript
emblaApi.on('select', (emblaApi, event) => {  const { targetSnap, sourceSnap } = event.detail})
```
```

--------------------------------

### autoplay:play

Source: https://www.embla-carousel.com/docs/plugins/autoplay

Fires when autoplay starts playing. The autoplay timer becomes active.

```APIDOC
## autoplay:play

### Description
Fires when autoplay starts playing. When this event is triggered, the autoplay timer is active, and autoplay will select the next scroll snap and start scrolling to it when the delay has passed.

### Usage
```javascript
emblaApi.on('autoplay:play', (emblaApi) => {})
```
```

--------------------------------

### Get snap list

Source: https://www.embla-carousel.com/docs/api/methods

Returns an array of progress values for all scroll snap positions.

```javascript
emblaApi.snapList()
```

--------------------------------

### Implement SSR with Vanilla JavaScript

Source: https://www.embla-carousel.com/docs/guides/server-side-rendering

Configure the SSR plugin with matching slide sizes and generate styles for the server-rendered HTML.

```javascript
// SERVER
import EmblaCarousel from 'embla-carousel'
import Ssr from 'embla-carousel-ssr'

export function getEmblaCarouselSsr(slides, carouselId) {
  const emblaServerApi = EmblaCarousel(null, { loop: true }, [
    Ssr({
      slideSizes: slides.map(() => 50), // Each slide is 50% of the viewport width
      breakpoints: {
        '(min-width: 768px)': {
          slideSizes: slides.map(() => 70) // Each slide is 70% of the viewport width
        }
      }
    })
  ])

  return `
    <style>
      ${emblaServerApi
        .plugins()
        .ssr?.getStyles(`#${carouselId}`, '.embla__slide')}
    </style>

    <div class="embla">
      <div class="embla__viewport">
        <div class="embla__container" id="${carouselId}">
          ${slides
            .map((slide) => `<div class="embla__slide">${slide}</div>`)
            .join('')}
        </div>
      </div>
    </div>
  `
}
```

--------------------------------

### Get previous snap index

Source: https://www.embla-carousel.com/docs/api/methods

Returns the index of the previously active scroll snap.

```javascript
emblaApi.previousSnap()
```

--------------------------------

### setupLiveRegion

Source: https://www.embla-carousel.com/docs/plugins/accessibility

Registers the live region element for the carousel, allowing the Accessibility plugin to announce slide changes to assistive technologies.

```APIDOC
## setupLiveRegion(liveRegion)

### Description
Registers the live region element for the carousel, allowing the Accessibility plugin to announce slide changes to assistive technologies. Provide an element or a selector string for the live region. Note: The `announceChanges` option must be set to `true` for this to work.

### Parameters
- **liveRegion** (HTMLElement | string) - Required - The live region element or selector.

### Returns
- **void**
```

--------------------------------

### Get selected snap index

Source: https://www.embla-carousel.com/docs/api/methods

Returns the index of the currently active scroll snap.

```javascript
emblaApi.selectedSnap()
```

--------------------------------

### Initialize Autoplay Plugin in Svelte

Source: https://www.embla-carousel.com/docs/api/plugins

Use the use:useEmblaCarousel action and listen for the emblainit event to access the API.

```svelte
<script>  import useEmblaCarousel from 'embla-carousel-svelte'  import Autoplay from 'embla-carousel-autoplay'
  let options = { loop: true }  let plugins = [Autoplay({ delay: 4000 })]
  const onInit = (event) => {    emblaApi = event.detail    emblaApi.plugins().autoplay?.play()  }</script>
<div class="embla">  <div    class="embla__viewport"    on:emblainit={onInit}    use:useEmblaCarousel={{ options, plugins }}  >    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div></div>
```

--------------------------------

### Inspect Container Transform

Source: https://www.embla-carousel.com/docs/guides/how-embla-carousel-works

Example of the inline transform applied to the carousel container for scrolling.

```html
<div class="embla">  <div class="embla__viewport">    <div      class="embla__container"      style="transform: translate3d(73.5px, 0px, 0px)"    >      <!-- slides -->    </div>  </div></div>
```

--------------------------------

### Inspect Slide Transforms

Source: https://www.embla-carousel.com/docs/guides/how-embla-carousel-works

Example of inline transforms applied to individual carousel slides for positioning.

```html
<div class="embla__slide" style="transform: translate3d(0px, 0px, 0px)">  <div class="embla__slide__number">    <span>1</span>  </div></div><div class="embla__slide" style="transform: translate3d(0px, 0px, 0px)">  <div class="embla__slide__number">    <span>2</span>  </div></div>
<!-- ...and so on -->
```

--------------------------------

### goToNext

Source: https://www.embla-carousel.com/docs/api/methods

Scroll to the next scroll snap if possible.

```APIDOC
## goToNext(instant?: boolean)

### Description
Scroll to the next scroll snap if possible. When loop is disabled and the carousel has reached the last scroll snap, this method won't do anything. Set the instant parameter to true when you want the scroll to happen instantly (no scroll animation).

### Parameters
- **instant** (boolean) - Optional - Set to true for instant scroll.
```

--------------------------------

### setUpdateLiveRegion

Source: https://www.embla-carousel.com/docs/plugins/accessibility

Controls whether the live region should be updated when the slide changes.

```APIDOC
## setUpdateLiveRegion(enable)

### Description
Controls whether the live region should be updated when the slide changes. This can be useful for preventing unnecessary announcements when autoplay or auto scroll is active.

### Parameters
- **enable** (boolean) - Required - Whether to enable live region updates.

### Returns
- **void**
```

--------------------------------

### Initialize Carousel with Plugins

Source: https://www.embla-carousel.com/docs/get-started/cdn

Pass an array of plugins as the third argument to the EmblaCarousel constructor.

```html
<script type="text/javascript">  const wrapperNode = document.querySelector('.embla')  const viewportNode = wrapperNode.querySelector('.embla__viewport')  const prevButtonNode = wrapperNode.querySelector('.embla__prev')  const nextButtonNode = wrapperNode.querySelector('.embla__next')
  const emblaApi = EmblaCarousel(viewportNode, { loop: false }, [    EmblaCarouselAutoplay()  ])
  prevButtonNode.addEventListener('click', () => emblaApi.goToPrev(), false)  nextButtonNode.addEventListener('click', () => emblaApi.goToNext(), false)
  emblaApi.plugins().autoplay?.play()</script>
```

--------------------------------

### Initialize Autoplay Plugin in Vue

Source: https://www.embla-carousel.com/docs/api/plugins

Use the useEmblaCarousel composable and watch the API instance to trigger plugin methods.

```html
<script setup>import { watch } from 'vue'import useEmblaCarousel from 'embla-carousel-vue'import Autoplay from 'embla-carousel-autoplay'
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [  Autoplay({ delay: 4000 })])
watch(  emblaApi,  (api) => {    if (!api) return    api.plugins().autoplay?.play()  },  { immediate: true })</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>  </div></template>
```

--------------------------------

### Get snap index by offset

Source: https://www.embla-carousel.com/docs/api/methods

Calculates a snap index based on a provided offset from the current position.

```javascript
emblaApi.snapIndex(0)
```

--------------------------------

### Set Breakpoints Option

Source: https://www.embla-carousel.com/docs/plugins/auto-height

Define responsive behavior by overriding root options based on media queries.

```javascript
{   active: false,  '(min-width: 768px)': { active: true }}
```

--------------------------------

### Implement Vue Carousel Component

Source: https://www.embla-carousel.com/docs/guides/required-setup

Uses the useEmblaCarousel composable within a Vue script setup block.

```vue
<script setup>import useEmblaCarousel from 'embla-carousel-vue'
const [emblaRef] = useEmblaCarousel()</script>
<template>  <div class="embla">    <div class="embla__viewport" ref="emblaRef">      <div class="embla__container">        <div class="embla__slide">Slide 1</div>        <div class="embla__slide">Slide 2</div>        <div class="embla__slide">Slide 3</div>      </div>    </div>
    <!-- Optional: Add navigation controls here -->  </div></template>
```

--------------------------------

### goToPrev

Source: https://www.embla-carousel.com/docs/api/methods

Scroll to the previous scroll snap if possible.

```APIDOC
## goToPrev(instant?: boolean)

### Description
Scroll to the previous scroll snap if possible. When loop is disabled and the carousel has reached the first scroll snap, this method won't do anything. Set the instant parameter to true when you want the scroll to happen instantly (no scroll animation).

### Parameters
- **instant** (boolean) - Optional - Set to true for instant scroll.
```
Tokens:
Raw