Carousel

SlideData extends object

The type of data used by each slide in the carousel.

Partial<CarouselProps<SlideData>> & object

partial properties of the CarouselProps interface.

Element

a JSX element that renders the Carousel component with navigation arrows and indicators.

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

SlideData extends object

The type of data used by each slide in the carousel.

SlideData extends object

CarouselContext<SlideData>

The widget context containing the state, api and directives for carousel.

Element

The rendered carousel navigation.

SlideData extends object

CarouselContext<SlideData>

The widget context containing the state, api and directives for carousel.

Element

The rendered carousel structure.

container: Directive

A directive to be applied to container of the carousel.

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.

SlideData extends object

The type of data used by each slide in the carousel.

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

ariaLive: string

The aria-live attribute value for the carousel container.

'polite'

ariaNextLabel: string

Aria label for next button

ariaPrevLabel: string

Aria label for previous button

className: string

CSS classes to be applied on the widget main container

''

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

containerClass: string

Class name to apply to the container of the carousel.

''

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

navigation: SlotContent<CarouselContext<SlideData>>

The navigation layer of the carousel.

undefined

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

slide: SlotContent<CarouselSlideContext<SlideData>>

The content of each slide in the carousel.

undefined

slideClass: string | (slideContext) => string

Class name to apply to each slide in the carousel.

''

slidesData: SlideData[]

The data for each slide in the carousel.

[]

structure: SlotContent<CarouselContext<SlideData>>

The structure of the carousel.

undefined

SlideData extends object

The type of data used by each slide in the carousel.

SlideData extends object

The type of data used by each slide in the carousel.

ariaLive: string

The aria-live attribute value for the carousel container.

'polite'

canScrollNext: boolean

can carousel scroll to next slide

canScrollPrev: boolean

can carousel scroll to previous slide

className: string

CSS classes to be applied on the widget main container

''

containerClass: string

Class name to apply to the container of the carousel.

''

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

navigation: SlotContent<CarouselContext<SlideData>>

The navigation layer of the carousel.

undefined

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.

slide: SlotContent<CarouselSlideContext<SlideData>>

The content of each slide in the carousel.

undefined

slideClass: string | (slideContext) => string

Class name to apply to each slide in the carousel.

''

slidesData: SlideData[]

The data for each slide in the carousel.

[]

structure: SlotContent<CarouselContext<SlideData>>

The structure of the carousel.

undefined

SlideData extends object

The type of the data for each slide.

The type of the data for each slide.

an optional carousel config

a CarouselWidget

CarouselProps<any>

the default Carousel config