Methods

Once you have initialized an Embla Carousel instance, the API provides a variety of methods to control the carousel programmatically, query its state, and manage its lifecycle.

Navigation Methods

These methods allow you to move the carousel to different positions.

scrollNext(jump?: boolean)

Scrolls to the next snap point. If jump is set to true, the carousel will move instantly without animation.

emblaApi.scrollNext()
emblaApi.scrollNext(true) // Instant move

scrollPrev(jump?: boolean)

Scrolls to the previous snap point. If jump is set to true, the carousel will move instantly without animation.

emblaApi.scrollPrev()

scrollTo(index: number, jump?: boolean)

Scrolls to a specific snap point by its index.

emblaApi.scrollTo(2)

State Methods

Retrieve information about the current state of the carousel.

selectedSnap()

Returns the index of the currently selected snap point.

Returns: number

const currentIndex = emblaApi.selectedSnap()

previousSnap()

Returns the index of the previous snap point.

Returns: number

canScrollNext()

Returns whether the carousel can scroll to a next snap point. This is particularly useful for toggling the disabled state of a "Next" button.

Returns: boolean

const isNextDisabled = !emblaApi.canScrollNext()

canScrollPrev()

Returns whether the carousel can scroll to a previous snap point.

Returns: boolean

scrollSnapList()

Returns an array of snap point positions. These represent the scroll percentages (from 0 to 100) where the carousel will stop.

Returns: number[]

slidesInView()

Returns an array of indices for slides that are currently visible within the viewport.

Returns: number[]

const visibleSlides = emblaApi.slidesInView()

Node Methods

Access the underlying HTML elements used by the carousel.

rootNode()

Returns the root element of the carousel.

Returns: HTMLElement

containerNode()

Returns the container element (the element holding the slides).

Returns: HTMLElement

slideNodes()

Returns an array of all slide elements.

Returns: HTMLElement[]

const slides = emblaApi.slideNodes()
slides.forEach((slide) => {
  // Do something with each slide
})

Lifecycle Methods

Manage the initialization and destruction of the carousel instance.

reInit(options?: EmblaOptionsType, plugins?: EmblaPluginType[])

Hard resets the carousel. This is useful if you change the DOM structure (e.g., adding/removing slides) or need to update options dynamically.

// Re-initialize with new options
emblaApi.reInit({ loop: true })

destroy()

Removes all event listeners and stops the carousel's internal logic. Use this when unmounting components to prevent memory leaks.

emblaApi.destroy()

Event Methods

Embla uses a custom event system to allow you to react to changes.

on(event: string, callback: Function)

Subscribes to a carousel event.

const onSelect = (api: EmblaCarouselType) => {
  console.log(`Current snap is: ${api.selectedSnap()}`)
}

emblaApi.on('select', onSelect)

off(event: string, callback: Function)

Unsubscribes from a carousel event.

emblaApi.off('select', onSelect)

Plugin Methods

plugins()

Returns an object containing all initialized plugins. You can use this to call specific methods provided by plugins like autoplay.

Returns: EmblaPluginsType

const { autoplay } = emblaApi.plugins()
if (autoplay) autoplay.stop()