基於antd實現一個輪播圖

• 2019 年 12 月 11 日
• 筆記

關於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;

動態的輪播圖效果如下：

原文作者：祈澈姑娘 技術部落格：https://www.jianshu.com/u/05f416aefbe1