xerxes-react-carousel v0.0.5

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说明

events说明

methods说明