Carousel

emblaApi: () => undefined | EmblaCarouselType

Retrieve the inner EmblaApi object

undefined | EmblaCarouselType

plugins: () => undefined | EmblaPluginsType

Retrieve the enabled plugins

undefined | EmblaPluginsType

scrollNext: (jump?) => void

Scroll to the next snap point if possible.

boolean

scroll instantly

void

scrollPrev: (jump?) => void

Scroll to the previous snap point if possible.

boolean

scroll instantly

void

scrollTo: (index, jump?) => void

Scroll to a snap point by index

number

the snap point index

boolean

scroll instantly

void

root: Directive

the root directive

scrollNext: Directive

A directive to be applied to a navigation button allowing to scroll to the next slide.

scrollPrev: Directive

A directive to be applied to a navigation button allowing to scroll to the previous slide.

slide: Directive<{ id: string; index: number; }>

A directive to be applied to each slide in the carousel.

tabIndicator: Directive<{ id: string; index: number; jump: boolean; }>

A directive to be applied to a navigation indicator allowing to scroll to the corresponding slide. As this directive adds the role tab to the element, it is recommended to use it on a button or a link and the parent element should have the tabList directive attached.

tabList: Directive

A directive to be applied to a tab list allowing to navigate to the corresponding slide. This directive adds the role tablist and is recommended to be used together with tabIndicator.

align: "start" | "end" | "center"

Align the slides relative to the carousel viewport

https://www.embla-carousel.com/api/options/#align

'center'

ariaIndicatorLabel: (index) => string

Aria label for navigation indicators

number

string

ariaNextLabel: string

Aria label for next button

ariaPrevLabel: string

Aria label for previous button

container: null | string

Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.

https://www.embla-carousel.com/api/options/#container

containScroll: false | "trimSnaps" | "keepSnaps"

Clear leading and trailing empty space that causes excessive scrolling

https://www.embla-carousel.com/api/options/#containScroll

'trimSnaps'

direction: "ltr" | "rtl"

Choose content direction between ltr and rtl

https://www.embla-carousel.com/api/options/#direction

'ltr'

dragFree: boolean

Enables momentum scrolling

https://www.embla-carousel.com/api/options/#dragFree

false

dragThreshold: number

Drag threshold in pixels

https://www.embla-carousel.com/api/options/#dragThreshold

10

duration: number

Set scroll duration when triggered by any of the API methods

https://www.embla-carousel.com/api/options/#duration

25

loop: boolean

Enables infinite looping

https://www.embla-carousel.com/api/options/#loop

false

plugins: CreatePluginType<LoosePluginType, {}>[]

Plugins to extend the carousel with additional features

[]

showNavigationArrows: boolean

If true, 'previous' and 'next' navigation arrows will be visible.

showNavigationIndicators: boolean

If true, navigation indicators at the bottom of the slide will be visible.

skipSnaps: boolean

Allow the carousel to skip scroll snaps if it's dragged vigorously

https://www.embla-carousel.com/api/options/#skipsnaps

false

canScrollNext: boolean

can carousel scroll to next slide

canScrollPrev: boolean

can carousel scroll to previous slide

direction: "ltr" | "rtl"

Choose content direction between ltr and rtl

https://www.embla-carousel.com/api/options/#direction

'ltr'

initialized: boolean

is the carousel initialized

scrolling: boolean

is the carousel currently scrolling

selectedScrollSnap: number

selected scroll snap

showNavigationArrows: boolean

If true, 'previous' and 'next' navigation arrows will be visible.

showNavigationIndicators: boolean

If true, navigation indicators at the bottom of the slide will be visible.

PropsConfig<CarouselProps>

an optional carousel config

CarouselWidget

a CarouselWidget

CarouselProps

the default Carousel config