new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

carousel/rtl

6 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 RTL support

To enable RTL support in the carousel, set the `dir` prop to the text direction and set the `direction` option in the `opts` prop to match. The `direction` option accepts 'ltr' or 'rtl'. Also rotate navigation buttons using the `rtl:rotate-180` class.

Carousel RTL implementation example

Example of implementing RTL carousel: <Carousel dir={dir} opts={{ direction: dir, }} > <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> <CarouselPrevious className="rtl:rotate-180" /> <CarouselNext className="rtl:rotate-180" /> </Carousel> The direction option accepts "ltr" or "rtl" and should match the dir prop value. Navigation buttons are rotated 180 degrees for RTL using rtl:rotate-180 class.

Carousel RTL support configuration

To enable RTL support in shadcn/ui, see the RTL configuration guide at /docs/rtl.

Carousel RTL direction option

When localizing the carousel for RTL languages, set the direction option in the opts prop to match the text direction. The direction option accepts 'ltr' or 'rtl' and should match the dir prop value.

Carousel RTL implementation example

Example showing carousel RTL setup with direction option and button rotation: ```tsx <Carousel dir={dir} opts={{ direction: dir, }} > <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> <CarouselPrevious className="rtl:rotate-180" /> <CarouselNext className="rtl:rotate-180" /> </Carousel> ```

Carousel RTL button rotation

To ensure carousel navigation buttons point in the correct direction for RTL languages, apply the rtl:rotate-180 class to CarouselPrevious and CarouselNext components.

Give your agent this brain