Carousel
A carousel with motion and swipe built using Embla.
8-bit carousel component
1
2
3
4
5
To set the spacing between the items, we use a pl-[VALUE]utility on the CarouselItem and a negative-ml-[VALUE] on the CarouselContent.
Spacing controlled carousel
1
2
3
4
5
Example
Responsive
Use the orientation prop to set the orientation of the carousel.
Orientation controlled carousel
1
2
3
4
5
Orientation example
You can pass options to the carousel using the opts prop. See the Embla Carousel docs for more information.
Installation
pnpm dlx shadcn@canary add https://8bitcn.com/r/8bit-carousel.json