Carousel

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7  CarouselDots,
 8} from "@/components/wensity/carousel";
 9
10export function CarouselCards() {
11  return (
12    <Carousel loop>
13      <CarouselContent>
14        <CarouselItem>
15          <div className="rounded-2xl border p-5">Revenue: $48.2k</div>
16        </CarouselItem>
17        <CarouselItem>
18          <div className="rounded-2xl border p-5">Active users: 3,204</div>
19        </CarouselItem>
20      </CarouselContent>
21      <div className="mt-3 flex items-center justify-between">
22        <CarouselPrevious />
23        <CarouselDots />
24        <CarouselNext />
25      </div>
26    </Carousel>
27  );
28}

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7} from "@/components/wensity/carousel";
 8
 9export function CarouselGallery() {
10  return (
11    <Carousel loop>
12      <CarouselContent>
13        <CarouselItem>
14          <img src="/photo-1.jpg" alt="" className="h-80 w-full rounded-2xl object-cover" />
15        </CarouselItem>
16        <CarouselItem>
17          <img src="/photo-2.jpg" alt="" className="h-80 w-full rounded-2xl object-cover" />
18        </CarouselItem>
19      </CarouselContent>
20      <CarouselPrevious className="absolute left-3 top-1/2 -translate-y-1/2" />
21      <CarouselNext className="absolute right-3 top-1/2 -translate-y-1/2" />
22    </Carousel>
23  );
24}

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7} from "@/components/wensity/carousel";
 8
 9export function CarouselVertical() {
10  return (
11    <Carousel loop orientation="vertical">
12      <CarouselContent className="h-56">
13        <CarouselItem>
14          <div className="h-full rounded-2xl border p-5">Refine onboarding flow</div>
15        </CarouselItem>
16        <CarouselItem>
17          <div className="h-full rounded-2xl border p-5">Review empty states</div>
18        </CarouselItem>
19      </CarouselContent>
20      <div className="absolute inset-y-3 right-3 flex flex-col justify-between">
21        <CarouselPrevious />
22        <CarouselNext />
23      </div>
24    </Carousel>
25  );
26}

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselThumbnails,
 6} from "@/components/wensity/carousel";
 7
 8export function CarouselThumbnailsDemo() {
 9  return (
10    <Carousel loop>
11      <CarouselContent>
12        <CarouselItem>
13          <img src="/photo-1.jpg" alt="" className="h-56 w-full rounded-2xl object-cover" />
14        </CarouselItem>
15        <CarouselItem>
16          <img src="/photo-2.jpg" alt="" className="h-56 w-full rounded-2xl object-cover" />
17        </CarouselItem>
18      </CarouselContent>
19      <CarouselThumbnails className="mt-3">
20        <img src="/photo-1.jpg" alt="" className="h-14 w-20 object-cover" />
21        <img src="/photo-2.jpg" alt="" className="h-14 w-20 object-cover" />
22      </CarouselThumbnails>
23    </Carousel>
24  );
25}

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselDots,
 6} from "@/components/wensity/carousel";
 7
 8export function CarouselAutoplay() {
 9  return (
10    <Carousel loop autoplay autoplayInterval={2800}>
11      <CarouselContent>
12        <CarouselItem>
13          <div className="rounded-2xl border p-5">Design review</div>
14        </CarouselItem>
15        <CarouselItem>
16          <div className="rounded-2xl border p-5">Team sync</div>
17        </CarouselItem>
18      </CarouselContent>
19      <div className="mt-3 flex items-center justify-center">
20        <CarouselDots />
21      </div>
22    </Carousel>
23  );
24}

 1import {
 2  Carousel,
 3  CarouselContent,
 4  CarouselItem,
 5  CarouselPrevious,
 6  CarouselNext,
 7  CarouselDots,
 8} from "@/components/wensity/carousel";
 9
10export function CarouselInfinite() {
11  return (
12    <Carousel loop>
13      <CarouselContent>
14        <CarouselItem>
15          <div className="rounded-2xl border p-5">One</div>
16        </CarouselItem>
17        <CarouselItem>
18          <div className="rounded-2xl border p-5">Two</div>
19        </CarouselItem>
20        <CarouselItem>
21          <div className="rounded-2xl border p-5">Three</div>
22        </CarouselItem>
23      </CarouselContent>
24      <div className="mt-3 flex items-center justify-between">
25        <CarouselPrevious />
26        <CarouselDots />
27        <CarouselNext />
28      </div>
29    </Carousel>
30  );
31}