Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/951565664/react-slider-light
a light react-slider
https://github.com/951565664/react-slider-light
carousel react react-component reactjs slick slider
Last synced: 11 days ago
JSON representation
a light react-slider
- Host: GitHub
- URL: https://github.com/951565664/react-slider-light
- Owner: 951565664
- Created: 2018-02-05T07:15:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-08T23:55:39.000Z (almost 6 years ago)
- Last Synced: 2024-12-22T22:05:03.060Z (13 days ago)
- Topics: carousel, react, react-component, reactjs, slick, slider
- Language: JavaScript
- Homepage: https://951565664.github.io/react-slider-light/
- Size: 471 KB
- Stars: 31
- Watchers: 2
- Forks: 9
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-slider-light
a lightweight Slider component built with [react](https://github.com/facebook/react).
一个轻量级的 [react](https://github.com/facebook/react) 轮播组件
---
## Table of Contents
* [Demos演示](#demos)
* [Features特性](#features)
* [Getting Started快速开始](#getting-started)
* [Install](#install)
* [Use](#use)
* [Development](#development)
* [Props](#props)
## Demos
[Demos and codes 演示和代码](https://951565664.github.io/react-slider-light/)
## Features
* **Easy to use 使用简单**: detailed documents and examples 详细的文档和例子
* **Support custom 支持自定义**: Can change style,such as dots and arrows 能够改变样式位置，例如 分页符和箭头
* **Support vertical 支持竖直**
* **Support gallery 支持缩略图**:Dots are gallery
## Getting Started
#### Install
Important: be sure that you have installed [react](https://github.com/facebook/react).
重要提醒：请确保先安装了 [react](https://github.com/facebook/react).
```bash
# Install
$ npm install react-slider-light
```
#### Use
```js
import React, { Component } from 'react';
import Slider from 'react-slider-light';
import 'react-slider-light/lib/index.css';
export default class Wrapper extends Component {
render(){
return
page1
page2
}
}
```
#### Development
Want to run demos locally 本地启动演示
```bash
git clone https://github.com/951565664/react-slider-light.git
cd react-slick
npm install
npm start
open http://localhost:8080
```
[more example 更多例子](https://951565664.github.io/react-slider-light/)
#### 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
`vertical` | `bool` | `false` | 是否垂直滚动 | 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](https://codesandbox.io/s/zzloxr09mp) 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`
- 增加滚动到最后一张时，取消动画，即立刻回到第一张
#### 4.0.0(已删)
`2018-6-21`
- 修改处理props值的方式，提高性能，修改sliderIndex的bug,。
#### 4.0.1
`2018-6-22`
- 增加beforeSliderCallback 和 afterSliderCallback两个props。
#### 4.1.0
`2018-6-25`
- props里的dots增加gallery选项。
#### 4.1.1
`2018-6-25`
- 实现4.1.0的gallery不能垂直显示的问题。
#### 4.2.0
`2018-6-25`
- 修改4.1版本中受控功能中第一张（sliderIndex为0）的 [bug](https://github.com/951565664/react-slider-light/issues/4)。
- 修改4.x版本后出现垂直滚动失效bug。
## 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. 想多了老铁
#### 其他的需求
https://github.com/951565664/react-slider-light/issues/3
## Next
#### Add some basic function.增加一些基本功能
* Scroll vertically 垂直滚动(v2.0.3已实现)
* gallery 缩略图(v4.1.0已实现)
#### Contributing
编译react-slider-light
```bash
npm run buildPublish
```
编译demo
```bash
npm run build
```
启动demo
```bash
npm run start
```
#### Want more?
* [The author's other projects 作者的其他项目](https://github.com/951565664)
## License
[MIT](https://tldrlegal.com/license/mit-license)