2025-06-10 15:12:33 +08:00
|
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
import { Carousel } from 'antd';
|
|
|
|
|
|
|
|
const CarouselDemo: React.FC = () => {
|
|
|
|
// 轮播图数据
|
|
|
|
const slides = [
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
image: '/header.png',
|
|
|
|
content: '两会闭幕 从春天出发',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
image: '/header.png',
|
|
|
|
content: '习近平主席重要讲话',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
image: '/header.png',
|
|
|
|
content: '全国人大代表步出人民大会堂',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
return (
|
2025-06-11 09:55:47 +08:00
|
|
|
<div>
|
|
|
|
<Carousel autoplay style={{ height: '100%' }} className="h-full">
|
2025-06-10 15:12:33 +08:00
|
|
|
{slides.map((slide) => (
|
2025-06-11 09:55:47 +08:00
|
|
|
<div key={slide.id}>
|
|
|
|
<img
|
|
|
|
className="bg-cover bg-center"
|
|
|
|
src={slide.image}
|
|
|
|
alt={slide.content}
|
2025-06-10 15:12:33 +08:00
|
|
|
style={{ height: '540px', width: '100%', objectFit: 'fill' }}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</Carousel>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2025-06-11 09:55:47 +08:00
|
|
|
export default CarouselDemo;
|