前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于antd实现一个轮播图

基于antd实现一个轮播图

作者头像
王小婷
发布2019-12-11 10:28:16
2.5K0
发布2019-12-11 10:28:16
举报
文章被收录于专栏:编程微刊

关于antd的使用这里就不多说了,前面已经写过了,从零开始学习React-引入Ant Design 组件(八):https://cloud.tencent.com/developer/article/1541870,现在为了对组件的熟悉,来根据文档写一个常见的轮播图吧。

1:首先生成一个空组件模板

代码语言:javascript
复制
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:引入

代码语言:javascript
复制
import { Carousel } from 'antd';

3:文档

https://ant.design/components/carousel-cn/

4:样式

在tab.css里面写好样式,并且在组件里面引入

代码语言:javascript
复制
import '../asset/css/tab.css'

tab.css内容如下

代码语言:javascript
复制
.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:参考代码

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档