基於antd實現一個輪播圖

關於antd的使用這裏就很少說了，前面已經寫過了，從零開始學習React-引入Ant Design 組件（八）：https://www.jianshu.com/p/e7e905d89673，如今爲了對組件的熟悉，來根據文檔寫一個常見的輪播圖吧。

1：首先生成一個空組件模板

import React, { Component } from 'react';
class Banner extends Component {
    constructor(props) {
        super(props);
        //react定義數據
        this.state = {
        }
    }
    render() {
        return (
            <div>
                <h2>我是輪播圖界面</h2>                           
            </div>
        )
    }
}
export default  Banner;

2:引入

import { Carousel } from 'antd';

3：文檔
https://ant.design/components/carousel-cn/

4:樣式
在tab.css裏面寫好樣式，而且在組件裏面引入

import '../asset/css/tab.css'

tab.css內容以下

.ant-carousel .slick-slide {
    text-align: center;
    height: 360px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  
  .ant-carousel .slick-slide h3 {
    color: #fff;
  }

  .ant-carousel .slick-slide h3  img{
   width:100%;
   height:100%;
  }

5：參考代碼

import React, { Component } from 'react';
import { Carousel } from 'antd';
import '../asset/css/tab.css'

class Banner extends Component {
    constructor(props) {
        super(props);
        //react定義數據
        this.state = {
        }
    }
    render() {
        return (
            <Carousel autoplay>
                <div>
                    <h3><img src={require('../asset/images/7.jpg')}  alt="logo" />></h3>
                </div>
                <div>
                    <h3><img src={require('../asset/images/8.jpg')}  alt="logo" />></h3>
                </div>
                <div>
                    <h3><img src={require('../asset/images/9.jpg')}  alt="logo" />></h3>
                </div>
                <div>
                    <h3><img src={require('../asset/images/10.jpg')}  alt="logo" />></h3>
                </div>
            </Carousel>
        )
    }
}
export default Banner;

動態的輪播圖效果以下：

 

 

原文做者：祈澈姑娘 
90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚