本文主要和大家分享react轮播图组件react-slider-light详解，希望能帮助到大家。

react-slider-light

a lightweight slider component built with react.
一个轻量级的 react 轮播组件

Features特性
Demos演示
Getting Started快速开始

Install
Use
Development
Props

Features

Easy to use 使用简单: detailed documents and examples 详细的文档和例子

播记
播客shownotes生成器 | 为播客创作者而生

43

查看详情
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.

<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

Props	Type	Default Value	Description	Required
`<span style="font-size: 14px;">defaultSliderIndex</span>`	`<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">0</span>`	默认初始滑动开始位置	No
`<span style="font-size: 14px;">sliderIndex</span>`	`<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">0</span>`	控制滑动的页面	No
`<span style="font-size: 14px;">delay</span>`	`<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">1800</span>`	延迟的时间 (ms)	No
`<span style="font-size: 14px;">speed</span>`	`<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">500</span>`	延迟的时间 (ms)	No
`<span style="font-size: 14px;">sliderToShow</span>`	`<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">1</span>`	每次展示页面	No
`<span style="font-size: 14px;">sliderToScroll</span>`	`<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">1</span>`	每次滚动的页面数量	No
`<span style="font-size: 14px;">autoPaly</span>`	`<span style="font-size: 14px;">bool</span>`	`<span style="font-size: 14px;">true</span>`	是否自动开始轮播	No
`<span style="font-size: 14px;">isDots</span>`	`<span style="font-size: 14px;">bool</span>`	`<span style="font-size: 14px;">false</span>`	是否需要dots	No
`<span style="font-size: 14px;">dots</span>`	`<span style="font-size: 14px;">enum</span>` or `<span style="font-size: 14px;">func</span>`	`<span style="font-size: 14px;">circle</span>`	dots 的种类，值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom}	No
`<span style="font-size: 14px;">dotStyle</span>`	`<span style="font-size: 14px;">object</span>`	`<span style="font-size: 14px;">{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}</span>`	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;">dotY</span>`	`<span style="font-size: 14px;">string</span>` or `<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">middle</span>`	dot的垂直位置，可以是`<span style="font-size: 14px;">top</span>` `<span style="font-size: 14px;">bottom</span>` `<span style="font-size: 14px;">middle</span>`这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素	No
`<span style="font-size: 14px;">isArrows</span>`	`<span style="font-size: 14px;">bool</span>`	`<span style="font-size: 14px;">false</span>`	是否需要箭头	No
`<span style="font-size: 14px;">arrowRender</span>`	`<span style="font-size: 14px;">func</span>`	`<span style="font-size: 14px;">null</span>`	箭头的渲染函数 `<span style="font-size: 14px;">(type)=>{//type:'backward ' .'forward'}</span>`	No
`<span style="font-size: 14px;">arrowsY</span>`	`<span style="font-size: 14px;">string</span>` or `<span style="font-size: 14px;">number</span>`	`<span style="font-size: 14px;">middle</span>`	arrows的垂直位置，可以是`<span style="font-size: 14px;">top</span>` `<span style="font-size: 14px;">bottom</span>` `<span style="font-size: 14px;">middle</span>`这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素	No