Native Carousel

Slide 1

Slide 2

Slide 3

Previous slide Next slide

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

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

Installation

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

npx shadcn@latest add @fulldev/native-carousel

Usage

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

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