Antd Carousel走马灯 next() prev() 用法

Antd Carousel走马灯 next() prev() 用法

前言

Antd Carousel走马灯 next() prev() 用法

提示：下面案例可供参考

二、代码如下

1.使用

代码如下（示例）：

import * as React from 'react';
import { useRef, useEffect,useState,Component } from 'react'
import './index.scss'
import {Carousel, Input, Tabs, Icon} from 'antd';

class Home extends Component {
    constructor(props) {
        super(props);
        this.next = this.next.bind(this);
        this.prev = this.prev.bind(this);
    }
    next() {
        this.slider.slick.slickNext();
    }
    prev() {
        this.slider.slick.slickPrev();
    }
    render() {
        const lunboSetting = {
            dots: true,
            lazyLoad: true,
            autoplay:true,
        };
        return (
            <div className="home-lunbo">
                <Icon type="left-circle"  style={{ fontSize: '30px'}} onClick={this.prev}/>

                <Carousel {...lunboSetting} ref={el => (this.slider = el)}>
                    <div key={1}><h3>1</h3></div>
                    <div key={2}><h3>2</h3></div>
                    <div key={3}><h3>3</h3></div>
                    <div key={4}><h3>4</h3></div>
                </Carousel>
                <Icon type="right-circle"  style={{ fontSize: '30px'}} onClick={this.next}/>
            </div>
        )
    }
}

export default Home;

2.样式

代码如下（示例）：

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
  
}
.home-lunbo {
  position: relative;
}
.home-lunbo .anticon-left-circle {
  position: absolute;
  top: 50%;
  left: 2%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
}

.home-lunbo .anticon-right-circle {
  font-size: 30px;
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: #fff;
}