Carousel

1import {
2  Carousel,
3  CarouselContent,
4  CarouselItem,
5  CarouselNext,
6  CarouselPrevious,
7} from "passport-ui";
8import { Card, CardContent } from "passport-ui";

1<div className="w-sm">
2  <Carousel orientation="horizontal">
3    <CarouselContent>
4      {Array.from({ length: 5 }).map((_, index) => (
5        <CarouselItem key={index}>
6          <Card>
7            <CardContent>
8              <div className="meta-container">
9                <h3>Slide {index + 1}</h3>
10                <p>Move using buttons</p>
11              </div>
12            </CardContent>
13          </Card>
14        </CarouselItem>
15      ))}
16    </CarouselContent>
17    <CarouselPrevious />
18    <CarouselNext />
19  </Carousel>
20</div>
21 
22{/* Vertical carousel */}
23<div className="w-sm">
24  <Carousel orientation="vertical">
25    <CarouselContent className="h-24">
26      {Array.from({ length: 3 }).map((_, index) => (
27        <CarouselItem key={index}>
28          <Card>
29            <CardContent>
30              <h3>Slide {index + 1}</h3>
31            </CardContent>
32          </Card>
33        </CarouselItem>
34      ))}
35    </CarouselContent>
36    <CarouselPrevious />
37    <CarouselNext />
38  </Carousel>
39</div>