carousel/usage

21 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 events listening

Listen to carousel events using the api instance obtained from `setApi`. The 'select' event fires when the carousel selection changes. Use `api.on('select', () => { /* handler */ })`.

Carousel basic usage example

Basic carousel structure: <Carousel> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> <CarouselPrevious /> <CarouselNext /> </Carousel>

Carousel spacing example

Example of carousel spacing: <Carousel> <CarouselContent className="-ml-4"> <CarouselItem className="pl-4">...</CarouselItem> <CarouselItem className="pl-4">...</CarouselItem> <CarouselItem className="pl-4">...</CarouselItem> </CarouselContent> </Carousel>

Carousel orientation usage example

Example of using carousel orientation: <Carousel orientation="vertical | horizontal"> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel>

Carousel options example with align and loop

Example of carousel options: <Carousel opts={{ align: "start", loop: true, }} > <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel>

Carousel API usage example

Example of using the carousel API: import { type CarouselApi } from "@/components/ui/carousel" export function Example() { const [api, setApi] = React.useState<CarouselApi>() const [current, setCurrent] = React.useState(0) const [count, setCount] = React.useState(0) React.useEffect(() => { if (!api) { return } setCount(api.scrollSnapList().length) setCurrent(api.selectedScrollSnap() + 1) api.on("select", () => { setCurrent(api.selectedScrollSnap() + 1) }) }, [api]) return ( <Carousel setApi={setApi}> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ) }

Carousel select event listener

Listen to carousel events using the api.on() method. The "select" event fires when the carousel selection changes.

Carousel basic import statement

Import the carousel components using: import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"

Carousel responsive spacing example

Example showing responsive carousel spacing, 2 units on small screens and 4 units on medium and larger screens: ```tsx <Carousel> <CarouselContent className="-ml-2 md:-ml-4"> <CarouselItem className="pl-2 md:pl-4">...</CarouselItem> <CarouselItem className="pl-2 md:pl-4">...</CarouselItem> <CarouselItem className="pl-2 md:pl-4">...</CarouselItem> </CarouselContent> </Carousel> ```

Carousel orientation example

Example showing carousel orientation prop: ```tsx <Carousel orientation="vertical | horizontal"> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ```

Carousel options example

Example showing carousel options via opts prop: ```tsx <Carousel opts={{ align: "start", loop: true, }} > <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ```

Carousel API usage example

Example showing how to use the setApi prop to access carousel API methods: ```tsx import { type CarouselApi } from "@/components/ui/carousel" export function Example() { const [api, setApi] = React.useState<CarouselApi>() const [current, setCurrent] = React.useState(0) const [count, setCount] = React.useState(0) React.useEffect(() => { if (!api) { return } setCount(api.scrollSnapList().length) setCurrent(api.selectedScrollSnap() + 1) api.on("select", () => { setCurrent(api.selectedScrollSnap() + 1) }) }, [api]) return ( <Carousel setApi={setApi}> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ) } ```

Carousel select event example

Example showing how to listen to carousel select events: ```tsx import { type CarouselApi } from "@/components/ui/carousel" export function Example() { const [api, setApi] = React.useState<CarouselApi>() React.useEffect(() => { if (!api) { return } api.on("select", () => { // Do something on select. }) }, [api]) return ( <Carousel setApi={setApi}> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ) } ```

Carousel autoplay plugin example

Example showing how to use the Autoplay plugin with carousel: ```ts import Autoplay from "embla-carousel-autoplay" export function Example() { return ( <Carousel plugins={[ Autoplay({ delay: 2000, }), ]} > // ... </Carousel> ) } ```

Carousel component imports

The carousel component exports the following elements that can be imported: Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious. Import them from '@/components/ui/carousel'

Carousel basic usage example

Basic carousel structure with items and navigation buttons: ```tsx <Carousel> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> <CarouselPrevious /> <CarouselNext /> </Carousel> ```

Carousel item sizing with basis utility

Set the size of carousel items using the basis utility class on CarouselItem. For example, use className="basis-1/3" to make items 33% of the carousel width.

Carousel item sizing example 33 percent

Example showing carousel items sized to 33% of carousel width: ```tsx <Carousel> <CarouselContent> <CarouselItem className="basis-1/3">...</CarouselItem> <CarouselItem className="basis-1/3">...</CarouselItem> <CarouselItem className="basis-1/3">...</CarouselItem> </CarouselContent> </Carousel> ```

Carousel item sizing responsive example

Example showing responsive carousel sizing, 50% on small screens and 33% on larger screens: ```tsx <Carousel> <CarouselContent> <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem> <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem> <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem> </CarouselContent> </Carousel> ```

Carousel spacing between items

Set spacing between carousel items using pl-[VALUE] utility on CarouselItem and negative -ml-[VALUE] on CarouselContent.

Carousel spacing example with 4 units

Example showing carousel item spacing with 4 units: ```tsx <Carousel> <CarouselContent className="-ml-4"> <CarouselItem className="pl-4">...</CarouselItem> <CarouselItem className="pl-4">...</CarouselItem> <CarouselItem className="pl-4">...</CarouselItem> </CarouselContent> </Carousel> ```

Give your agent this brain