Carousel走马灯

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

何时使用

  • 当有一组平级的内容。

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

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

代码演示

Carousel走马灯 - 图1

基本

最简单的用法。

  1. import { Carousel } from 'antd';
  2. function onChange(a, b, c) {
  3. console.log(a, b, c);
  4. }
  5. const contentStyle = {
  6. height: '160px',
  7. color: '#fff',
  8. lineHeight: '160px',
  9. textAlign: 'center',
  10. background: '#364d79',
  11. };
  12. ReactDOM.render(
  13. <Carousel afterChange={onChange}>
  14. <div>
  15. <h3 style={contentStyle}>1</h3>
  16. </div>
  17. <div>
  18. <h3 style={contentStyle}>2</h3>
  19. </div>
  20. <div>
  21. <h3 style={contentStyle}>3</h3>
  22. </div>
  23. <div>
  24. <h3 style={contentStyle}>4</h3>
  25. </div>
  26. </Carousel>,
  27. mountNode,
  28. );

Carousel走马灯 - 图2

自动切换

定时切换下一张。

  1. import { Carousel } from 'antd';
  2. const contentStyle = {
  3. height: '160px',
  4. color: '#fff',
  5. lineHeight: '160px',
  6. textAlign: 'center',
  7. background: '#364d79',
  8. };
  9. ReactDOM.render(
  10. <Carousel autoplay>
  11. <div>
  12. <h3 style={contentStyle}>1</h3>
  13. </div>
  14. <div>
  15. <h3 style={contentStyle}>2</h3>
  16. </div>
  17. <div>
  18. <h3 style={contentStyle}>3</h3>
  19. </div>
  20. <div>
  21. <h3 style={contentStyle}>4</h3>
  22. </div>
  23. </Carousel>,
  24. mountNode,
  25. );

Carousel走马灯 - 图3

位置

位置有 4 个方向。

  1. import { Carousel, Radio } from 'antd';
  2. const contentStyle = {
  3. height: '160px',
  4. color: '#fff',
  5. lineHeight: '160px',
  6. textAlign: 'center',
  7. background: '#364d79',
  8. };
  9. const PositionCarouselDemo = () => {
  10. const [dotPosition, setDotPosition] = React.useState('top');
  11. const handlePositionChange = ({ target: { value } }) => {
  12. setDotPosition(value);
  13. };
  14. return (
  15. <>
  16. <Radio.Group onChange={handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
  17. <Radio.Button value="top">Top</Radio.Button>
  18. <Radio.Button value="bottom">Bottom</Radio.Button>
  19. <Radio.Button value="left">Left</Radio.Button>
  20. <Radio.Button value="right">Right</Radio.Button>
  21. </Radio.Group>
  22. <Carousel dotPosition={dotPosition}>
  23. <div>
  24. <h3 style={contentStyle}>1</h3>
  25. </div>
  26. <div>
  27. <h3 style={contentStyle}>2</h3>
  28. </div>
  29. <div>
  30. <h3 style={contentStyle}>3</h3>
  31. </div>
  32. <div>
  33. <h3 style={contentStyle}>4</h3>
  34. </div>
  35. </Carousel>
  36. </>
  37. );
  38. };
  39. ReactDOM.render(<PositionCarouselDemo />, mountNode);

Carousel走马灯 - 图4

渐显

切换效果为渐显。

  1. import { Carousel } from 'antd';
  2. const contentStyle = {
  3. height: '160px',
  4. color: '#fff',
  5. lineHeight: '160px',
  6. textAlign: 'center',
  7. background: '#364d79',
  8. };
  9. ReactDOM.render(
  10. <Carousel effect="fade">
  11. <div>
  12. <h3 style={contentStyle}>1</h3>
  13. </div>
  14. <div>
  15. <h3 style={contentStyle}>2</h3>
  16. </div>
  17. <div>
  18. <h3 style={contentStyle}>3</h3>
  19. </div>
  20. <div>
  21. <h3 style={contentStyle}>4</h3>
  22. </div>
  23. </Carousel>,
  24. mountNode,
  25. );

API

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

方法

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

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