Explication détaillée du composant du carrousel de réaction, réaction-slider-light

Cet article partage principalement avec vous l'explication détaillée du composant React Carousel React-slider-light. J'espère qu'il pourra vous aider.

react-slider-light

un composant Slider léger construit avec React
Un composant carrousel de réaction léger

---

Table des matières

• Caractéristiques

• Démos

• Mise en route

• Installer

• Utiliser

• Développement

• Accessoires

Caractéristiques

• Facile à utiliser : documents détaillés et exemples

• Prise en charge de la personnalisation du support : peut changer de style, comme les points et les flèches, peut changer la position du style, comme sauts de page et flèches

Démos

Démos et codes Démo et codes

Démarrage

Installer

Important : assurez-vous d'avoir installé React.

Rappel important : assurez-vous d'avoir installé React.

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

Utilisation

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

Développement

Vous souhaitez exécuter des démos localement

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

plus d'exemple Plus d'exemple

Accessoires

numéro<td>0 <span style="font-size: 14px;"></span> </td> <td>Position de départ glissante initiale par défaut<span style="font-size: 14px;"></span> </td>Nonnuméro0Contrôle de la page coulissante<tr>500<td><code><span style="font-size: 14px;">sliderToShow</span><td>sliderToShow<span style="font-size: 14px;"> code></span> </td> <code>numéro1sliderToScroll1<td>autoPaly<code><span style="font-size: 14px;">isDots</span>trueDémarrage automatique du carrouselNon<td>isDots<code><span style="font-size: 14px;">enum</span><code><span style="font-size: 14px;">func</span>boolfalseSi des points sont nécessairesNon<td>points<code><span style="font-size: 14px;">object</span>centre<td>centre<span style="font-size: 14px;"></span> Une telle chaîne peut également être 30 -20, indiquant les pixels à gauche, et négative chiffres indiquant la distance. Pixel à droite</td> ou bas<td>milieu<code><span style="font-size: 14px;">isArrows</span> Une telle chaîne peut également être 30 -20, indiquant les pixels du bas, et des nombres négatifs indiquant les pixels du haut isArrowsboolSi des flèches sont requises<tr>func<td> <code><span style="font-size: 14px;">arrowsY</span> ou numéro

Accessoires	Type	Valeur par défaut	Description	Obligatoire
<code><span style="font-size: 14px;">defaultSliderIndex</span>defaultSliderIndex	<span style="font-size: 14px;">number</span>	<span style="font-size: 14px;">0</span>
<span style="font-size: 14px;">sliderIndex</span>	<span style="font-size: 14px;">number</span>sliderIndex	<span style="font-size: 14px;">0</span>
<span style="font-size: 14px;">delay</span>Non	<span style="font-size: 14px;">number</span>	<code><span style="font-size: 14px;">1800</span> délai	numéro	1800
Temps de retard (ms)<span style="font-size: 14px;">speed</span>	<span style="font-size: 14px;">number</span>Non	<span style="font-size: 14px;">500</span>	<span style="font-size: 14px;">vitesse</span>	<span style="font-size: 14px;">numéro</span>
Temps de retard (ms)<span style="font-size: 14px;">number</span>	<span style="font-size: 14px;">1</span>Non
<span style="font-size: 14px;">sliderToScroll</span>	<span style="font-size: 14px;">number</span>	Chaque page affiché<span style="font-size: 14px;">1</span>	Non
<span style="font-size: 14px;">autoPaly</span>numéro	<span style="font-size: 14px;">bool</span>	<span style="font-size: 14px;">true</span>	chaque parchemin Nombre de pages	Non
<span style="font-size: 14px;">bool</span>bool	<span style="font-size: 14px;">false</span>
<span style="font-size: 14px;">dots</span>	<span style="font-size: 14px;">circle</span>
<span style="font-size: 14px;">dotStyle</span>	<code><span style="font-size: 14px;">{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}</span>énumération	ou func	cercleLe type de points, la valeur est cercle, galerie, losange, carré, ({index, item})=>{ return ReactDom}Non dotStyleobjet {listStyle : 'aucun', affichage : 'inline-block', marge : '0px 8px', curseur : 'pointeur', débordement : 'caché'} Style pour les points
<span style="font-size: 14px;">dotX</span>	<span style="font-size: 14px;">string</span> ou <span style="font-size: 14px;">number</span>numéro	<span style="font-size: 14px;">center</span>	<span style="font-size: 14px;">right</span>La position horizontale du point, qui peut être <span style="font-size: 14px;">left</span><span style="font-size: 14px;">center</span>droite gauche
Non<span style="font-size: 14px;">dotY</span>	<span style="font-size: 14px;">string</span>dotY<span style="font-size: 14px;">number</span>	<span style="font-size: 14px;">middle</span>	<span style="font-size: 14px;">numéro</span><span style="font-size: 14px;">top</span><span style="font-size: 14px;">bottom</span><span style="font-size: 14px;">middle</span>milieu	La position verticale du point, qui peut être haut
<span style="font-size: 14px;">bool</span>	Non<span style="font-size: 14px;">false</span>
<code><span style="font-size: 14px;">arrowRender</span>false	<code><span style="font-size: 14px;">func</span>	<span style="font-size: 14px;">null</span>	Non<span style="font-size: 14px;">(type)=>{//type:'backward ' .'forward'}</span>	<code><span style="font-size: 14px;">arrowRender</span>
null<span style="font-size: 14px;">string</span><span style="font-size: 14px;">number</span>Fonction de rendu de flèche	(type)=>{// tapez : 'en arrière' .'en avant'} <span style="font-size: 14px;">middle</span>	Non<span style="font-size: 14px;">top</span><span style="font-size: 14px;">bottom</span><span style="font-size: 14px;">middle</span>flèchesY

milieuLa position verticale des flèches, qui peut être haut bas milieu Une chaîne comme celle-ci peut également être 30 -20, ce qui représente les pixels du bas, et un nombre négatif représente les pixels du bas. hautNon

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!