xerxes-react-carousel

xerxes-react-carousel

• 基本介绍
  • 安装说明
  • 如何使用
  • props说明
  • events说明
  • methods说明

基本介绍

这是一个基于 reactjs 的轮播图组件，包含基本的轮播和3d的轮播效果。

安装说明

使用 npm 或者 yarn 进行安装

npm i xerxes-react-carousel or yarn add xerxes-react-carousel

如何使用

import React from 'react'
import ReactDOM from 'react-dom'
import Carousel from 'xerxes-react-carousel'
import 'xerxes-react-carousel/lib/index.css'

const list = [
  {
    img: require('./assets/images/pexels-photo-210019.jpeg')
  },
  {
    img: require('./assets/images/pexels-photo-593172.jpeg')
  },
  {
    img: require('./assets/images/pexels-photo-210019.jpeg')
  },
  {
    img: require('./assets/images/pexels-photo-593172.jpeg')
  },
  {
    img: require('./assets/images/pexels-photo-210019.jpeg')
  },
]

const App = () => (
  <Carousel type="card">
    {list.map((item, index) => (
      <Carousel.Item key={index}>
        <div style={{ height: '100%' }}>
          <img style={{ width: '100%', height: '100%' }} src={item.img} alt={index} />
          <h4>{index + 1}</h4>
        </div>
      </Carousel.Item>
    ))}
  </Carousel>
)

ReactDOM.render(<App />, document.getElementById('root'))

props说明

属性	类型	默认值	可选值	描述
initIndex	Number	❌	--	初始化时指向的carouselItem 的下标，默认从0开始
height	Number	300	> 0	设置组件的高度
autoplay	Boolean	false	true or false	是否自动播放
type	String	❌	card	轮播图的类型
interval	Number	3000	> 0	轮播切换的间隔时间，单位ms
arrow	Boolean	true	false or true	是否显示切换按钮
indicator	Boolean	true	false or true	是否显示指示器
indicatorPosition	String	❌	outside or none	指示器的位置
indicatorClassName	String	❌	---	指示器的类名

events说明

事件名称	回调参数	事件说明
onChange	当前激活的索引, 上一个的索引

methods说明

方法名称	方法说明
prev	切换到上一个索引
next	切换到下一个索引