a lightweight Slider component built with react.
一个轻量级的 react 轮播组件
Features特性
Demos演示
Getting Started快速开始
Install
Use
Development
Props
Easy to use 使用简单: detailed documents and examples 详细的文档和例子
Support custom 支持自定义: Can change style,such as dots and arrows 能够改变样式位置,例如 分页符和箭头
Demos and codes 演示和代码
Important: be sure that you have installed react.
重要提醒:请确保先安装了 react.
<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>
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 | 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 |
以上是react轮播图组件react-slider-light详解的详细内容。更多信息请关注PHP中文网其他相关文章!