Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

React.js er et populært og kraftfuldt JavaScript-bibliotek til at skabe brugergrænseflader. Du kan bruge det til at bygge dynamiske, interaktive og responsive webapplikationer.

En af de almindelige komponenter, du kan bruge med React.js, er karrusellen. Det er nemt at gøre, enten med indbyggede React-funktioner eller ved at bruge et tredjepartsbibliotek.

Hvad er en karrusel, og hvad er dens anvendelser?

En karrusel er en slideshow-komponent, der giver dig mulighed for at bladre gennem billeder eller videoer. Det bruges oftest på websteder til at fremvise produkter eller tjenester eller til at vise fremhævet indhold. Der er mange fordele ved at bruge en karrusel, såsom:

  • Det er en effektiv måde at gøre opmærksom på vigtigt indhold.
  • Det er en fantastisk måde at fremvise flere billeder og videoer på.
  • Det hjælper med at holde siden organiseret og visuelt tiltalende.
  • Du kan bruge det til at skabe en interaktiv brugeroplevelse.
instagram viewer

Sådan opretter du en karrusel i React.js

Det er relativt nemt at oprette en karrusel i React.js, og der er to populære biblioteker, som du kan bruge. Du kan også bruge indbyggede React-funktioner til at tilføje en karrusel.

Brug af indbyggede funktioner

Den første metode til at skabe en karrusel i React.js er at gøre brug af indbyggede funktioner. React giver en effektiv måde at skabe en karrusel ved at bruge komponenter. Du kan brug React kroge at tilføje og styre en karrusel.

importere Reager, { useState } fra 'reagere';

konst Karrusel = () => {
konst [indeks, sætIndex] = useState(0);
konst længde = 3;

konst handleForrige = () => {
konst newIndex = indeks - 1;
setIndex (newIndex < 0? længde - 1: newIndex);
};

konst handleNext = () => {
konst newIndex = indeks + 1;
setIndex (newIndex >= længde? 0: nyt indeks);
};

Vend tilbage (
<div klassenavn="karrusel">
<button onClick={handleForrige}>Tidligere</button>
<knap onClick={handleNext}>Næste</button>
<s>{indeks}</s>
</div>
);
};

eksportStandard Karrusel;

Denne kode bruger useState hook til at skabe en tilstandsvariabel kaldet index. Dette vil holde styr på den aktuelle position i karrusellen.

Funktionerne handlePrevious og handleNext sørger for opdateringer af indeksværdien, når brugeren klikker på Tidligere og Næste knapper.

Til sidst viser opmærkningen indeksværdien i et afsnitsmærke. Du kan vise billeder eller videoer i stedet for tekst, hvis du vil. Du kan også style karrusellen ved hjælp af normal CSS eller ved hjælp af en CSS-ramme som Tailwind CSS.

Uden nogen fancy styling bør du se et grundlæggende par knapper og et tal, der repræsenterer det aktuelle indeks:

Brug af det rene-reager-karruselbibliotek

Den anden metode til at skabe en karrusel i React.js er pure-react-carousel-biblioteket. Dette bibliotek giver en effektiv måde at skabe en karrusel ved hjælp af komponenter. For at bruge biblioteket skal du først installere det ved hjælp af kommandoen:

npm installere ren-reager-karrusel

Når du har installeret biblioteket, kan du bruge komponenten til at oprette en karrusel. Her er et eksempel på, hvordan du bruger Carousel-komponenten:

importere Reagere fra 'reagere';
importere { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } fra 'ren-reager-karrusel';
importere 'pure-react-carousel/dist/react-carousel.es.css';

konst Karrusel = () => {
Vend tilbage (
<Karruseludbyder
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Skyder>
<Diasindeks={0}>Slide 1</Slide>
<Diasindeks={1}>Slide 2</Slide>
<Diasindeks={2}>Slide 3</Slide>
</Slider>
<Knap Tilbage>Tilbage</ButtonBack>
<KnapNæste>Næste</ButtonNext>
</CarouselProvider>
);
};

eksportStandard Karrusel;

I denne kode kan du se, at CarouselProvider-komponenten definerer de generelle indstillinger for karrusellen, såsom naturalSlideWidth, naturalSlideHeight og totalSlides.

Slider-komponenten indeholder flere Slide-forekomster. Slide-komponenten definerer hvert enkelt slide.

Endelig håndterer ButtonBack- og ButtonNext-komponenterne karruselnavigation.

Der er mange fordele ved at bruge pure-react-carousel-biblioteket, såsom:

  • Let at bruge: Mens den indbyggede metode kræver mere kode for at skabe en karrusel, giver biblioteket en nemmere måde at oprette en karrusel i React.js.
  • Lydhør: Biblioteket giver mulighed for at skabe responsive karruseller. Med den indbyggede metode bliver du nødt til at oprette en separat karrusel til forskellige skærmstørrelser.
  • Tilpasning: Biblioteket indeholder mange funktioner, som du kan bruge til at tilpasse karrusellen, såsom autoplay, navigationspile, paginering og mere.

Brug af react-responsive-carousel Library

Den sidste metode til at oprette en karrusel i React.js er react-responsive-carousel-biblioteket. Med dette bibliotek kan du oprette en karrusel med brug af komponenter. For at bruge biblioteket skal du først installere det ved hjælp af kommandoen:

npm installere reagere-responsiv-karrusel

Når du har installeret biblioteket, kan du bruge komponenten til at oprette en karrusel. Her er et eksempel på, hvordan man bruger Carousel-komponenten:

importere Reagere fra 'reagere';
importere { Karrusel } fra 'reager-responsiv-karrusel';
importere 'react-responsive-carousel/lib/styles/carousel.min.css';

konst CarouselPage = () => {
Vend tilbage (
<Karrusel>
<div>
<img src="https://placehold.co/100x100" />
<p klassenavn="legende">Forklaring 1</s>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p klassenavn="legende">Forklaring 2</s>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p klassenavn="legende">Forklaring 3</s>
</div>
</Carousel>
);
};

eksportStandard CarouselPage;

I denne kode kan du se, at Karrusel-komponenten definerer karrusellen. Inde i Carousel-komponenten indeholder en div hvert enkelt dias. Hvert dias kan indeholde et billede såvel som en forklaring for det billede. Biblioteket giver også en række muligheder og indstillinger, som du kan bruge til at tilpasse karrusellen.

Der er mange fordele ved at bruge react-responsive-carousel-biblioteket, såsom:

  • Et af de mest populære biblioteker: Biblioteket er et af de mest populære biblioteker til at lave karruseller i React.js. Så hvis du er gået i stå, kan du nemt finde hjælp fra fællesskabet.
  • Let at bruge: Med kun et par linjer kode kan du nemt lave en karrusel.
  • Lydhør: Biblioteket giver mulighed for at skabe responsive karruseller.
  • Tilpasning: Biblioteket indeholder også mange funktioner, som du kan bruge til at tilpasse og style karrusellerne.

Forbedre brugeroplevelsen med en karrusel

Med en karrusel kan du give flere oplysninger til brugerne og hjælpe dem med at interagere med dit websted nemmere. Karruseller hjælper også med at holde siden organiseret og visuelt tiltalende. Som et resultat er det en fantastisk måde at forbedre brugeroplevelsen på.

Du kan også spore brugerinteraktion med dine karruseller og bruge dataene til at optimere brugeroplevelsen. Dette vil hjælpe dig med at skabe en bedre brugeroplevelse på din hjemmeside. Derefter kan du implementere din React-applikation gratis på platforme som Github-sider, hvilket er nemt og omkostningseffektivt.