102 lines
2.9 KiB
TypeScript
Executable File
102 lines
2.9 KiB
TypeScript
Executable File
import * as React from "react";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
|
|
import { Card, CardContent } from "@/ui/card";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
type CarouselApi,
|
|
} from "@/ui/carousel";
|
|
|
|
const imageUrls = [
|
|
"/images/carousel-1.jpg",
|
|
"/images/carousel-2.jpg",
|
|
"/images/carousel-3.jpg",
|
|
"/images/carousel-4.jpg",
|
|
"/images/carousel-5.jpg",
|
|
"/images/carousel-6.jpg",
|
|
];
|
|
|
|
export interface CarouselDemoProps {
|
|
paginationPosition?: 'left' | 'right'; // 默认右下角
|
|
paginationStyle?: 'dot' | 'bar'; // 默认圆形
|
|
}
|
|
|
|
export function CarouselDemo({
|
|
paginationPosition = 'right',
|
|
paginationStyle = 'dot',
|
|
}: CarouselDemoProps) {
|
|
const [api, setApi] = React.useState<CarouselApi>();
|
|
const [current, setCurrent] = React.useState(0);
|
|
const [count, setCount] = React.useState(0);
|
|
const totalSlides = imageUrls.length;
|
|
|
|
React.useEffect(() => {
|
|
if (!api) return;
|
|
|
|
setCount(api.scrollSnapList().length);
|
|
setCurrent(api.selectedScrollSnap());
|
|
|
|
api.on("select", () => {
|
|
setCurrent(api.selectedScrollSnap());
|
|
});
|
|
}, [api]);
|
|
|
|
return (
|
|
<div className="relative w-full h-full">
|
|
<Carousel
|
|
opts={{ loop: true }}
|
|
plugins={[
|
|
Autoplay({
|
|
delay: 3000,
|
|
stopOnInteraction: false,
|
|
}),
|
|
]}
|
|
setApi={setApi}
|
|
className="w-full h-full"
|
|
>
|
|
<CarouselContent className="h-full w-full -ml-0">
|
|
{imageUrls.map((src, index) => (
|
|
<CarouselItem key={index} className="w-full h-full pl-0">
|
|
<div className="p-0 w-full h-full">
|
|
<CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
|
|
<img
|
|
src={src}
|
|
alt={`Slide ${index + 1}`}
|
|
className="w-full h-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</CardContent>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-10" />
|
|
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
|
|
</Carousel>
|
|
|
|
{/* 分页指示器 */}
|
|
<div
|
|
className={`absolute bottom-4 ${
|
|
paginationPosition === 'left' ? 'left-4' : 'right-4'
|
|
} flex gap-2 z-10`}
|
|
>
|
|
{Array.from({ length: count }).map((_, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => api?.scrollTo(index)}
|
|
className={`transition-colors ${
|
|
paginationStyle === 'dot'
|
|
? 'h-2 w-2 rounded-full'
|
|
: 'h-2 w-8 rounded'
|
|
} ${index === current ? 'bg-white' : 'bg-white/50'}`}
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |