antd 轮播图样式_基于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 (

我是轮播图界面

)

}

}

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;

bac