Carousel 走马灯

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

何时使用#

  • 当有一组平级的内容。
  • 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
  • 常用于一组图片或卡片轮播。

API#

参数 说明 类型 默认值
effect 动画效果函数,可取 scrollx, fade String scrollx
dots 是否显示面板指示点 Boolean true
vertical 垂直显示 Boolean false
autoplay 是否自动切换 Boolean false
easing 动画效果 String linear
beforeChange 切换面板的回调 function(from, to)
afterChange 切换面板的回调 function(current)

更多参数可参考:https://github.com/akiran/react-slick

代码演示

import { Carousel } from 'antd';

function onChange(a, b, c) {
  console.log(a, b, c);
}

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-basic'));

最简单的用法。

import { Carousel } from 'antd';

ReactDOM.render(
  <Carousel effect="fade">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-fade'));

切换效果为渐显。

import { Carousel } from 'antd';

ReactDOM.render(
  <Carousel vertical="true">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-vertical'));

垂直显示。

import { Carousel } from 'antd';

ReactDOM.render(
  <Carousel autoplay="true">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-autoplay'));

定时切换下一张。