Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

React.js ist eine beliebte und leistungsstarke JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Sie können damit dynamische, interaktive und responsive Webanwendungen erstellen.

Eine der gemeinsamen Komponenten, die Sie möglicherweise mit React.js verwenden, ist das Karussell. Es ist einfach, entweder mit integrierten React-Funktionen oder mit einer Bibliothek eines Drittanbieters.

Was ist ein Karussell und wozu dient es?

Ein Karussell ist eine Diashow-Komponente, mit der Sie Bilder oder Videos durchlaufen können. Es wird am häufigsten auf Websites verwendet, um Produkte oder Dienstleistungen zu präsentieren oder vorgestellte Inhalte zu präsentieren. Die Verwendung eines Karussells hat viele Vorteile, wie zum Beispiel:

  • Es ist eine effektive Möglichkeit, die Aufmerksamkeit auf wichtige Inhalte zu lenken.
  • Es ist eine großartige Möglichkeit, mehrere Bilder und Videos zu präsentieren.
    • instagram viewer
  • Es hilft, die Seite organisiert und optisch ansprechend zu halten.
  • Sie können es verwenden, um ein interaktives Benutzererlebnis zu schaffen.

So erstellen Sie ein Karussell in React.js

Das Erstellen eines Karussells in React.js ist relativ einfach und es gibt zwei beliebte Bibliotheken, die Sie verwenden können. Sie können auch integrierte React-Funktionen verwenden, um ein Karussell hinzuzufügen.

Verwenden integrierter Funktionen

Die erste Methode zum Erstellen eines Karussells in React.js besteht darin, integrierte Funktionen zu verwenden. React bietet eine leistungsstarke Möglichkeit, ein Karussell mithilfe von Komponenten zu erstellen. Du kannst Verwenden Sie React-Hooks um ein Karussell hinzuzufügen und zu steuern.

importieren Reagieren, { useState } aus 'reagieren';

konst Karussell = () => {
konst [index, setIndex] = useState(0);
konst Länge = 3;

konst handlePrevious = () => {
konst newIndex = index - 1;
setIndex (neuerIndex < 0? length - 1: newIndex);
};

konst handleNext = () => {
konst neuerIndex = Index + 1;
setIndex (neuerIndex >= Länge? 0: newIndex);
};

zurückkehren (
<div Klassenname="Karussell">
<Schaltfläche onClick={handlePrevious}>Vorherige</button>
<Schaltfläche onClick={handleNext}>Nächste</button>
<P>{Index}</P>
</div>
);
};

ExportStandard Karussell;

Dieser Code verwendet den useState-Hook, um eine Zustandsvariable namens index zu erstellen. Dadurch wird die aktuelle Position im Karussell verfolgt.

Die Funktionen handlePrevious und handleNext kümmern sich um Aktualisierungen des Indexwerts, wenn der Benutzer auf klickt Vorherige Und Nächste Tasten.

Schließlich zeigt das Markup den Indexwert in einem Absatz-Tag an. Sie können Bilder oder Videos anstelle von Text anzeigen, wenn Sie möchten. Sie können das Karussell auch mit normalem CSS oder formatieren Verwenden eines CSS-Frameworks wie Tailwind CSS.

Ohne ausgefallenes Styling sollten Sie ein einfaches Paar Schaltflächen und eine Zahl sehen, die den aktuellen Index darstellt:

Verwenden der Pure-React-Carousel-Bibliothek

Die zweite Methode zum Erstellen eines Karussells in React.js ist die Pure-React-Carousel-Bibliothek. Diese Bibliothek bietet eine leistungsstarke Möglichkeit, ein Karussell mit der Verwendung von Komponenten zu erstellen. Um die Bibliothek zu verwenden, müssen Sie sie zuerst mit dem Befehl installieren:

npm Installieren reines Reaktionskarussell

Nachdem Sie die Bibliothek installiert haben, können Sie die Komponente verwenden, um ein Karussell zu erstellen. Hier ist ein Beispiel für die Verwendung der Carousel-Komponente:

importieren Reagieren aus 'reagieren';
importieren { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } aus 'reines Reaktionskarussell';
importieren 'pure-react-carousel/dist/react-carousel.es.css';

konst Karussell = () => {
zurückkehren (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Schieberegler>
<Folienindex={0}>Folie 1</Slide>
<Folienindex={1}>Folie 2</Slide>
<Folienindex={2}>Folie 3</Slide>
</Slider>
<ButtonZurück>Zurück</ButtonBack>
<SchaltflächeWeiter>Nächste</ButtonNext>
</CarouselProvider>
);
};

ExportStandard Karussell;

In diesem Code sehen Sie, dass die CarouselProvider-Komponente die allgemeinen Einstellungen für das Karussell definiert, z. B. naturalSlideWidth, naturalSlideHeight und totalSlides.

Die Slider-Komponente enthält mehrere Slide-Instanzen. Die Slide-Komponente definiert jede einzelne Folie.

Schließlich behandeln die Komponenten ButtonBack und ButtonNext die Karussellnavigation.

Die Verwendung der Pure-React-Carousel-Bibliothek bietet viele Vorteile, wie zum Beispiel:

  • Einfach zu verwenden: Während die integrierte Methode mehr Code zum Erstellen eines Karussells erfordert, bietet die Bibliothek eine einfachere Möglichkeit, ein Karussell in React.js zu erstellen.
  • Ansprechend: Die Bibliothek bietet die Möglichkeit, responsive Karussells zu erstellen. Bei der integrierten Methode müssten Sie für unterschiedliche Bildschirmgrößen ein separates Karussell erstellen.
  • Anpassung: Die Bibliothek bietet viele Funktionen, mit denen Sie das Karussell anpassen können, z. B. Autoplay, Navigationspfeile, Paginierung und mehr.

Verwenden der React-Responsive-Carousel-Bibliothek

Die letzte Methode zum Erstellen eines Karussells in React.js ist die React-Responsive-Carousel-Bibliothek. Mit dieser Bibliothek können Sie unter Verwendung von Komponenten ein Karussell erstellen. Um die Bibliothek zu verwenden, müssen Sie sie zuerst mit dem Befehl installieren:

npm Installieren Reagieren-Reagieren-Karussell

Nachdem Sie die Bibliothek installiert haben, können Sie die Komponente verwenden, um ein Karussell zu erstellen. Hier ist ein Beispiel für die Verwendung der Carousel-Komponente:

importieren Reagieren aus 'reagieren';
importieren { Karussell } aus 'Reagieren-Reagieren-Karussell';
importieren 'reagieren-responsive-carousel/lib/styles/carousel.min.css';

konst Karussellseite = () => {
zurückkehren (
<Karussell>
<div>
<img src="https://placehold.co/100x100" />
<p Klassenname="Legende">Legende 1</P>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p Klassenname="Legende">Legende 2</P>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p Klassenname="Legende">Legende 3</P>
</div>
</Carousel>
);
};

ExportStandard KarussellSeite;

In diesem Code können Sie sehen, dass die Carousel-Komponente das Karussell definiert. Innerhalb der Carousel-Komponente enthält ein div jede einzelne Folie. Jede Folie kann ein Bild sowie eine Legende für dieses Bild enthalten. Die Bibliothek bietet auch eine Reihe von Optionen und Einstellungen, mit denen Sie das Karussell anpassen können.

Die Verwendung der React-Responsive-Carousel-Bibliothek bietet viele Vorteile, wie zum Beispiel:

  • Eine der beliebtesten Bibliotheken: Die Bibliothek ist eine der beliebtesten Bibliotheken zum Erstellen von Karussells in React.js. Wenn Sie also nicht weiterkommen, können Sie leicht Hilfe von der Community finden.
  • Einfach zu verwenden: Mit nur wenigen Codezeilen können Sie ganz einfach ein Karussell erstellen.
  • Ansprechend: Die Bibliothek bietet die Möglichkeit, responsive Karussells zu erstellen.
  • Anpassung: Die Bibliothek bietet auch viele Funktionen, mit denen Sie die Karussells anpassen und gestalten können.

Verbessern Sie die Benutzererfahrung mit einem Karussell

Mit einem Karussell können Sie Benutzern mehr Informationen zur Verfügung stellen und ihnen helfen, einfacher mit Ihrer Website zu interagieren. Karussells helfen auch dabei, die Seite organisiert und optisch ansprechend zu halten. Infolgedessen ist es eine großartige Möglichkeit, die Benutzererfahrung zu verbessern.

Sie können auch die Benutzerinteraktion mit Ihren Karussells verfolgen und die Daten zur Optimierung der Benutzererfahrung verwenden. Dies wird Ihnen helfen, eine bessere Benutzererfahrung auf Ihrer Website zu schaffen. Danach können Sie Ihre React-Anwendung kostenlos auf Plattformen wie Github-Seiten bereitstellen, was einfach und kostengünstig ist.