78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
// src/components/CarouselDemo.tsx
|
|
import * as React from "react";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
|
|
import { Card, CardContent } from "@/ui/card";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} 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 function AutoCarouselDemo() {
|
|
return (
|
|
<div className="relative w-full mx-auto overflow-hidden">
|
|
{/* 左右渐隐遮罩 */}
|
|
<div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
|
|
<div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
|
|
|
|
<Carousel
|
|
opts={{
|
|
loop: true,
|
|
align: "start",
|
|
}}
|
|
plugins={[
|
|
Autoplay({
|
|
delay: 3000,
|
|
stopOnInteraction: false,
|
|
}),
|
|
]}
|
|
className="w-full"
|
|
>
|
|
<CarouselContent className="flex gap-4">
|
|
{imageUrls.map((src, index) => (
|
|
<CarouselItem
|
|
key={index}
|
|
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
|
|
>
|
|
{/* 悬停放大容器 */}
|
|
<div
|
|
className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
|
|
style={{
|
|
transform: 'scale(1)',
|
|
transition: 'all 0.5s ease',
|
|
}}
|
|
>
|
|
<Card className="overflow-hidden border-none shadow-lg">
|
|
<CardContent className="flex aspect-square items-center justify-center p-0 relative">
|
|
<img
|
|
src={src}
|
|
alt={`Slide ${index + 1}`}
|
|
className="w-full h-full object-cover"
|
|
loading="lazy" // 启用懒加载
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
|
|
{/* 左右箭头控制 */}
|
|
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
|
|
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
} |