carousel/props

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Carousel opts prop for options

Pass options to the carousel using the `opts` prop. Common options include `align` (set to 'start', 'center', or 'end') and `loop` (boolean to enable infinite looping). See Embla Carousel docs for complete options list.

Carousel setApi prop for API access

Use the `setApi` prop to get an instance of the carousel API. Set a state with type `CarouselApi` and pass it as a callback to access methods like `scrollSnapList()`, `selectedScrollSnap()`, and event listeners.

Carousel plugins support

Pass plugins to the carousel using the `plugins` prop as an array. For example, use the Autoplay plugin from embla-carousel-autoplay with options like `delay: 2000` for automatic scrolling.

Carousel plugins prop

Use the plugins prop to add plugins to the carousel. Pass an array of plugin instances.

Carousel direction option accepts ltr or rtl

The direction option in the opts prop accepts "ltr" (left-to-right) or "rtl" (right-to-left) values. This should match the dir prop value.

Carousel orientation prop

Use the orientation prop to set the carousel direction. Accepts values: vertical or horizontal.

Carousel scrollSnapList() API method

The carousel API provides scrollSnapList() method which returns a list of scroll snap positions.

Carousel selectedScrollSnap() API method

The carousel API provides selectedScrollSnap() method which returns the index of the currently selected item. Add 1 to get the position starting from 1.

Carousel orientation prop

Use the orientation prop on the Carousel component to set the orientation. Accepted values are 'vertical' or 'horizontal'.

Carousel opts prop for options

Pass options to the carousel using the opts prop. Options are passed as an object to the Carousel component. Available options are documented in the Embla Carousel docs.

Carousel setApi prop for API instance

Use the setApi prop on the Carousel component to get an instance of the carousel API. Pass a state setter function to receive the CarouselApi instance.

Carousel events via API instance

Listen to carousel events using the api instance obtained from setApi. Use api.on() to register event listeners, such as 'select' events.

Carousel plugins prop

Use the plugins prop on the Carousel component to add Embla Carousel plugins. Pass an array of plugin instances to enable functionality like autoplay.

Give your agent this brain