脚本宝典收集整理的这篇文章主要介绍了react轮播图组件react-slider-light,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
首先说一下,如果大家喜欢可直接收藏我这个项目的gIThub地址。https://github.com/951565664/... 因为有可能github上版本更新了,但是这边就不更新了。如果有什么问题,可以随时问,建议不要QQ或者私信,直接上github提issues,能把问题记录下来,方便其他人查找。
react-slider-light
a lightweight Slider component built with react.
一个轻量级的 react 轮播组件
Table of Contents
Features
-
Easy to use 使用简单: detailed Documents and examples 详细的文档和例子
-
Support custom 支持自定义: Can change style,such as dots and arrows 能够改变样式位置,例如 分页符和箭头
Demos
Getting Started
Install
Important: be sure that you have installed react.
# Install
$ npm install react-slider-light
Use
import React, { Component } from 'react';
import Slider from 'react-slider-light';
export default class Wrapper extends Component {
render(){
return <Slider>
<div>page1</div>
<div>page2</div>
</Slider >
}
}
Development
Want to run demos locally 本地启动演示
git clone https://github.COM/951565664/react-slider-light.git
cd react-slick
npm install
npm start
open http://localhost:8080
Props
Props
Type
Default Value
Description
Required
defaultsliderIndex
number
0
默认初始滑动开始位置
No
sliderIndex
number
0
控制滑动的页面
No
delay
number
1800
延迟的时间 (ms)
No
speed
number
500
延迟的时间 (ms)
No
sliderToShow
number
1
每次展示页面
No
sliderToScroll
number
1
每次滚动的页面数量
No
autoPaly
bool
true
是否自动开始轮播
No
isDots
bool
false
是否需要dots
No
dots
enum
or func
circle
dots 的种类,值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom}
No
dotStyle
object
{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}
dots 的样式
dotX
string
or number
center
dot的水平位置 ,可以是right
left
center
这样的字符串 ,也可以是 30 -20, 表示距离左边的像素,负数表示距右边的像素
No
dotY
string
or number
middle
dot的垂直位置 ,可以是top
bottom
middle
这样的字符串 ,也可以是 30 -20, 表示距离底部的像素,负数表示距顶部的像素
No
isArrows
bool
false
是否需要箭头
No
arrowRender
func
null
箭头的渲染函数 (type)=>{//type:'backward ' .'forward'}
No
arrowsY
string
or number
middle
arrows的垂直位置 ,可以是top
bottom
middle
这样的字符串 ,也可以是 30 -20, 表示距离底部的像素,负数表示距顶部的像素
No
Filing issues
Please replicate your issue with CodeSandbox template and post it along with issue to make it easy for me to debug.
Change LOG
1.0.1
2018-2-15
2.0.3
2018-2-25
- 测试垂直
3.0.1
2018-2-25
- 修改bug
3.1.0
2018-6-19
- 增加滚动到最后一张时,取消动画,即立刻回到第一张
FAQ
Will be updated regularly? 是否会经常更新
Of course, at least 4 hours a week will be taken out for maintenance and development
当然会,至少每周会抽出4个小时来维护和开发
Does it support IE8?是否支持 IE 8
No. 想多了老铁
Next
Add some basic function.增加一些基本功能
- Scroll vertically 垂直滚动
- gallery 缩略图
Want more?
License
以上是脚本宝典为你收集整理的react轮播图组件react-slider-light全部内容,希望文章能够帮你解决react轮播图组件react-slider-light所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。