Native Carousel

Slide 1

Slide 2

Slide 3

Previous slide Next slide

---
import {
  NativeCarousel,
  NativeCarouselContent,
  NativeCarouselItem,
  NativeCarouselPrevious,
  NativeCarouselNext,
} from "@/components/ui/native-carousel"
---

<NativeCarousel class="w-full max-w-2xl">
  <NativeCarouselContent>
    <NativeCarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-md bg-muted">
        <span>Slide 1</span>
      </div>
    </NativeCarouselItem>
    <NativeCarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-md bg-muted">
        <span>Slide 2</span>
      </div>
    </NativeCarouselItem>
    <NativeCarouselItem>
      <div class="flex aspect-video items-center justify-center rounded-md bg-muted">
        <span>Slide 3</span>
      </div>
    </NativeCarouselItem>
  </NativeCarouselContent>
  <NativeCarouselPrevious />
  <NativeCarouselNext />
</NativeCarousel>

Installation

To install the native carousel component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/native-carousel

Usage

import {
  NativeCarousel,
  NativeCarouselContent,
  NativeCarouselItem,
  NativeCarouselPrevious,
  NativeCarouselNext,
} from "@/components/ui/native-carousel"

<NativeCarousel>
  <NativeCarouselContent>
    <NativeCarouselItem>
      <div>Slide 1</div>
    </NativeCarouselItem>
    <NativeCarouselItem>
      <div>Slide 2</div>
    </NativeCarouselItem>
  </NativeCarouselContent>
  <NativeCarouselPrevious />
  <NativeCarouselNext />
</NativeCarousel>

Features

• Uses native HTML scroll behavior
• Lightweight and performant
• Supports both horizontal and vertical orientations
• Smooth navigation with previous/next buttons