eine leichte Slider-Komponente, die mit React erstellt wurde
Eine leichte React-Karussellkomponente
Funktionen
Demos
Erste Schritte
Installieren
Verwendung
Entwicklung
Requisiten
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 und Codes Demo und Codes
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>
<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>
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 | Typ | Standardwert | Beschreibung | Erforderlich |
---|---|---|---|---|
<code><span style="font-size: 14px;">defaultSliderIndex</span> defaultSliderIndex |
<span style="font-size: 14px;">number</span>
| Nummer<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>
| Nummer
| 0Gleitseite steuern |
<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>
| 1<span style="font-size: 14px;">number</span> |
Jede Seite angezeigt<span style="font-size: 14px;">1</span>
|
Nein |
| sliderToScroll
<span style="font-size: 14px;">autoPaly</span> Nummer |
<span style="font-size: 14px;">bool</span>
| 1<span style="font-size: 14px;">true</span> |
jede Schriftrolle Anzahl der Seiten | Nein |
|
<span style="font-size: 14px;">false</span>
| trueOb das Karussell automatisch gestartet werden soll | Nein | |
<span style="font-size: 14px;">dots</span> |
<span style="font-size: 14px;">circle</span>
| falseOb Punkte benötigt werden | Nein | |
<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 |
circle Die Art der Punkte, der Wert ist Kreis, Galerie, Raute, Quadrat, ({index, item})=>{ return ReactDom}Nein dotStyle object {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;">center</span>
| Mitte
<span style="font-size: 14px;">right</span> Die horizontale Position des Punkts, die <span style="font-size: 14px;">left</span> 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> | oder
<span style="font-size: 14px;">Nummer</span> <span style="font-size: 14px;">top</span> <span style="font-size: 14px;">bottom</span>
|
Die vertikale Position des Punkts, der oben |
<span style="font-size: 14px;">bool</span> |
Nein<span style="font-size: 14px;">false</span>
|
| isArrows
| bool
|
<code><span style="font-size: 14px;">arrowRender</span> false |
<code><span style="font-size: 14px;">func</span> | Ob Pfeile erforderlich sind<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 | oder |
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!