Compare commits

...

2 Commits

Author SHA1 Message Date
qiuchenfan 7c0f74ab4f Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news 2025-11-20 09:58:22 +08:00
qiuchenfan 4d1105d1db 泛化轮播图 2025-11-20 09:57:11 +08:00
2 changed files with 35 additions and 8 deletions

View File

@ -3,6 +3,33 @@ import {FireNewsList} from "./FireNewsList";
import { CarouselPreset } from "@/components/untils/CarouselPreset";
export function ImportantNews() {
// 定义所有轮播图片路径
const carouselImages = [
"/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/carousel-7.jpg",
"/images/carousel-8.jpg",
"/images/carousel-9.jpg",
];
// 转换为 slides 格式
const slides = carouselImages.map((imageUrl, index) => ({
key: `carousel-${index + 1}`,
content: (
<div
className="w-full h-full"
style={{
backgroundImage: `url(${imageUrl})`,
backgroundSize: '100% 100%',
}}
/>
),
}));
return(
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
{/* 轮播背景图 - 确保有明确尺寸 */}

View File

@ -17,14 +17,14 @@ type Slide = {
}
type CarouselPresetProps = {
slides: Slide[]
autoplayDelay?: number
showControls?: boolean
showIndicators?: boolean
indicatorVariant?: "dot" | "pill"
className?: string
contentClassName?: string
itemClassName?: string
slides: Slide[] //传入的轮播项
autoplayDelay?: number //自动轮播的间隔默认为3000
showControls?: boolean //是否显示左右切换按钮
showIndicators?: boolean //是否显示底部的分页指示器
indicatorVariant?: "dot" | "pill" //分页指示器的样式,默认为"dot"dot圆点pill小胶囊
className?: string // 作用在最外层容器,用来定制整体尺寸/布局
contentClassName?: string //作用在内部的 CarouselContent 容器,可自定义内层排列方式(例如圆角、阴影等)
itemClassName?: string //作用在每个 CarouselItem 上,调整单个 slide 的额外样式(比如内边距、宽高)
}
export function CarouselPreset({