3D Carousel

Docs

3D Carousel

A 3D image carousel

Open in v0

keyword_0 https://picsum.photos/200/300?night

keyword_1 https://picsum.photos/200/300?city

keyword_2 https://picsum.photos/200/300?sky

keyword_3 https://picsum.photos/200/300?sunset

keyword_4 https://picsum.photos/200/300?sunrise

keyword_5 https://picsum.photos/200/300?winter

keyword_6 https://picsum.photos/200/300?skyscraper

keyword_7 https://picsum.photos/200/300?building

keyword_8 https://picsum.photos/200/300?cityscape

keyword_9 https://picsum.photos/200/300?architecture

keyword_10 https://picsum.photos/200/300?street

keyword_11 https://picsum.photos/200/300?lights

keyword_12 https://picsum.photos/200/300?downtown

keyword_13 https://picsum.photos/200/300?bridge

import ThreeDPhotoCarousel from "../ui/three-d-carousel"
 
export function ThreeDPhotoCarouselDemo() {
  return (
    <div className="w-full max-w-4xl">
      <div className="min-h-[500px]  flex flex-col justify-center border border-dashed rounded-lg space-y-4">
        <div className="p-2">
          <ThreeDPhotoCarousel />
        </div>
      </div>
    </div>
  )
}

Installation

npx shadcn@latest add https://cult-ui.com/r/three-d-carousel.json

Usage

import { ThreeDPhotoCarousel } from "@/components/ui/three-d-carousel"

export default function ThreeDPhotoCarouselDemo() {
  return (
    <div className="w-full max-w-4xl">
      <div className="min-h-[500px]  flex flex-col justify-center border border-dashed rounded-lg space-y-4">
        <div className="p-2">
          <ThreeDPhotoCarousel />
        </div>
      </div>
    </div>
  )
}

Logo Carousel Hover Video Player