antd走马灯组件自定义前进后退按钮

最新推荐文章于 2025-09-26 03:29:17 发布

原创最新推荐文章于 2025-09-26 03:29:17 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #走马灯 #carousel

网络学习日志同时被 2 个专栏收录

111 篇文章

订阅专栏

React

7 篇文章

订阅专栏

本文介绍如何在antd的Carousel组件中自定义前进和后退按钮，利用官方提供的next和prev方法实现功能。

antd走马灯组件自定义前进后退按钮【ts + react】

antd的Carousel没有提供前进后退按钮需要自己根据文档实现此功能

官方提供了next 和prev两个方法

next()	切换到下一面板
prev()	切换到上一面板

代码如下：

import React from "react";
import "./Detail.less";
import { Carousel,Image } from 'antd';
import {LeftOutlined,RightOutlined} from "@ant-design/icons"
//引入底部组件
class Detail extends React.Component<any, any>{
    private img: any;
    constructor(props:any){
        super(props);
        this.state={};
        this.img = undefined
    }
    prev(){
        this.img.prev();
    }
    next(){
        this.img.next();
    }
    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        let {location} = this.props;
        return (
                        <div className={'ContentBox'}>
                            <div className={'CarouselBox'}>
                                <div className={"CarouselIcon"} onClick={this.prev.bind(this)}><LeftOutlined /></div>
                                <Carousel autoplay className={'Carousel'} ref={dom => { this.img = dom; }}>
                                    <div><img src={require('../../assets/images/Home/banner1.png')} alt=""/></div>
                                    <div><img src={require('../../assets/images/Home/banner2.png')} alt=""/></div>
                                    <div><img src={require('../../assets/images/Home/banner3.png')} alt=""/></div>
                                    <div><img src={require('../../assets/images/Home/banner4.png')} alt=""/></div>
                                </Carousel>
                                <div className={"CarouselIcon"}  onClick={this.next.bind(this)}><RightOutlined /></div>
                            </div>
                        </div>
                    
        );
    }

}
export default Detail