BertSusan 发布于1年前
0 条问题


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

Table of Contents


  • Easy to use 使用简单: detailed documents and examples 详细的文档和例子
  • Support custom 支持自定义: Can change style,such as dots and arrows 能够改变样式位置,例如 分页符和箭头


Demos and codes 演示和代码

Getting Started


Important: be sure that you have installed react.

重要提醒:请确保先安装了 react.

# Install
$ npm install react-slider-light


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

export default class Wrapper extends Component {
        return <Slider>
        </Slider >


Want to run demos locally 本地启动演示

git clone
cd react-slick
npm install
npm start
open http://localhost:8080

more example 更多例子


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.


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

Of course, at least 4 hours a week will be taken out for maintenance and development

Does it support IE8?是否支持 IE 8

No. 想多了老铁


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

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

Want more?



查看原文: react轮播图组件react-slider-light

  • bigbird
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。