47 lines
860 B
TypeScript
47 lines
860 B
TypeScript
|
'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 (
|
||
|
|
<div >
|
||
|
|
<Carousel
|
||
|
|
autoplay
|
||
|
|
style={{ height: '100%' }}
|
||
|
|
className="h-full"
|
||
|
|
>
|
||
|
|
{slides.map((slide) => (
|
||
|
|
<div key={slide.id} >
|
||
|
|
<img
|
||
|
|
className='bg-cover bg-center'
|
||
|
|
src={slide.image}
|
||
|
|
alt={slide.content}
|
||
|
|
style={{ height: '540px', width: '100%', objectFit: 'fill' }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</Carousel>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CarouselDemo;
|