Über 10 fantastische React-Karussell-Komponenten

Blog

Über 10 fantastische React-Karussell-Komponenten

1. Reagiere AwesomeSlider

Reagiere super Slider ist eine 60fps, erweiterbare, hochgradig anpassbare, produktionsbereite React-Komponente, die einen Medien-(Bild/Video-)Galerie-Slider/Karussell rendert.



Reagiere AwesomeSlider

vuejs Rich-Text-Editor

Demo: https://caferati.me/demo/react-awesome-slider



2. Reagiere Items Karussell

Artikel Karussell gebaut mit reagieren-Bewegung und gestylte Komponenten.

Reagiere Items Karussell



3. Reagiere Whirligig

ZU karussell-/schieberähnliches Bauteil zum sequentiellen Anzeigen von Folien oder Foliensätzen.

Reagieren Sie Whirligig

4. Reagieren Sie Bootstrap-Karussell

Diese Projektunterstützung Karussellkomponenten gebaut mit React.

React Bootstrap Karussell

5. Reagieren Sie reaktionsschnelles Karussell

Leistungsstarke, leichte und vollständig anpassbare Karussell-Komponente für React-Apps.

Reaktionsschnelles Karussell

Merkmale

  • Responsiv
  • Handyfreundlich
  • Zum Sliden wischen
  • Maus emuliert Berührung
  • Serverseitiges Rendering
  • Tastaturnavigation
  • Benutzerdefinierte Animationsdauer
  • Automatisches Abspielen
  • Benutzerdefiniertes Intervall für die automatische Wiedergabe
  • Endlosschleife
  • Horizontale oder vertikale Richtungen
  • Unterstützt Bilder, Videos, Textinhalte oder alles, was Sie wollen. Jedes direkte Kind repräsentiert eine Folie!
  • Unterstützt jede Flussbibliothek (verwenden Sie selectedItem prop, um aus dem App-Status zu setzen, und onChange Callback, um die neue Position zu erhalten)
  • Alles anzeigen/ausblenden (Daumen, Indikatoren, Pfeile, Status)

Demo: http://react-responsive-carousel.js.org/#demos

Auf Github ansehen

6. Reagiere Items Karussell

Ein Simple React-Artikelkarussell.

Reagiere Items Karussell

Auf Github ansehen

7. RC-Banner-Animation

Animieren Sie die Banner-Reaktionskomponente.

RC-Banner-Anime

Auf Github ansehen

8. Material AutoRotatingCarousel

Führen Sie mit diesem Karussell im Materialstil neue Benutzer in Ihre App ein.

Material AutoRotatingCarousel

Sie haben also eine großartige App geschrieben und sie und alles bereitgestellt. Aber wie führen Sie neue Benutzer an Ihre App heran? Nun, die Material-Design-Richtlinien haben eine Lösung: Zeigen Sie die Top-Vorteile in einem schönen, automatisch rotierenden Karussell!

Auf Github ansehen

9. Reagieren Sie Blattkarussell

Reagieren Sie auf einfaches unendliches Karussell mit Lazy Loading und reaktionsschneller Unterstützung.

Reagieren Sie Blattkarussell

Auf Github ansehen

Suchleiste reagiert nativ

10. Wieder Karussell

Minimale Karussellkomponente für React.

Re Karussell

Auf Github ansehen

11.Reagieren Sie Bildergalerie

Bildergalerie reagieren ist eine React-Komponente zum Erstellen von Bildergalerien und Karussells

Reagieren Sie Bildergalerie

  • Handyfreundlich
  • Thumbnail-Navigation
  • Vollbildunterstützung
  • Benutzerdefinierte gerenderte Folien
  • Sich anpassendes Design
  • Einstieg

Live-Demo http://linxtion.com/demo/react-image-gallery/

12.Einfaches Reaktionskarussell mit Wischfunktion

Einfaches reagierendes Bildkarussell mit reagieren-swipeable . Implementiert eine Komponente zum Verfolgen von Touch-/Swipe-Ereignissen. Einfaches Reagieren des Bildkarussells mit Reaction-Swipeable.

Einfaches React-Karussell mit Wischfunktion

Live-Demo http://dogfessional.github.io/react-swipeable/
Auf GitHub ansehen

13.Reagiere Alice Karussell

Reagiere Alice Karussell ist eine React-Komponente zum Erstellen von Inhaltsgalerien, Inhaltsrotatoren und beliebigen React-Karussells.

Reagiere Alice Karussell

Funktionen von React-Alice-Karussell

  • Endlosschleife
  • FadeOut-Animation
  • AutoPlay-Modus
  • Handyfreundlich
  • Sich anpassendes Design
  • Zum Sliden wischen
  • Startindex
  • Zum Index schieben
  • RTL
  • Tastaturnavigation
  • Touch-and-Drag-Unterstützung
  • Benutzerdefinierte gerenderte Folien
  • Benutzerdefinierte Animationsdauer
  • Mehrere Elemente in der Folie
  • Alles anzeigen / ausblenden (Indikatoren, Pfeile, Folienindizes)

Danke fürs Lesen !!

#reactjs #javascript