react轮播图组件react-slider-light

发布时间:2019-06-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react轮播图组件react-slider-light脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

首先说一下,如果大家喜欢可直接收藏我这个项目的gIThub地址。https://github.com/951565664/... 因为有可能github上版本更新了,但是这边就不更新了。如果有什么问题,可以随时问,建议不要QQ或者私信,直接上github提issues,能把问题记录下来,方便其他人查找。



react-slider-light

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


Table of Contents

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>
            <div>page1</div>
            <div>page2</div>
        </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

Filing issues

Please replicate your issue with CodeSandbox template and post it along with issue to make it easy for me to debug.

Change LOG

1.0.1

2018-2-15

2.0.3

2018-2-25

  • 测试垂直

3.0.1

2018-2-25

  • 修改bug

3.1.0

2018-6-19

  • 增加滚动到最后一张时,取消动画,即立刻回到第一张

FAQ

Will be updated regularly? 是否会经常更新

Of course, at least 4 hours a week will be taken out for maintenance and development
当然会,至少每周会抽出4个小时来维护和开发

Does it support IE8?是否支持 IE 8

No. 想多了老铁

Next

Add some basic function.增加一些基本功能

  • Scroll vertically 垂直滚动
  • gallery 缩略图

Want more?

License

MIT

脚本宝典总结

以上是脚本宝典为你收集整理的react轮播图组件react-slider-light全部内容,希望文章能够帮你解决react轮播图组件react-slider-light所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。