react-caroucel-slides-3d v0.4.0

调用方式

import Carousel from 'react-caroucel-slides-3d'; <Carousel elements={data} current={2} display={5} space={300} autoPlay={true} autoPalyTimeout={3000} autoPlayHoverPause={true} showFooter={true} leftButton={'左'} rightButton={'右'} height={200} width={400} />

参数说明

elements

• 描述：轮播图所展示的数据
• 格式：Array，每一个元素便是一个轮播图所展示的内容，可以是html元素
• 必填：是
• 例：[<div>这是第一张图</div>, 2]

current

• 描述：默认选中项
• 格式：number
• 必填：否
• 默认： 默认初始选中中间项

display

• 描述：展示个数
• 格式：number
• 必填：是
• 默认： 无

space

• 描述：轮播图之间的间距
• 格式：number
• 必填：是
• 默认： 无

autoPlay

• 描述：是否自动循环播放
• 格式：boolean
• 必填：否
• 默认： false

autoPalyTimeout

• 描述：自动播放时间间隔
• 格式：number
• 必填：否
• 默认： 3000

autoPlayHoverPause

• 描述：自动播放时，鼠标悬浮到轮播图上时，是否暂停自动播放
• 格式：boolean
• 必填：否
• 默认： false

showFooter

• 描述：是否展示底部按钮区域
• 格式：boolean
• 必填：否
• 默认： false

leftButton

• 描述：底部按钮区域左侧内容
• 格式：boolean
• 必填：当showFooter为true时必填
• 默认： 无

rightButton

• 描述：底部按钮区域右侧内容
• 格式：boolean
• 必填：当showFooter为true时必填
• 默认： 无

rightButton

• 描述：底部按钮区域右侧内容
• 格式：boolean
• 必填：当showFooter为true时必填
• 默认： 无

height

• 描述：高度
• 格式：number
• 必填：否
• 默认： 300

width

• 描述：宽度
• 格式：number
• 必填：否
• 默认： 400

border

• 描述：是否展示边框
• 格式：boolean
• 必填：否
• 默认：false

##常见问题

1. Support for the experimental syntax ‘jsx‘ isn‘t currently enabled 这个原因是因为babel没有包含node_modules目录，导致里面的包无发解析造成的。

建议使用 react-app-rewired运行服务, config-overrides.js配置如下： const path = require('path') const { override, babelInclude} = require('customize-cra')

module.exports = override( babelInclude([ path.resolve("src"), // 确保要包含自己的项目 path.resolve("node_modules/react-global-hook") //引入报错的项目 ]) )