Carousel走马灯

Carousel走马灯

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

何时使用

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

代码演示

最简单的用法。

import { Carousel } from 'antd';
function onChange(a, b, c) {
  console.log(a, b, c);
}
const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  mountNode,
);

自动切换

定时切换下一张。

import { Carousel } from 'antd';
const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
ReactDOM.render(
  <Carousel autoplay>
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  mountNode,
);

位置

位置有 4 个方向。

import { Carousel, Radio } from 'antd';
const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
const PositionCarouselDemo = () => {
  const [dotPosition, setDotPosition] = React.useState('top');
  const handlePositionChange = ({ target: { value } }) => {
    setDotPosition(value);
  };
  return (
    <>
      <Radio.Group onChange={handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
        <Radio.Button value="top">Top</Radio.Button>
        <Radio.Button value="bottom">Bottom</Radio.Button>
        <Radio.Button value="left">Left</Radio.Button>
        <Radio.Button value="right">Right</Radio.Button>
      </Radio.Group>
      <Carousel dotPosition={dotPosition}>
        <div>
          <h3 style={contentStyle}>1</h3>
        </div>
        <div>
          <h3 style={contentStyle}>2</h3>
        </div>
        <div>
          <h3 style={contentStyle}>3</h3>
        </div>
        <div>
          <h3 style={contentStyle}>4</h3>
        </div>
      </Carousel>
    </>
  );
};
ReactDOM.render(<PositionCarouselDemo />, mountNode);

渐显

切换效果为渐显。

import { Carousel } from 'antd';
const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
ReactDOM.render(
  <Carousel effect="fade">
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  mountNode,
);

API

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

方法

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

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