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

1.首先安装antd

  1. yarn add antd

2.index.js导入antd

  1. import 'antd/dist/antd.css'

3.在要使用的页面导入想要的ui组件

  1. import {Carousel} from 'antd'

4.使用

  1. <Carousel autoplay>
  2. <div>
  3. <h3>1</h3>
  4. </div>
  5. <div>
  6. <h3>2</h3>
  7. </div>
  8. <div>
  9. <h3>3</h3>
  10. </div>
  11. <div>
  12. <h3>4</h3>
  13. </div>
  14. </Carousel>,

样式

  1. .ant-carousel .slick-slide {
  2. text-align: center;
  3. height: 160px;
  4. line-height: 160px;
  5. background: #364d79;
  6. overflow: hidden;
  7. }
  8. .ant-carousel .slick-slide h3 {
  9. color: #fff;
  10. }