1.首先,需要引入Ant Design组件库中的Carousel组件以及icon组件。代码示例:
import { Carousel } from 'antd'; import { LeftOutlined, RightOutlined } from '@ant-design/icons';
2.然后,需要定义一个数组来存储轮播图的图片路径,以及定义一个变量来表示当前轮播图的索引值。代码示例:
const imgUrls = [ 'https://example.com/img1.jpg', 'https://example.com/img2.jpg', 'https://example.com/img3.jpg' ]; let currentImgIndex = 0;
3.接着,在Carousel组件中,使用map()函数遍历imgUrls数组,渲染每个轮播图。同时,使用LeftOutlined和RightOutlined组件来渲染左右箭头,并添加onClick事件来控制currentImgIndex的值。代码示例:
4.最后,利用currentImgIndex的值来控制轮播图的滚动。代码示例: