Detailed explanation of react carousel component react-slider-light

This article mainly shares with you the detailed explanation of the react carousel component react-slider-light. I hope it can help you.

react-slider-light

a lightweight Slider component built with react.
A lightweight react carousel component

---

Table of Contents

• Features

• Demos

• ##Getting StartedQuick start<span style="font-size: 14px;"></span>

• Install<span style="font-size: 14px;"></span>

• Use<span style="font-size: 14px;"></span>

• ##Development

  <span style="font-size: 14px;"></span>

• Props

  <span style="font-size: 14px;"></span>

Features

<span style="font-size: 14px;"></span>

• Easy to use Use simple: detailed documents and examples Detailed documents and examples

• Support custom Support custom: Can change style, such as dots and arrows Ability to change style positions, such as page breaks and arrows

##Demos

<span style="font-size: 14px;"></span>Demos and codes Demo and codes

<span style="font-size: 14px;"></span>Getting Started

<span style="font-size: 14px;"></span>Install

<span style="font-size: 14px;"></span>Important: be sure that you have installed react.

<span style="font-size: 14px;"></span>Important reminder: Please make sure you have installed react.

<span style="font-size: 14px;"># Install<br>$ npm install react-slider-light<br></span>

<span style="font-size: 14px;"></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>

<span style="font-size: 14px;"> </span>Development

<span style="font-size: 14px;"></span>Want to run demos locally Local startup demo

<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>

<span style="font-size: 14px;"></span>more example More examples

Props

Control sliding pageNo##delaynumber1800##speedNoNoNumber of pages scrolled each time##booltrueisDotsboolfalse enumobjectThe horizontal position of dot can be No ##dotYstringmiddle##isArrowsarrowRender(type)=> {//type:'backward ' .'forward'} arrowsYtop

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>	Default initial sliding start position	<span style="font-size: 14px;">No</span>
##sliderIndex<span style="font-size: 14px;"></span>	number<span style="font-size: 14px;"></span>	##0<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>##Delayed Time (ms)	<span style="font-size: 14px;">No</span>	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>number	<span style="font-size: 14px;">##500</span>	Delay time (ms)<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>sliderToShow
<span style="font-size: 14px;">number</span>	<span style="font-size: 14px;">1</span>	Every page shown<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>	##sliderToScroll
##number<span style="font-size: 14px;"> </span>	1<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>No	<span style="font-size: 14px;"></span>	autoPaly<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>Whether to automatically start the carousel	<span style="font-size: 14px;">No</span>	<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span> Do you need dots	<span style="font-size: 14px;">No</span>	<span style="font-size: 14px;"></span> ##dots	<span style="font-size: 14px;"></span>
or <span style="font-size: 14px;"></span>func	<span style="font-size: 14px;"></span>circle<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span> The type of dots, the value is circle, gallery, diamond, square, ({index, item}) => { return ReactDom}	No<span style="font-size: 14px;"></span>	##dotStyle	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;">##{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}</span>	style of dots<span style="font-size: 14px;"></span>
<span style="font-size: 14px;">dotX</span>	##string<span style="font-size: 14px;"></span>## or <span style="font-size: 14px;"></span>number<span style="font-size: 14px;"></span>	center<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>right<span style="font-size: 14px;"> </span>left<span style="font-size: 14px;"> </span>center<span style="font-size: 14px;"></span> Such a string also It can be 30 -20, indicating the pixels from the left, negative numbers indicating the pixels from the right <span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"> or </span><span style="font-size: 14px;">number</span><span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>The vertical position of dot can be	top <span style="font-size: 14px;"></span>bottom <span style="font-size: 14px;"></span>middle<span style="font-size: 14px;"> Such a string can also be 30 -20, indicating the distance from the bottom to the pixel, and a negative number indicates the distance from the top The pixels of </span><span style="font-size: 14px;"></span>No	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>bool	<span style="font-size: 14px;"></span>false	<span style="font-size: 14px;"></span>Whether arrows are required	<span style="font-size: 14px;">No</span>	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>func	<span style="font-size: 14px;"></span>##null	<span style="font-size: 14px;">Arrow rendering function </span>	<span style="font-size: 14px;"></span><span style="font-size: 14px;">No</span>	<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>string	or <span style="font-size: 14px;"></span>number<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>middle	<span style="font-size: 14px;"> The vertical position of arrows, which can be </span>	<span style="font-size: 14px;"> </span> bottom<span style="font-size: 14px;"></span> middle<span style="font-size: 14px;"></span> Such a string can also be 30 -20, indicating the pixels from the bottom, and negative numbers indicating the pixels from the top <span style="font-size: 14px;"></span>No<span style="font-size: 14px;"></span>	<span style="font-size: 14px;"></span>

The above is the detailed content of Detailed explanation of react carousel component react-slider-light. For more information, please follow other related articles on the PHP Chinese website!