Methods

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

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: target?: boolean
Returns: number[]

Get slide indexes visible in the carousel viewport. Honors the inViewThreshold option. Set the target parameter to true when you want to get the slides visible at the scroll destination instead of the current scroll location.

slidesNotInView

Parameters: target?: boolean
Returns: number[]

Get slide indexes not visible in the carousel viewport. Honors the inViewThreshold option. Set the target parameter to true when you want to get the slides not visible at the scroll destination instead of the current scroll location.

clickAllowed

Parameters: none
Returns: boolean

For touch pointers, this method will return false when the gesture is a drag move or if the carousel is clicked during scroll. For mouse pointers, this method will only return false when the gesture is a drag move.

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. It's also useful when adding or removing slides, or picking up any other changes like slide dimensions. Note that 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: Function
Returns: void

Subscribe to an Embla specific event with a callback.

off

Parameters: event: EmblaEventType, callback: Function
Returns: void

Unsubscribe from an Embla specific event.

Calling methods

Start by initializing a carousel and storing the carousel instance in a variable. In the example below we'll call the carousel instance embla:

import EmblaCarousel from 'embla-carousel'

const options = { loop: false }
const embla = EmblaCarousel(emblaNode, options)

Now we're ready to call any available method like demonstrated below:

embla.scrollNext()