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

react轮播图组件react-slider-light详解,第1张

本文主要和大家分享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 <Slider>
<p>page1</p>
<p>page2</p>
</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
dotsenum 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 的样式
dotXstring or numbercenterdot的水平位置 ,可以是right left center这样的字符串 ,也可以是 30 -20, 表示距离左边的像素,负数表示距右边的像素No
dotYstring or numbermiddledot的垂直位置 ,可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素,负数表示距顶部的像素No
isArrowsboolfalse是否需要箭头No
arrowRenderfuncnull箭头的渲染函数 (type)=>{//type:'backward ' .'forward'}No
arrowsYstring or numbermiddlearrows的垂直位置 ,可以是top bottom middle这样的字符串 ,也可以是 30 -20, 表示距离底部的像素,负数表示距顶部的像素No

以上就是react轮播图组件react-slider-light详解的详细内容,更多请关注php中文网其它相关文章!

文章来源:https://www.php.cn/faq/386917.html

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
U19学习网站 » react轮播图组件react-slider-light详解