Carousel走马灯

旋转木马,一组轮播的区域。

何时使用

  • 当有一组平级的内容。

  • 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。

  • 常用于一组图片或卡片轮播。

代码演示

Carousel走马灯 - 图1

基本

最简单的用法。

  1. import { Carousel } from 'antd';
  2. function onChange(a, b, c) {
  3. console.log(a, b, c);
  4. }
  5. ReactDOM.render(
  6. <Carousel afterChange={onChange}>
  7. <div>
  8. <h3>1</h3>
  9. </div>
  10. <div>
  11. <h3>2</h3>
  12. </div>
  13. <div>
  14. <h3>3</h3>
  15. </div>
  16. <div>
  17. <h3>4</h3>
  18. </div>
  19. </Carousel>,
  20. mountNode,
  21. );
  1. /* For demo */
  2. .ant-carousel .slick-slide {
  3. text-align: center;
  4. height: 160px;
  5. line-height: 160px;
  6. background: #364d79;
  7. overflow: hidden;
  8. }
  9. .ant-carousel .slick-slide h3 {
  10. color: #fff;
  11. }

Carousel走马灯 - 图2

自动切换

定时切换下一张。

  1. import { Carousel } from 'antd';
  2. ReactDOM.render(
  3. <Carousel autoplay>
  4. <div>
  5. <h3>1</h3>
  6. </div>
  7. <div>
  8. <h3>2</h3>
  9. </div>
  10. <div>
  11. <h3>3</h3>
  12. </div>
  13. <div>
  14. <h3>4</h3>
  15. </div>
  16. </Carousel>,
  17. mountNode,
  18. );
  1. /* For demo */
  2. .ant-carousel .slick-slide {
  3. text-align: center;
  4. height: 160px;
  5. line-height: 160px;
  6. background: #364d79;
  7. overflow: hidden;
  8. }
  9. .ant-carousel .slick-slide h3 {
  10. color: #fff;
  11. }

Carousel走马灯 - 图3

位置

位置有 4 个方向。

  1. import { Carousel, Radio } from 'antd';
  2. class PositionCarouselDemo extends React.Component {
  3. state = {
  4. dotPosition: 'top',
  5. };
  6. handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition });
  7. render() {
  8. const { dotPosition } = this.state;
  9. return (
  10. <div>
  11. <Radio.Group
  12. onChange={this.handlePositionChange}
  13. value={dotPosition}
  14. style={{ marginBottom: 8 }}
  15. >
  16. <Radio.Button value="top">Top</Radio.Button>
  17. <Radio.Button value="bottom">Bottom</Radio.Button>
  18. <Radio.Button value="left">Left</Radio.Button>
  19. <Radio.Button value="right">Right</Radio.Button>
  20. </Radio.Group>
  21. <Carousel dotPosition={dotPosition}>
  22. <div>
  23. <h3>1</h3>
  24. </div>
  25. <div>
  26. <h3>2</h3>
  27. </div>
  28. <div>
  29. <h3>3</h3>
  30. </div>
  31. <div>
  32. <h3>4</h3>
  33. </div>
  34. </Carousel>
  35. </div>
  36. );
  37. }
  38. }
  39. ReactDOM.render(<PositionCarouselDemo />, mountNode);
  1. /* For demo */
  2. .ant-carousel .slick-slide {
  3. text-align: center;
  4. height: 160px;
  5. line-height: 160px;
  6. background: #364d79;
  7. overflow: hidden;
  8. }
  9. .ant-carousel .slick-slide h3 {
  10. color: #fff;
  11. }

Carousel走马灯 - 图4

渐显

切换效果为渐显。

  1. import { Carousel } from 'antd';
  2. ReactDOM.render(
  3. <Carousel effect="fade">
  4. <div>
  5. <h3>1</h3>
  6. </div>
  7. <div>
  8. <h3>2</h3>
  9. </div>
  10. <div>
  11. <h3>3</h3>
  12. </div>
  13. <div>
  14. <h3>4</h3>
  15. </div>
  16. </Carousel>,
  17. mountNode,
  18. );
  1. /* For demo */
  2. .ant-carousel .slick-slide {
  3. text-align: center;
  4. height: 160px;
  5. line-height: 160px;
  6. background: #364d79;
  7. overflow: hidden;
  8. }
  9. .ant-carousel .slick-slide h3 {
  10. color: #fff;
  11. }

API

参数说明类型默认值版本
afterChange切换面板的回调function(current)
autoplay是否自动切换booleanfalse
beforeChange切换面板的回调function(from, to)
dotPosition面板指示点位置,可选 top bottom left rightstringbottom
dots是否显示面板指示点,如果为 object 则同时可以指定 dotsClass 或者boolean | { className?:string }true
easing动画效果stringlinear
effect动画效果函数,可取 scrollx, fadestringscrollx

方法

名称描述
goTo(slideNumber, dontAnimate)切换到指定面板, dontAnimate = true 时,不使用动画
next()切换到下一面板
prev()切换到上一面板

更多 API 可参考:https://react-slick.neostack.com/docs/api