Ausführliche Erklärung der React-Carousel-Komponente React-Slider-Light

Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung der React-Carousel-Komponente React-Slider-Light mit.

react-slider-light

eine leichte Slider-Komponente, die mit React erstellt wurde
Eine leichte React-Karussellkomponente

---

Inhaltsverzeichnis

• Funktionen

• Demos

• Erste Schritte

• Installieren

• Verwendung

• Entwicklung

• Requisiten

Funktionen

• Einfach zu bedienen: Detaillierte Dokumente und Beispiele

• Benutzerdefinierte Unterstützung unterstützen Anpassung: Kann den Stil ändern, z. B. Punkte und Pfeile, kann die Stilposition ändern, z. B Seitenumbrüche und Pfeile

Demos

Demos und Codes Demo und Codes

Erste Schritte

Installieren

Wichtig: Stellen Sie sicher, dass Sie React installiert haben.

Wichtige Erinnerung: Bitte stellen Sie sicher, dass Sie React installiert haben.

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

Verwenden Sie

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

Entwicklung

Möchten Sie Demos lokal ausführen

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

mehr Beispiel Weitere Beispiele

Requisiten

Nummer<td>0 <span style="font-size: 14px;"></span> </td> <td>Standardmäßige anfängliche Gleitstartposition<span style="font-size: 14px;"></span> </td>NeinNummer0Gleitseite steuern<tr>500<td><code><span style="font-size: 14px;">sliderToShow</span><td>sliderToShow<span style="font-size: 14px;"> code></span> </td> <code>Nummer1sliderToScroll1<td>autoPaly<code><span style="font-size: 14px;">isDots</span>trueOb das Karussell automatisch gestartet werden sollNein<td>isDots<code><span style="font-size: 14px;">enum</span><code><span style="font-size: 14px;">func</span>boolfalseOb Punkte benötigt werdenNein<td>Punkte<code><span style="font-size: 14px;">object</span>Mitte<td>center<span style="font-size: 14px;"></span> Eine solche Zeichenfolge kann auch 30 -20 sein, was die Pixel links angibt, und negativ Zahlen, die den Abstand angeben. Pixel rechts</td> oder unten sein kann <td>middle<code><span style="font-size: 14px;">isArrows</span> Eine solche Zeichenfolge kann auch 30 -20 sein, was die Pixel von unten angibt, und negative Zahlen, die die Pixel von oben angeben isArrowsboolOb Pfeile erforderlich sind<tr>func<td> <code><span style="font-size: 14px;">arrowsY</span> oder Nummer

Requisiten	Typ	Standardwert	Beschreibung	Erforderlich
<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>Keine	<span style="font-size: 14px;">number</span>	<code><span style="font-size: 14px;">1800</span> Verzögerung	Nummer	1800
Verzögerungszeit (ms)<span style="font-size: 14px;">speed</span>	<span style="font-size: 14px;">number</span>Nein	<span style="font-size: 14px;">500</span>	<span style="font-size: 14px;">Geschwindigkeit</span>	<span style="font-size: 14px;">Nummer</span>
Verzögerungszeit (ms)<span style="font-size: 14px;">number</span>	<span style="font-size: 14px;">1</span>Nein
<span style="font-size: 14px;">sliderToScroll</span>	<span style="font-size: 14px;">number</span>	Jede Seite angezeigt<span style="font-size: 14px;">1</span>	Nein
<span style="font-size: 14px;">autoPaly</span>Nummer	<span style="font-size: 14px;">bool</span>	<span style="font-size: 14px;">true</span>	jede Schriftrolle Anzahl der Seiten	Nein
<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>enum	oder func	circleDie Art der Punkte, der Wert ist Kreis, Galerie, Raute, Quadrat, ({index, item})=>{ return ReactDom}Nein dotStyleobject {listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'} Stil für Punkte
<span style="font-size: 14px;">dotX</span>	<span style="font-size: 14px;">string</span> oder <span style="font-size: 14px;">number</span>Nummer	<span style="font-size: 14px;">center</span>	<span style="font-size: 14px;">right</span>Die horizontale Position des Punkts, die <span style="font-size: 14px;">left</span><span style="font-size: 14px;">center</span>rechts sein kann left
Nein<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;">Nummer</span><span style="font-size: 14px;">top</span><span style="font-size: 14px;">bottom</span><span style="font-size: 14px;">middle</span>Mitte	Die vertikale Position des Punkts, der oben
<span style="font-size: 14px;">bool</span>	Nein<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>	Nein<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>Pfeil-Rendering-Funktion	(type)=>{// type:'backward ' .'forward'} <span style="font-size: 14px;">middle</span>	Nein<span style="font-size: 14px;">top</span><span style="font-size: 14px;">bottom</span><span style="font-size: 14px;">middle</span>PfeileY

MitteDie vertikale Position von Pfeilen, die oben unten middle Eine Zeichenfolge wie diese kann auch 30 -20 sein, was die Pixel von unten darstellt, und eine negative Zahl stellt die Pixel von unten dar obenNein

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der React-Carousel-Komponente React-Slider-Light. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!