搜尋

首頁 >web前端 >js教程 >react輪播圖組件react-slider-light詳解

react輪播圖組件react-slider-light詳解

小云云
小云云原創
2018-02-23 11:46:355173瀏覽

本文主要和大家分享react輪播圖元件react-slider-light詳解，希望能幫助大家。

react-slider-light

a lightweight Slider component built with react.
一個輕量級的react 輪播元件

Table of Contents

  • #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>

Props<span style="font-size: 14px;"></span>

  • #Features

  • ##Features

    • # #Easy to use 使用簡單
: detailed documents and examples 詳細的文件和範例

<span style="font-size: 14px;"></span>

##Support custom 支援自訂: Can change style,such as dots and arrows 能夠改變樣式位置，例如分頁符號和箭頭

<span style="font-size: 14px;"></span>

Demos<span style="font-size: 14px;"></span>

Demos and codes 示範和代碼<span style="font-size: 14px;"></span>

Getting Started<span style="font-size: 14px;"></span>

Install<span style="font-size: 14px;"></span>

##Important: be sure that you have installed react.

<span style="font-size: 14px;"></span>

重要提醒：請確保先安裝了react.

<span style="font-size: 14px;"># Install<br>$ npm install react-slider-light<br></span>

Use

<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>

Development############Want to run demos locally 本機啟動示範######
<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>
######more example 更多範例######

Props

Default Value#number##00#1800500NoNo#trueisDotsdotstop#isArrowsboolfalse#箭頭的渲染函數 top
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><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><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><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><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><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><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>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>

#bottom

######middle#########這樣的字串,也可以是30 -20, 表示距離底部的像素，負數表示距頂部的像素############No#########################

以上是react輪播圖組件react-slider-light詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

字符串 pointer display overflow margin table
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JavaScript閉包基礎下一篇：JavaScript閉包基礎

相關文章

看更多