[JavaScript知识库]React antd实现走马灯Carousel

import React from 'react'
import { Card, Carousel } from 'antd'
import './ui.less'

export default function MyCarousel() {

  const textStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };

  const picStyle = {
    textAlign: 'center',
    height: '300px',
    width: '100%',
    background: '#364d79',
    overflow: 'hidden',

  };

  return (
    <div style={{ width: "100%" }}>
      <Card title="文字背景轮播" style={{ marginBottom: "10px" }}>
        <Carousel autoplay effect="fade">
          <div>
            <h3 style={textStyle}>React</h3>
          </div>
          <div>
            <h3 style={textStyle}>Vue</h3>
          </div>
          <div>
            <h3 style={textStyle}>Angular</h3>
          </div>
        </Carousel>
      </Card>
      <Card title="图片轮播">
        <Carousel autoplay effect="fade">
          <div>
            <img style={picStyle} src="/carousel-img/carousel-1.jpg" alt="" />
          </div>
          <div>
            <img style={picStyle} src="/carousel-img/carousel-2.jpg" alt="" />
          </div>
          <div>
            <img style={picStyle} src="/carousel-img/carousel-3.jpg" alt="" />
          </div>
        </Carousel>
      </Card>
    </div>
  )
}