@uiw/react-carousel

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;