Carousel.

Motion-first scroll container. Built on Embla Carousel, it provides physics-based fluid scrolling, touch support, and complete control over the slide logic for galleries or stepped interfaces.

import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel"

Configuration

Use Case

Infinite Loop

Drag to scroll • Arrows to nav

Snap Alignment: Start

Physics vs. CSS Scroll

Native CSS scroll-snap is great, but rigid. This component uses Embla's physics engine to provide 'friction' and 'settling' effects that feel native on iOS/Android, while allowing programmatic control that CSS alone cannot offer.

A11y & Keyboard Nav

The component wraps children in an ARIA `region` with `roledescription='carousel'`. It automatically hooks into `ArrowLeft` and `ArrowRight` (or Up/Down) events when focused, ensuring power users can navigate without a mouse.

HeroGallery.tsx

<Carousel opts={{ align: "start", loop: true }}>
  <CarouselContent>
    {images.map((img) => (
      <CarouselItem key={img.id} className="md:basis-1/2 lg:basis-1/3">
        <Image src={img.src} alt={img.alt} />
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>