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

PropsTypeDefault ValueDescriptionRequired
defaultSliderIndexnumber0默许初始滑动最先位置No
sliderIndexnumber0掌握滑动的页面No
delaynumber1800耽误的时候 (ms)No
speednumber500耽误的时候 (ms)No
sliderToShownumber1每次展现页面No
sliderToScrollnumber1每次转动的页面数目No
autoPalybooltrue是不是自动最先轮播No
isDotsboolfalse是不是须要dotsNo
dots enum or funccircledots 的品种,值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom}No
dotStyleobject{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}dots 的款式
dotX string or numbercenterdot的程度位置 ,可所以right left center如许的字符串 ,也可所以 30 -20, 示意间隔左侧的像素,负数示意距右侧的像素No
dotY string or numbermiddledot的垂直位置 ,可所以top bottom middle如许的字符串 ,也可所以 30 -20, 示意间隔底部的像素,负数示意距顶部的像素No
isArrowsboolfalse是不是须要箭头No
arrowRenderfuncnull箭头的衬着函数 (type)=>{//type:'backward ' .'forward'}No
arrowsY string or numbermiddlearrows的垂直位置 ,可所以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

    原文作者:小哈
    原文地址: https://segmentfault.com/a/1190000013317602
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞