Carousel

---
import { Carousel, CarouselSlide } from '@bejamas/ui/components/carousel';
---

<!-- Horizontal images with center snapping -->
<Carousel class="gap-4 p-2" align="center">
  <CarouselSlide><img src="https://images.unsplash.com/photo-1759332978018-a6efdacf4d11?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1290" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
  <CarouselSlide><img src="https://plus.unsplash.com/premium_photo-1760541740387-e0af5182d805?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1335" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
  <CarouselSlide><img src="https://images.unsplash.com/photo-1760659391924-86d657118008?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2340" alt="Example" class="w-120 h-96 object-cover rounded-lg" /></CarouselSlide>
</Carousel>

View CodeHide Code

Installation

bun

bunx bejamas add carousel

npm

npx bejamas add carousel

pnpm

pnpm dlx bejamas add carousel

yarn

yarn dlx bejamas add carousel

Usage

---
import { Carousel, CarouselSlide } from '@bejamas/ui/components/carousel';
---

<Carousel>
  <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 1</div></CarouselSlide>
  <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 2</div></CarouselSlide>
  <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 3</div></CarouselSlide>
</Carousel>