README.md

Carousel 走马灯

滚动播放。在 v4.15.0+ 添加。

基础用法

最简单的用法。

import React from 'react';
import { Carousel } from 'uiw';

function Demo() {
  return (
    <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>
  );
}

ReactDOM.render(<Demo />, _mount_);

控制播放频率

palyTime设置每帧停留时间，scrollTime设置切换帧的速度

import React from 'react';
import { Carousel } from 'uiw';

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>
  );
}

ReactDOM.render(<Demo />, _mount_);

切换到指定帧

手动切换到指定帧的位置

import React from 'react';
import { Carousel } from 'uiw';

function Demo() {

  const ref=React.useRef()
  const [autoPlay,autoPlaySet]=React.useState(true)

  return (
      <React.Fragment>
        <Carousel ref={ref} position={2} autoPlay={autoPlay}>
          <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>
    );
  }

ReactDOM.render(<Demo />, _mount_);

Props

API

参数	说明	类型	默认值
width	宽度	number	400
height	高度	number	200
position	设置初始帧位置	number	0
palyTime	每帧停留时间(ms)	number	2000
scrollTime	滚动动画的速度(ms)	number	200
autoPlay	是否自动播放	boolean	true

ref

  // 跳转到指定帧
  gotoSlide: (slideNumber: number) => void;
  // 上一针
  prevSlide: () => void;
  // 下一帧
  nextSlide: () => void;
  // 暂停播放
  stopPlay: () => void;