Ant Design Carousel走马灯组件修改

Ant Design Carousel走马灯组件修改

上图

借鉴了他人的方法，自己又添加了点内容。大家可点击下方链接去看原博客。

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

index.tsx

import React from "react";
import styles from './index.module.less';
import { Button, Carousel, Col, Row } from 'antd';
import { LeftOutlined , RightOutlined  } from "@ant-design/icons"
//引入底部组件
class Home 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 {

    return (
      <div className={styles.ContentBox}>
        <Row>
          <Col className={styles.center} span={2}><Button className={styles.CarouselIcon} onClick={this.prev.bind(this)} shape="circle" icon={<LeftOutlined  />}/></Col>
          <Col span={20}>
          <Carousel autoplay className={styles.Carousel} ref={dom => { this.img = dom; }}>
            <div><img src='../../../../public/img/logo.png' alt="" /></div>
            <div><img src='../../../../public/img/logo.png' alt="" /></div>
            <div><img src='../../../../public/img/logo.png' alt="" /></div>
            <div><img src='../../../../public/img/logo.png' alt="" /></div>
          </Carousel>
          </Col>
          <Col className={styles.center} span={2}><Button onClick={this.next.bind(this)} shape="circle" icon={<RightOutlined  />}/></Col>
        </Row>
          
      </div>

    );
  }

}
export default Home;

index.module.less

.ContentBox{
    background: #364d79;
}

.Carousel{
    text-align: center;
    justify-content: center;
    margin: auto;
  }
.center{
    text-align: center;
    justify-content: center;
    margin: auto;
}

完。