react-Ant Design框架项目中文字轮播与图片轮播的实现

前言

在react-Ant Design框架项目中实现文字轮播和图片轮播，在这里记录一下，实现过程有一点小坑需要注意

文字轮播图实现

在Ant Design里面使用轮播图就需要使用Carousel组件
首先要把用到的组件进行按需引入

import {Card, Carousel} from 'antd'

然后写内容：
使用Carousel标签包裹轮播的内容，标签上autoplay作用是设置自动播放

export class Index extends Component {
  render() {
    return (
      <div className='carousel'>
        <Card title="文字轮播" className='card-wrap'>
          <Carousel autoplay effect='fade'>
            <div>
              <h3>周一特惠</h3>
            </div>
            <div>
              <h3>周二特惠</h3>
            </div>
            <div>
              <h3>周三特惠</h3>
            </div>
            <div>
              <h3>周四特惠</h3>
            </div>
          </Carousel>
        </Card>
      </div>
    )
  }
}

到这里我们的轮播图并不能实现，这里就是小坑，要记住需要给这个容器设置样式宽高：

.carousel {
    .card-wrap{
        width: 800px;
    }
    .slick-slide {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: red;
    }
}

效果：

图片轮播图实现

图片轮播跟上面的使用方法一致，只需要添加图片的地址即可：

<Card title="图片轮播" className='card-wrap'>
  <Carousel autoplay effect='fade'>
    <div>
      <img src='/assets/carousel-img/carousel-1.jpg' />
    </div>
    <div>
      <img src='/assets/carousel-img/carousel-2.jpg' />
    </div>
    <div>
      <img src='/assets/carousel-img/carousel-3.jpg' />
    </div>
  </Carousel>
</Card>

查看效果：

使用轮播图的时候，一定要记得给容器宽高，这样才能正常展示出来~