Carousel走马灯
旋转木马,一组轮播的区域。
何时使用#
当有一组平级的内容。
当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
常用于一组图片或卡片轮播。
代码演示
TypeScript
JavaScript
import { Carousel } from 'infrad';
import React from 'react';
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
const App: React.FC = () => {
const onChange = (currentSlide: number) => {
console.log(currentSlide);
};
return (
<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>
);
};
export default App;
TypeScript
JavaScript
import { Carousel } from 'infrad';
import React from 'react';
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
const App: React.FC = () => (
<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>
);
export default App;
TypeScript
JavaScript
import type { RadioChangeEvent } from 'infrad';
import { Carousel, Radio } from 'infrad';
import type { DotPosition } from 'infrad/lib/carousel';
import React, { useState } from 'react';
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
const App: React.FC = () => {
const [dotPosition, setDotPosition] = useState<DotPosition>('top');
const handlePositionChange = ({ target: { value } }: RadioChangeEvent) => {
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>
</>
);
};
export default App;
TypeScript
JavaScript
import { Carousel } from 'infrad';
import React from 'react';
const contentStyle: React.CSSProperties = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
const App: React.FC = () => (
<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>
);
export default App;
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
FAQ#
如何自定义箭头?#
可参考 #12479。