Installation

npm

npm install tmaito-carousel --save

yarn

yarn add tmaito-carousel

• Also install tmaito-carousel for css

import "tmaito-carousel/libs/index.css";

Example

import React, { Component } from 'react';
import Carousel from 'tmaito-carousel'
import 'tmaito-carousel/libs/index.css';

const { item } = Carousel;

class CarouselDemo extends Component {
  render() {
    return (
      <div className="examples">
        <Carousel height={200} type="card" autoplay={false}>
          {[1, 2, 3, 4].map(item => (
            <Item key={item}>{item}</Item>
          ))}
        </Carousel>
      </div>
    );
  }
}
export default CarouselDemo;

Carousel Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------------------------- | ------- | --------------------------------------- | ------ | | height | 走马灯的高度 | number | — | 200 | | initialIndex | 初始状态激活的幻灯片的索引，从 0 开始 | number | — | 0 | | trigger | 指示器的触发方式 | string | click/hover | hover | | autoplay | 是否自动切换 | boolean | — | true | | interval | 自动切换的时间间隔，单位为毫秒 | number | — | 35000 | | dotPosition | 面板指示点的位置 | string | outside top bottom left right | — | | dots | 是否显示面板指示点 | boolean | false | true | | arrow | 切换箭头的显示时机 | string | always/hover/never | hover | | type | 走马灯的类型 | string | card | — | | activeCardScale | 主卡片宽度比例，走马灯的类型为card时生效 | number | 0 - 1 | 0.6 |

Carousel Events

| 事件名称 | 说明 | 回调参数 | | -------- | ---------------- | -------------------------------------- | | onChange | 幻灯片切换时触发，目前激活的幻灯片的索引，上一面板 or 下一面板 | (activeIndex, isNext) |

Carousel Methods

| 方法名 | 说明 | 参数 | | ------------- | -------------- | --------------------------------- | | setActiveItem | 切换到指定面板 | 需要切换的幻灯片的索引，从 0 开始 | | prev | 切换至上一面板 | — | | next | 切换至下一面板 | — |