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
Note! This method is deprecated. From v7.0.8 and up this is handled automatically by Embla.
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()