a lightweight Slider component built with react.
一個輕量級的react 輪播元件
#Features特性
Demos示範
Getting Started快速開始
## Install<span style="font-size: 14px;"></span>
Use<span style="font-size: 14px;"></span>
#Development<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>
#Features
##Features
##Support custom 支援自訂: Can change style,such as dots and arrows 能夠改變樣式位置，例如分頁符號和箭頭
Demos and codes 示範和代碼<span style="font-size: 14px;"></span>
Getting Started<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"># Install<br>$ npm install react-slider-light<br></span>
<span style="font-size: 14px;">import React, { Component } from 'react';<br>import Slider from 'react-slider-light';<br><br>export default class Wrapper extends Component {<br> render(){<br> return <Slider><br> <p>page1</p><br> <p>page2</p><br> </Slider ><br> }<br>}<br></span>
<span style="font-size: 14px;">git clone https://github.com/951565664/react-slider-light.git<br>cd react-slick<br>npm install<br>npm start<br>open http://localhost:8080<br></span>
| Props | Type | <span style="font-size: 14px;"></span> | <span style="font-size: 14px;"></span> | <span style="font-size: 14px;"></span> |
|---|---|---|---|---|
<span style="font-size: 14px;">Description</span> |
#Required<span style="font-size: 14px;"></span>
|
<span style="font-size: 14px;"></span>defaultSliderIndex
|
<span style="font-size: 14px;"></span> | #number<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span>預設初始滑動開始位置 |
No<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;">sliderIndex</span> |
<span style="font-size: 14px;"></span>number | <span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span>控制滑動的頁面 |
No<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;">delay</span> |
<span style="font-size: 14px;"></span>number | <span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span>延遲的時間(ms) |
No<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;">speed</span> |
<span style="font-size: 14px;"></span>number | <span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span>延遲的時間(ms) |
No<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;">#sliderToShow</span> |
<span style="font-size: 14px;"></span> | <span style="font-size: 14px;"></span>sliderToShow |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">1</span> |
#每次展示頁面<span style="font-size: 14px;"></span> | No<span style="font-size: 14px;"></span> | <span style="font-size: 14px;"></span>sliderToScroll |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">1</span> |
每次捲動的頁面數量<span style="font-size: 14px;"></span> | No<span style="font-size: 14px;"></span> | <span style="font-size: 14px;"></span>#autoPaly |
<span style="font-size: 14px;">#bool</span> |
<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span> | <span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span>是否自動開始輪播 |
<span style="font-size: 14px;">No</span><span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>No |
<span style="font-size: 14px;"></span> | isDots<span style="font-size: 14px;"></span> | <span style="font-size: 14px;">#bool</span> |
false <span style="font-size: 14px;"></span> |
是否需要dots<span style="font-size: 14px;"></span>#No |
<span style="font-size: 14px;"></span> | dots<span style="font-size: 14px;"></span> |
enum########## 或 #########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 的樣式############ |
<span style="font-size: 14px;">dotX</span> |
<span style="font-size: 14px;">#string</span> or <span style="font-size: 14px;">number</span>
|
<span style="font-size: 14px;">center</span> |
dot的水平位置，可以是<span style="font-size: 14px;">right</span> <span style="font-size: 14px;">left</span> <span style="font-size: 14px;">center</span>這樣的字串,也可以是30 -20, 表示距離左邊的像素，負數表示距右邊的像素
|
#No |
<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span> ##dotY<span style="font-size: 14px;"></span>
|
string<span style="font-size: 14px;"></span># 或 |
<span style="font-size: 14px;">number</span><span style="font-size: 14px;"></span><span style="font-size: 14px;"></span><span style="font-size: 14px;"> </span>#middle
|
<span style="font-size: 14px;"></span>dot的垂直位置，可以是 |
<span style="font-size: 14px;"></span>#bottom |
middle<span style="font-size: 14px;"></span>這樣的字串,也可以是30 -20, 表示距離底部的像素，負數表示距頂部的像素 |
<span style="font-size: 14px;">No</span> |
<span style="font-size: 14px;"></span> | #isArrows<span style="font-size: 14px;"></span> |
<span style="font-size: 14px;"></span> | false
<span style="font-size: 14px;"></span>是否需要箭頭 |
<span style="font-size: 14px;">No</span> |
<span style="font-size: 14px;"></span>arrowRender<span style="font-size: 14px;"></span>
|
##func<span style="font-size: 14px;"> </span> |
null<span style="font-size: 14px;"></span>
| #箭頭的渲染函數
<span style="font-size: 14px;">(type)=> {//type:'backward ' .'forward'}</span><span style="font-size: 14px;"></span>#No<span style="font-size: 14px;"></span>
|
## arrowsY<span style="font-size: 14px;"></span> |
string<span style="font-size: 14px;"># 或 </span>number<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>middle<span style="font-size: 14px;"></span>
|
arrows的垂直位置，可以是<span style="font-size: 14px;"></span> | top
#bottom
以上是react輪播圖組件react-slider-light詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
