Methods

Embla Carousel exposes a set of useful methods which makes it very extensible.

Usage

You need an initialized carousel in order to make use of methods. They can be accessed during the lifecycle of a carousel and won't do anything after a carousel instance has been destroyed with the destroy method.

Calling methods

In the following example, the slideNodes method is called and logged to the console as soon as the carousel has been initialized:

import EmblaCarousel from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode)
console.log(emblaApi.slideNodes())

import { useEffect } from 'react'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() {  const [emblaRef, emblaApi] = useEmblaCarousel()
  useEffect(() => {    if (emblaApi) console.log(emblaApi.slideNodes())  }, [emblaApi])
  // ...}

<script setup>  import { watchEffect } from 'vue'  import emblaCarouselVue from 'embla-carousel-vue'
  const [emblaRef, emblaApi] = emblaCarouselVue()
  watchEffect(() => {    if (emblaApi.value) console.log(emblaApi.value.slideNodes())  })
  // ...</script>

import { createEffect } from 'solid-js'import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() {  const [emblaRef, emblaApi] = createEmblaCarousel()
  createEffect(() => {    const api = emblaApi()    if (api) console.log(api.slideNodes())  })
  // ...}

<script>  import emblaCarouselSvelte from 'embla-carousel-svelte'
  let emblaApi
  function onInit(event) {    emblaApi = event.detail    console.log(emblaApi.slideNodes())  }</script>
<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>

TypeScript

The EmblaCarouselType is obtained directly from the core package embla-carousel and used like so:

import EmblaCarousel, { EmblaCarouselType } from 'embla-carousel'
const emblaNode = document.querySelector('.embla')const emblaApi = EmblaCarousel(emblaNode)
function logSlidesInView(emblaApi: EmblaCarouselType): void {  console.log(emblaApi.slidesInView())}
emblaApi.on('slidesInView', logSlidesInView)

import React, { useCallback } from 'react'import { EmblaCarouselType } from 'embla-carousel'import useEmblaCarousel from 'embla-carousel-react'
export function EmblaCarousel() {  const [emblaRef, emblaApi] = useEmblaCarousel()
  const logSlidesInView = useCallback((emblaApi: EmblaCarouselType) => {    console.log(emblaApi.slidesInView())  }, [])
  useEffect(() => {    if (emblaApi) emblaApi.on('slidesInView', logSlidesInView)  }, [emblaApi, logSlidesInView])
  // ...}

If you're using pnpm, you need to install embla-carousel as a devDependency when importing types from it like demonstrated above.

This is because even though embla-carousel-react has embla-carousel as a dependency, pnpm makes nested dependencies inaccessible by design.

<script setup lang="ts">  import { watchEffect } from 'vue'  import { EmblaCarouselType } from 'embla-carousel'  import emblaCarouselVue from 'embla-carousel-vue'
  const [emblaRef] = emblaCarouselVue()
  function logSlidesInView(emblaApi: EmblaCarouselType): void {    console.log(emblaApi.slidesInView())  }
  watchEffect(() => {    if (emblaApi.value) emblaApi.value.on('slidesInView', logSlidesInView)  })
  // ...</script>

If you're using pnpm, you need to install embla-carousel as a devDependency when importing types from it like demonstrated above.

This is because even though embla-carousel-vue has embla-carousel as a dependency, pnpm makes nested dependencies inaccessible by design.

import { createEffect } from 'solid-js'import { EmblaCarouselType } from 'embla-carousel'import createEmblaCarousel from 'embla-carousel-solid'
export function EmblaCarousel() {  const [emblaRef, emblaApi] = createEmblaCarousel()
  function logSlidesInView(emblaApi: EmblaCarouselType): void {    console.log(emblaApi.slidesInView())  }
  createEffect(() => {    const api = emblaApi()    if (api) api.on('slidesInView', logSlidesInView)  })
  // ...}

If you're using pnpm, you need to install embla-carousel as a devDependency when importing types from it like demonstrated above.

This is because even though embla-carousel-solid has embla-carousel as a dependency, pnpm makes nested dependencies inaccessible by design.

<script>  import { EmblaCarouselType } from 'embla-carousel'  import emblaCarouselSvelte from 'embla-carousel-svelte'
  let emblaApi: EmblaCarouselType
  function logSlidesInView(emblaApi: EmblaCarouselType): void {    console.log(emblaApi.slidesInView())  }
  function onInit(event): void {    emblaApi = event.detail    emblaApi.on('slidesInView', logSlidesInView)  }</script>
<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>

If you're using pnpm, you need to install embla-carousel as a devDependency when importing types from it like demonstrated above.

This is because even though embla-carousel-svelte has embla-carousel as a dependency, pnpm makes nested dependencies inaccessible by design.

Reference

Below follows an exhaustive list of all Embla Carousel methods with their respective parameters and return values.

rootNode

Parameters: none
Returns: HTMLElement

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.

containerNode

Parameters: none
Returns: HTMLElement

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

slideNodes

Parameters: none
Returns: HTMLElement[]

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

scrollNext

Parameters: jump?: boolean
Returns: void

Scroll to the next snap point if possible. When loop is disabled and the carousel has reached the last snap point, this method won't do anything. Set the jump parameter to true when you want to go to the next slide instantly.

scrollPrev

Parameters: jump?: boolean
Returns: void

Scroll to the previous snap point if possible. When loop is disabled and the carousel has reached the first snap point, this method won't do anything. Set the jump parameter to true when you want to go to the previous slide instantly.

scrollTo

Parameters: index: number, jump?: boolean
Returns: void

Scroll to a snap point by its unique index. If loop is enabled, Embla Carousel will choose the closest way to the target snap point. Set the jump parameter to true when you want to go to the desired slide instantly.

canScrollNext

Parameters: none
Returns: boolean

Check the possiblity to scroll to a next snap point. If loop is enabled and the container holds any slides, this will always return true.

canScrollPrev

Parameters: none
Returns: boolean

Check the possiblity to scroll to a previous snap point. If loop is enabled and the container holds any slides, this will always return true.

selectedScrollSnap

Parameters: none
Returns: number

Get the index of the selected snap point.

previousScrollSnap

Parameters: none
Returns: number

Get the index of the previously selected snap point.

scrollSnapList

Parameters: none
Returns: number[]

Get an array containing all the snap point positions. Each position represents how far the carousel needs to progress in order to reach this position.

scrollProgress

Parameters: none
Returns: number

Check how far the carousel has scrolled of its scrollable length from 0 - 1. For example, 0.5 equals 50%. For example, this can be useful when creating a scroll progress bar.

slidesInView

Parameters: none
Returns: number[]

Get slide indexes visible in the carousel viewport. Honors the inViewThreshold option.

slidesNotInView

Parameters: none
Returns: number[]

Get slide indexes not visible in the carousel viewport. Honors the inViewThreshold option.

internalEngine

Parameters: none
Returns: EmblaEngineType

Exposes almost all internal functionality used by Embla. Useful when creating plugins or similar.

Note: Please refrain from creating bug reports related to this method. If you're using this and running into problems, it's a 99.8% chance that you don't understand how this works. Use at your own risk.

reInit

Parameters: options?: EmblaOptionsType, plugins?: EmblaPluginType[]
Returns: void

Hard reset the carousel after it has been initialized. This method allows for changing options and plugins after initializing a carousel.

Note: Passed options will be merged with current options, but passed plugins will replace current plugins.

plugins

Parameters: none
Returns: EmblaPluginsType

Returns an object with key value pairs where the keys are the plugin names, and the plugin API:s are the values.

destroy

Parameters: none
Returns: void

Destroy the carousel instance permanently. This is a one way operation and is intended to be used as a cleanup measure when the carousel instance isn't needed anymore.

on

Parameters: event: EmblaEventType, callback: (emblaApi: EmblaCarouselType, eventName: EmblaEventType) => void
Returns: void

Subscribe to an Embla specific event with a callback. Added event listeners will persist even if reInit is called, either until the carousel is destroyed or the event is removed with the off method.

off

Parameters: event: EmblaEventType, callback: (emblaApi: EmblaCarouselType, eventName: EmblaEventType) => void
Returns: void

Unsubscribe from an Embla specific event. Make sure to pass the same callback reference when the callback was added with the on method.

emit

Parameters: event: EmblaEventType
Returns: void

Emits an embla event. This doesn't trigger any internal Embla functionality.