Carousel

1import { Card, CardContent } from "@/components/ui/card"
2import {
3  Carousel,
4  CarouselContent,
5  CarouselItem,
6  CarouselNext,
7  CarouselPrevious,
8} from "@/components/ui/carousel"
9
10export function ImageCarousel() {
11  const images = [
12    "/placeholder.svg?height=200&width=300",
13    "/placeholder.svg?height=200&width=300",
14    "/placeholder.svg?height=200&width=300",
15    "/placeholder.svg?height=200&width=300",
16    "/placeholder.svg?height=200&width=300",
17  ]
18  return (
19    <Carousel className="w-full max-w-xs">
20      <CarouselContent>
21        {images.map((image, index) => (
22          <CarouselItem key={index}>
23            <div className="p-1">
24              <Card>
25                <CardContent className="flex aspect-square items-center justify-center p-6">
26                  <img src={image || "/placeholder.svg"} alt={`Image ${index + 1}`} className="w-full h-full object-cover rounded-md" />
27                </CardContent>
28              </Card>
29            </div>
30          </CarouselItem>
31        ))}
32      </CarouselContent>
33      <CarouselPrevious />
34      <CarouselNext />
35    </Carousel>
36  )
37}

1import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
2import {
3  Carousel,
4  CarouselContent,
5  CarouselItem,
6  CarouselNext,
7  CarouselPrevious,
8} from "@/components/ui/carousel"
9
10export function ContentCarousel() {
11  const items = [
12    { title: "Card 1", content: "This is the first card's content." },
13    { title: "Card 2", content: "This is the second card's content." },
14    { title: "Card 3", content: "This is the third card's content." },
15    { title: "Card 4", content: "This is the fourth card's content." },
16  ]
17  return (
18    <Carousel className="w-full max-w-sm">
19      <CarouselContent>
20        {items.map((item, index) => (
21          <CarouselItem key={index}>
22            <div className="p-1">
23              <Card>
24                <CardHeader>
25                  <CardTitle>{item.title}</CardTitle>
26                </CardHeader>
27                <CardContent className="flex aspect-square items-center justify-center p-6">
28                  <span className="text-lg font-semibold">{item.content}</span>
29                </CardContent>
30              </Card>
31            </div>
32          </CarouselItem>
33        ))}
34      </CarouselContent>
35      <CarouselPrevious />
36      <CarouselNext />
37    </Carousel>
38  )
39}