react 引入轮播插件_react轮播图组件react-slider-light详解

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

react-slider-light

a lightweight Slider component built with react.

一个轻量级的 react 轮播组件

Table of ContentsFeatures特性

Demos演示

Getting Started快速开始Install

Use

Development

Props

FeaturesEasy 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

Useimport React, { Component } from 'react';

import Slider from 'react-slider-light';

export default class Wrapper extends Component {

render(){

return

page1

page2

}

}

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 更多例子

PropsPropsTypeDefault ValueDescriptionRequireddefaultSliderIndexnumber0默认初始滑动开始位置No

sliderIndexnumber0控制滑动的页面No

delaynumber1800延迟的时间 (ms)No

speednumber500延迟的时间 (ms)No

sliderToShownumber1每次展示页面No

sliderToScrollnumber1每次滚动的页面数量No

autoPalybooltrue是否自动开始轮播No

isDotsboolfalse是否需要dotsNo

dotsenumorfunccircledots 的种类，值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom}No

dotStyleobject{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}dots 的样式

dotXstringornumbercenterdot的水平位置 ，可以是right left center这样的字符串 ,也可以是 30 -20, 表示距离左边的像素，负数表示距右边的像素No

dotYstringornumbermiddledot的垂直位置 ，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素No

isArrowsboolfalse是否需要箭头No

arrowRenderfuncnull箭头的渲染函数(type)=>{//type:'backward ' .'forward'}No

arrowsYstringornumbermiddlearrows的垂直位置 ，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素No