首先说一下,假如人人喜好可直接珍藏我这个项目的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.
主要提示:请确保先安装了 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 缩略图