1.先用AntD的圖標來當做輪播圖點擊的兩個按鈕，并將Carousel與按鈕放在一個父級下。

輪播圖切換按鈕

(this.slider = el)}>

1

2

3

4

2.輪播圖的配置lunboSetting寫法

const lunboSetting = {

dots: true,

lazyLoad: true,

autoplay:true

};

3.輪播圖兩個切換函數

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();

}

整個頁面代碼

import React, {Component} from 'react';

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 (

(this.slider = el)}>

1

2

3

4

)

}

}

export default Home;

大工告成了!

總結

以上是生活随笔為你收集整理的antd 轮播图样式_React - AntD 走马灯组件前后切换面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。