95 lines
4.0 KiB
TypeScript
95 lines
4.0 KiB
TypeScript
// 引入 Embla Carousel 的自动播放插件
|
||
import Autoplay from "embla-carousel-autoplay";
|
||
// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器）
|
||
import { Card, CardContent } from "@/ui/card";
|
||
// 引入自定义轮播组件及其子组件和类型定义
|
||
import {
|
||
Carousel,
|
||
CarouselContent,
|
||
CarouselItem,
|
||
type CarouselApi, // Embla 轮播实例的类型定义
|
||
} from "@/ui/carousel";
|
||
import * as React from "react";
|
||
|
||
// 定义轮播图中要展示的图片资源路径数组
|
||
// 包含轮播主图（carousel-*.jpg）以及额外的静态资源（如 book1.png、header.png 等）
|
||
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",
|
||
"/images/book1.png", // 可能是书籍封面
|
||
"/images/header.png", // 可能是顶部 Banner 图
|
||
"/images/jcdt.png", // 可能是“基层动态”等模块图标
|
||
];
|
||
|
||
// 导出名为 AutoCarouselDemo 的函数式组件
|
||
export function AutoCarouselDemo() {
|
||
const [api, setApi] = React.useState<CarouselApi>();
|
||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
||
const [current, setCurrent] = React.useState(0);
|
||
React.useEffect(() => {
|
||
if (!api) return;
|
||
setCurrent(api.selectedScrollSnap());
|
||
api.on("select", () => {
|
||
setCurrent(api.selectedScrollSnap());
|
||
});
|
||
}, [api]);
|
||
return (
|
||
// 外层容器：相对定位，水平居中，上下留有足够间距（mt-30 ≈ 120px, mb-20 ≈ 80px）
|
||
<div className="relative w-full mx-auto mt-30 mb-20">
|
||
|
||
{/* 轮播主组件 */}
|
||
<Carousel
|
||
opts={{
|
||
loop: true, // 启用无限循环：最后一张后自动回到第一张
|
||
align: "start", // 对齐方式设为“起始对齐”，确保首项紧贴左侧（适用于非全屏单图场景）
|
||
}}
|
||
plugins={[
|
||
// 配置自动播放插件：
|
||
Autoplay({
|
||
delay: 3000, // 每 3 秒自动切换一次
|
||
stopOnInteraction: false, // 用户点击或拖拽后不停止自动播放（持续轮播）
|
||
}),
|
||
]}
|
||
className="w-full" // 轮播容器占满父级宽度
|
||
>
|
||
{/* 轮播内容区域：添加 gap-4 实现卡片间 1rem（16px）间距 */}
|
||
<CarouselContent className="flex gap-16 h-full ">
|
||
{/* 遍历所有图片 URL，为每张图生成一个轮播项 */}
|
||
{imageUrls.map((src, index) => (
|
||
<CarouselItem
|
||
key={index}
|
||
// 响应式宽度控制：
|
||
// - 默认（小屏）：每个项占 1/4 宽度（basis-1/4）中屏（md）：占 1/3
|
||
// - 中屏（md）：占 1/3
|
||
// - 大屏（lg）：回到 1/4，适合展示 4 列
|
||
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative "
|
||
>
|
||
{/* 卡片外层：添加内边距、悬停缩放动效、鼠标指针样式 */}
|
||
<div className="p-1 transition-transform duration-500 cursor-pointer">
|
||
{/* 图片容器：固定高度 h-120（即 30rem = 480px），隐藏溢出内容 */}
|
||
<div className="overflow-hidden border-none h-120">
|
||
{/* 使用 CardContent 包裹图片，确保与 UI 系统一致 */}
|
||
<CardContent className="relative w-full h-full p-0 "> {/* p-0 移除默认内边距 */}
|
||
{/* 实际图片元素 */}
|
||
<img
|
||
src={src}
|
||
alt={`Slide ${index + 1}`} // 无障碍访问：描述当前幻灯片
|
||
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" // 宽高填满容器，保持比例裁剪
|
||
loading="lazy" // 懒加载：提升页面初始加载性能
|
||
/>
|
||
</CardContent>
|
||
</div>
|
||
</div>
|
||
</CarouselItem>
|
||
))}
|
||
</CarouselContent>
|
||
|
||
|
||
</Carousel>
|
||
</div>
|
||
);
|
||
} |