Heim > Web-Frontend > js-Tutorial > Hauptteil

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

小云云
Freigeben: 2018-02-23 11:46:35
Original
5157 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage