Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

React.js är ett populärt och kraftfullt JavaScript-bibliotek för att skapa användargränssnitt. Du kan använda den för att bygga dynamiska, interaktiva och responsiva webbapplikationer.

En av de vanligaste komponenterna du kan använda med React.js är karusellen. Det är enkelt att göra, antingen med inbyggda React-funktioner eller genom att använda ett tredjepartsbibliotek.

Vad är en karusell och vad är dess användningsområden?

En karusell är en bildspelskomponent som låter dig bläddra genom bilder eller videor. Det används oftast på webbplatser för att visa upp produkter eller tjänster eller för att visa upp utvalt innehåll. Det finns många fördelar med att använda en karusell, till exempel:

  • Det är ett effektivt sätt att uppmärksamma viktigt innehåll.
  • Det är ett bra sätt att visa upp flera bilder och videor.
  • Det hjälper till att hålla sidan organiserad och visuellt tilltalande.
    • instagram viewer
  • Du kan använda den för att skapa en interaktiv användarupplevelse.

Hur man skapar en karusell i React.js

Att skapa en karusell i React.js är relativt enkelt och det finns två populära bibliotek som du kan använda. Du kan också använda inbyggda React-funktioner för att lägga till en karusell.

Använda inbyggda funktioner

Den första metoden för att skapa en karusell i React.js är att använda sig av inbyggda funktioner. React ger ett kraftfullt sätt att skapa en karusell genom att använda komponenter. Du kan använd React-krokar för att lägga till och styra en karusell.

importera Reagera, { useState } från 'reagera';

konst Karusell = () => {
konst [index, setIndex] = useState(0);
konst längd = 3;

konst handlePrevious = () => {
konst newIndex = index - 1;
setIndex (newIndex < 0? längd - 1: newIndex);
};

konst handleNext = () => {
konst newIndex = index + 1;
setIndex (newIndex >= längd? 0: newIndex);
};

lämna tillbaka (
<div className="karusell">
<button onClick={handlePrevious}>Tidigare</button>
<button onClick={handleNext}>Nästa</button>
<sid>{index}</s>
</div>
);
};

exporterastandard Karusell;

Den här koden använder useState-kroken för att skapa en tillståndsvariabel som kallas index. Detta kommer att hålla reda på den aktuella positionen i karusellen.

Funktionerna handlePrevious och handleNext tar hand om uppdateringar av indexvärdet när användaren klickar på Tidigare och Nästa knappar.

Slutligen visar uppmärkningen indexvärdet i en stycketagg. Du kan visa bilder eller videor istället för text om du vill. Du kan också styla karusellen med vanlig CSS eller använder ett CSS-ramverk som Tailwind CSS.

Utan någon snygg stil bör du se ett par grundläggande knappar och ett nummer som representerar det aktuella indexet:

Använder Pure-react-carousel Library

Den andra metoden för att skapa en karusell i React.js är biblioteket pure-react-carousel. Detta bibliotek ger ett kraftfullt sätt att skapa en karusell med hjälp av komponenter. För att använda biblioteket måste du först installera det med kommandot:

npm Installera ren-reagera-karusell

När du har installerat biblioteket kan du använda komponenten för att skapa en karusell. Här är ett exempel på hur du använder karusellkomponenten:

importera Reagera från 'reagera';
importera { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } från 'ren-reagera-karusell';
importera 'pure-react-carousel/dist/react-carousel.es.css';

konst Karusell = () => {
lämna tillbaka (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Skjutreglage>
<Bildindex={0}>Bild 1</Slide>
<Bildindex={1}>Bild 2</Slide>
<Bildindex={2}>Bild 3</Slide>
</Slider>
<ButtonBack>Tillbaka</ButtonBack>
<KnappNästa>Nästa</ButtonNext>
</CarouselProvider>
);
};

exporterastandard Karusell;

I den här koden kan du se att CarouselProvider-komponenten definierar de allmänna inställningarna för karusellen som naturalSlideWidth, naturalSlideHeight och totalSlides.

Slider-komponenten innehåller flera Slide-instanser. Slide-komponenten definierar varje enskild bild.

Slutligen hanterar komponenterna ButtonBack och ButtonNext karusellnavigering.

Det finns många fördelar med att använda pure-react-carousel-biblioteket som:

  • Lätt att använda: Medan den inbyggda metoden kräver mer kod för att skapa en karusell, erbjuder biblioteket ett enklare sätt att skapa en karusell i React.js.
  • Mottaglig: Biblioteket ger möjlighet att skapa responsiva karuseller. Med den inbyggda metoden skulle du behöva skapa en separat karusell för olika skärmstorlekar.
  • Anpassning: Biblioteket tillhandahåller många funktioner som du kan använda för att anpassa karusellen, såsom autoplay, navigeringspilar, sidnumrering och mer.

Använder react-responsive-carousel Library

Den sista metoden för att skapa en karusell i React.js är react-responsive-carousel-biblioteket. Med detta bibliotek kan du skapa en karusell med hjälp av komponenter. För att använda biblioteket måste du först installera det med kommandot:

npm Installera reagera-responsiv-karusell

När du har installerat biblioteket kan du använda komponenten för att skapa en karusell. Här är ett exempel på hur man använder karusellkomponenten:

importera Reagera från 'reagera';
importera { Karusell } från 'reagera-responsiv-karusell';
importera 'react-responsive-carousel/lib/styles/carousel.min.css';

konst CarouselPage = () => {
lämna tillbaka (
<Karusell>
<div>
<img src="https://placehold.co/100x100" />
<p klassnamn="legend">Legend 1</s>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p klassnamn="legend">Legend 2</s>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p klassnamn="legend">Legend 3</s>
</div>
</Carousel>
);
};

exporterastandard CarouselPage;

I den här koden kan du se att karusellkomponenten definierar karusellen. Inuti karusellkomponenten innehåller en div varje enskild bild. Varje bild kan innehålla en bild såväl som en förklaring för den bilden. Biblioteket erbjuder också en rad alternativ och inställningar som du kan använda för att anpassa karusellen.

Det finns många fördelar med att använda react-responsive-carousel-biblioteket som:

  • Ett av de mest populära biblioteken: Biblioteket är ett av de mest populära biblioteken för att skapa karuseller i React.js. Så om du har fastnat kan du enkelt hitta hjälp från samhället.
  • Lätt att använda: Med bara några rader kod kan du enkelt skapa en karusell.
  • Mottaglig: Biblioteket ger möjlighet att skapa responsiva karuseller.
  • Anpassning: Biblioteket har också många funktioner som du kan använda för att anpassa och styla karusellerna.

Förbättra användarupplevelsen med en karusell

Med en karusell kan du ge mer information till användarna och hjälpa dem att lättare interagera med din webbplats. Karuseller hjälper också till att hålla sidan organiserad och visuellt tilltalande. Som ett resultat är det ett utmärkt sätt att förbättra användarupplevelsen.

Du kan också spåra användarinteraktion med dina karuseller och använda data för att optimera användarupplevelsen. Detta kommer att hjälpa dig att skapa en bättre användarupplevelse på din webbplats. Efter det kan du distribuera din React-applikation gratis på plattformar som Github-sidor vilket är enkelt och kostnadseffektivt.