首页 > web前端 > js教程 > 正文

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

小云云
发布: 2018-02-23 11:46:35
原创
5142 人浏览过

本文主要和大家分享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.

<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


以上是react轮播图组件react-slider-light详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!