react轮播图组件react-slider-light详解

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

react-slider-light

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

---

Table of Contents

• Features特性

• Demos演示

• Getting Started快速开始

• Install

• Use

• Development

• Props

Features

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

Use

import React, { Component } from 'react';
import Slider from 'react-slider-light';

export default class Wrapper extends Component {
    render(){
        return <Slider>
            <p>page1</p>
            <p>page2</p>
        </Slider >
    }
}

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

Props

Props	Type	Default Value	Description	Required
defaultSliderIndex	number	0	默认初始滑动开始位置	No
sliderIndex	number	0	控制滑动的页面	No
delay	number	1800	延迟的时间 (ms)	No
speed	number	500	延迟的时间 (ms)	No
sliderToShow	number	1	每次展示页面	No
sliderToScroll	number	1	每次滚动的页面数量	No
autoPaly	bool	true	是否自动开始轮播	No
isDots	bool	false	是否需要dots	No
dots	enum or 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 的样式
dotX	string or number	center	dot的水平位置 ，可以是right left center这样的字符串 ,也可以是 30 -20, 表示距离左边的像素，负数表示距右边的像素	No
dotY	string or number	middle	dot的垂直位置 ，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素	No
isArrows	bool	false	是否需要箭头	No
arrowRender	func	null	箭头的渲染函数 (type)=>{//type:'backward ' .'forward'}	No
arrowsY	string or number	middle	arrows的垂直位置 ，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素	No

以上就是react轮播图组件react-slider-light详解的详细内容，更多请关注其它相关文章！