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特性
• Demos演示

• Getting Started快速開始

  • Install
  • Use
  • Development
  • Props

Features

• Easy to use 使用簡單: detailed documents and examples 詳細的文檔和例子
• Support custom 支持自定義: Can change style,such as dots and arrows 可以改變樣式位置，例如 分頁符和箭頭

Demos

Demos and codes 演示和代碼

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

more example 更多例子

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?

• The author's other projects 做者的其餘項目

License

MIT