本文主要和大家分享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
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 更多例子
Props
Props Type Default Value Description RequireddefaultSliderIndexnumber0默认初始滑动开始位置NosliderIndexnumber0控制滑动的页面Nodelaynumber1800延迟的时间 (ms)Nospeednumber500延迟的时间 (ms)NosliderToShownumber1每次展示页面NosliderToScrollnumber1每次滚动的页面数量NoautoPalybooltrue是否自动开始轮播NoisDotsboolfalse是否需要dotsNodotsenum or funccircledots 的种类，值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom}NodotStyleobject{listStyle: ‘none’,display: ‘inline-block’,margin: ‘0px 8px’,cursor: ‘pointer’,overflow:’hidden’}dots 的样式
dotXstring or numbercenterdot的水平位置 ，可以是right left center这样的字符串 ,也可以是 30 -20, 表示距离左边的像素，负数表示距右边的像素NodotYstring or numbermiddledot的垂直位置 ，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素NoisArrowsboolfalse是否需要箭头NoarrowRenderfuncnull箭头的渲染函数 (type)=>{//type:’backward ‘ .’forward’}NoarrowsYstring or numbermiddlearrows的垂直位置 ，可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素，负数表示距顶部的像素No
以上就是react轮播图组件react-slider-light详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2786147.html
