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

SlideData extends object

readonly align: InputSignal<undefined | "start" | "end" | "center">

Align the slides relative to the carousel viewport

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

'center'

readonly ariaIndicatorLabel: InputSignal<undefined | (index) => string>

Aria label for navigation indicators

readonly ariaLive: InputSignal<undefined | string>

The aria-live attribute value for the carousel container.

'polite'

readonly ariaNextLabel: InputSignal<undefined | string>

Aria label for next button

readonly ariaPrevLabel: InputSignal<undefined | string>

Aria label for previous button

readonly className: InputSignal<undefined | string>

CSS classes to be applied on the widget main container

''

readonly container: InputSignal<undefined | 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

readonly containerClass: InputSignal<undefined | string>

Class name to apply to the container of the carousel.

''

readonly containScroll: InputSignal<undefined | false | "trimSnaps" | "keepSnaps">

Clear leading and trailing empty space that causes excessive scrolling

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

'trimSnaps'

readonly direction: InputSignal<undefined | "ltr" | "rtl">

Choose content direction between ltr and rtl

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

'ltr'

readonly dragFree: InputSignalWithTransform<undefined | boolean, unknown>

Enables momentum scrolling

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

false

readonly dragThreshold: InputSignalWithTransform<undefined | number, unknown>

Drag threshold in pixels

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

10

readonly duration: InputSignalWithTransform<undefined | number, unknown>

Set scroll duration when triggered by any of the API methods

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

25

readonly loop: InputSignalWithTransform<undefined | boolean, unknown>

Enables infinite looping

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

false

readonly navigation: InputSignal<SlotContent<CarouselContext<SlideData>>>

The navigation layer of the carousel.

undefined

readonly plugins: InputSignal<undefined | CreatePluginType<LoosePluginType, { }>[]>

Plugins to extend the carousel with additional features

[]

readonly showNavigationArrows: InputSignalWithTransform<undefined | boolean, unknown>

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

readonly showNavigationIndicators: InputSignalWithTransform<undefined | boolean, unknown>

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

readonly skipSnaps: InputSignalWithTransform<undefined | boolean, unknown>

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

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

false

readonly slide: InputSignal<SlotContent<CarouselSlideContext<SlideData>>>

The content of each slide in the carousel.

undefined

readonly slideClass: InputSignal<undefined | string | (slideContext) => string>

Class name to apply to each slide in the carousel.

''

readonly slidesData: InputSignal<undefined | SlideData[]>

The data for each slide in the carousel.

[]

readonly structure: InputSignal<SlotContent<CarouselContext<SlideData>>>

The structure of the carousel.

undefined

get api(): W["api"]

Retrieves the widget api

W["api"]

the widget api

get directives(): W["directives"]

Retrieves the widget directives

W["directives"]

the widget directives

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

AngularState<W>

the widget state

SlideData extends object

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

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

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

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

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