4.22.3 • Published 5 months ago
@uiw/react-carousel v4.22.3
Carousel 走马灯
滚动播放。在 v4.15.0+ 添加。
import { Carousel } from 'uiw';
// or
import Carousel from '@uiw/react-carousel';
基础用法
最简单的用法。
import React from 'react';
import { Carousel } from 'uiw';
export default function Demo() {
return (
<div style={{ display:'flex' }}>
<Carousel>
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
<span style={{marginLeft:10}}/>
<Carousel direction="vertical" >
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
</div>
);
}
控制播放频率
palyTime设置每帧停留时间,scrollTime设置切换帧的速度
import React from 'react';
import { Carousel } from 'uiw';
export default function Demo() {
return (
<Carousel palyTime={1000} scrollTime={500}>
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
);
}
切换到指定帧
手动切换到指定帧的位置
import React from 'react';
import { Carousel } from 'uiw';
export default function Demo() {
const ref=React.useRef()
const [autoPlay,autoPlaySet]=React.useState(true)
return (
<React.Fragment>
<Carousel
ref={ref}
position={2}
autoPlay={autoPlay}
afterChange={(current)=>console.log('after',current)}
beforeChange={(current)=>console.log('before',current)}
>
<div style={{ height: '100%', background: '#1EABCD' }}>
<span>1</span>
</div>
<div style={{ height: '100%', background: '#393b46' }}>
<span>2</span>
</div>
<div style={{ height: '100%', background: '#008EF0' }}>
<span>3</span>
</div>
<div style={{ height: '100%', background: '#393E48' }}>
<span>4</span>
</div>
</Carousel>
<button onClick={() => ref.current.gotoSlide(1)}>跳转</button>
<button onClick={() => ref.current.prevSlide()}>上一张</button>
<button onClick={() => ref.current.nextSlide()}>下一张</button>
<button onClick={() =>autoPlaySet(autoPlay?false:true)}>{autoPlay?'暂停':'开始'}</button>
</React.Fragment>
);
}
Props
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 宽度 | number | 400 |
height | 高度 | number | 200 |
position | 设置初始帧位置 | number | 0 |
palyTime | 每帧停留时间(ms) | number | 2000 |
scrollTime | 滚动动画的速度(ms) | number | 200 |
autoPlay | 是否自动播放 | boolean | true |
afterChange | 切换面板前的回调 | (current) => void | - |
beforeChange | 切换面板后的回调 | (current) => void | - |
direction | 滚动方位horizontal 横向,vertical 竖向 | horizontal | vertical | horizontal |
ref
// 跳转到指定帧
gotoSlide: (slideNumber: number) => void;
// 上一针
prevSlide: () => void;
// 下一帧
nextSlide: () => void;
// 暂停播放
stopPlay: () => void;
4.22.0
8 months ago
4.22.1
6 months ago
4.22.2
6 months ago
4.22.3
5 months ago
4.21.26
1 year ago
4.21.25
1 year ago
4.21.28
1 year ago
4.21.27
1 year ago
5.0.0-bate.2.1
1 year ago
5.0.0-bate.2.0
1 year ago
4.21.24
1 year ago
5.0.0-bate-19
1 year ago
4.21.22
1 year ago
4.21.21
1 year ago
4.21.23
1 year ago
5.0.0-bate-9
1 year ago
5.0.0-bate-18
1 year ago
5.0.0-bate-14
1 year ago
5.0.0-bate-17
1 year ago
5.0.0-bate-10
1 year ago
5.0.0-bate-11
1 year ago
5.0.0-bate-12
1 year ago
5.0.0-bate-7
1 year ago
5.0.0-bate-8
1 year ago
5.0.0-bate-6
1 year ago
4.21.20
1 year ago
4.21.19
2 years ago
4.21.18
2 years ago
4.21.15
2 years ago
4.21.17
2 years ago
4.21.16
2 years ago
5.0.0-bate-5
2 years ago
5.0.0-bate-3
2 years ago
5.0.0-bate-4
2 years ago
5.0.0-bate-1
2 years ago
5.0.0-bate-2
2 years ago
5.0.0-bate-0
2 years ago
4.21.13
2 years ago
4.21.14
2 years ago
4.21.11
2 years ago
4.21.12
2 years ago
4.21.10
2 years ago
4.21.9
2 years ago
4.21.5
2 years ago
4.21.6
2 years ago
4.21.7
2 years ago
4.21.8
2 years ago
4.21.1
2 years ago
4.21.2
2 years ago
4.21.3
2 years ago
4.21.4
2 years ago
4.20.0
2 years ago
4.21.0
2 years ago
4.19.0
2 years ago
4.18.1
2 years ago
4.16.0
2 years ago
4.15.1
2 years ago
4.17.0
2 years ago
4.16.1
2 years ago
4.18.0
2 years ago
4.16.2
2 years ago
4.15.0
2 years ago
4.14.2
2 years ago