Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

React.js is een populaire en krachtige JavaScript-bibliotheek voor het maken van gebruikersinterfaces. U kunt het gebruiken om dynamische, interactieve en responsieve webapplicaties te bouwen.

Een van de gemeenschappelijke componenten die u met React.js zou kunnen gebruiken, is de carrousel. Het is gemakkelijk te doen, met ingebouwde React-functies of met behulp van een bibliotheek van derden.

Wat is een carrousel en wat zijn de toepassingen ervan?

Een carrousel is een onderdeel van een diavoorstelling waarmee u door afbeeldingen of video's kunt bladeren. Het wordt meestal gebruikt op websites om producten of diensten onder de aandacht te brengen of om te pronken met uitgelichte inhoud. Het gebruik van een carrousel heeft veel voordelen, zoals:

  • Het is een effectieve manier om de aandacht te vestigen op belangrijke inhoud.
  • Het is een geweldige manier om meerdere afbeeldingen en video's te laten zien.
    • instagram viewer
  • Het helpt om de pagina georganiseerd en visueel aantrekkelijk te houden.
  • U kunt het gebruiken om een ​​interactieve gebruikerservaring te creëren.

Hoe maak je een carrousel in React.js

Het maken van een carrousel in React.js is relatief eenvoudig en er zijn twee populaire bibliotheken die je kunt gebruiken. U kunt ook ingebouwde React-functies gebruiken om een ​​carrousel toe te voegen.

Ingebouwde functies gebruiken

De eerste methode om een ​​carrousel in React.js te maken, is door gebruik te maken van ingebouwde functies. React biedt een krachtige manier om een ​​carrousel te maken door componenten te gebruiken. Jij kan gebruik React-hooks om een ​​carrousel toe te voegen en te besturen.

importeren Reageer, { useState } van 'Reageer';

const Carrousel = () => {
const [index, setIndex] = useState(0);
const lengte = 3;

const handvatVorige = () => {
const nieuweIndex = index - 1;
setIndex (nieuweIndex < 0? lengte - 1: nieuweIndex);
};

const handleNext = () => {
const nieuweIndex = index + 1;
setIndex (nieuweIndex >= lengte? 0: nieuweIndex);
};

opbrengst (
<div className="carrousel">
<knop onClick={handlePrevious}>Vorig</button>
<knop onClick={handleNext}>Volgende</button>
<P>{inhoudsopgave}</P>
</div>
);
};

exporterenstandaard Carrousel;

Deze code gebruikt de hook useState om een ​​state-variabele met de naam index te maken. Dit houdt de huidige positie in de carrousel bij.

De functies handlePrevious en handleNext zorgen voor updates van de indexwaarde wanneer de gebruiker op de Vorig En Volgende toetsen.

Ten slotte geeft de opmaak de indexwaarde weer in een paragraaftag. U kunt desgewenst afbeeldingen of video's weergeven in plaats van tekst. Je kunt de carrousel ook stylen met normale CSS of met behulp van een CSS-framework zoals Tailwind CSS.

Zonder enige fancy styling zou je een basispaar knoppen en een nummer moeten zien dat de huidige index vertegenwoordigt:

De pure-react-carrouselbibliotheek gebruiken

De tweede methode voor het maken van een carrousel in React.js is de pure-react-carousel-bibliotheek. Deze bibliotheek biedt een krachtige manier om een ​​carrousel te maken met behulp van componenten. Om de bibliotheek te gebruiken, moet u deze eerst installeren met behulp van de opdracht:

npm installeren pure-react-carrousel

Nadat u de bibliotheek hebt geïnstalleerd, kunt u de component gebruiken om een ​​carrousel te maken. Hier is een voorbeeld van het gebruik van de Carousel-component:

importeren Reageer van 'Reageer';
importeren { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } van 'puur-reageren-carrousel';
importeren 'pure-react-carousel/dist/react-carousel.es.css';

const Carrousel = () => {
opbrengst (
<CarrouselProvider
natuurlijkeSlideWidth={100}
natuurlijkeSlideHeight={120}
totalSlides={3}
>
<Schuifregelaar>
<Dia-index={0}>Schuif 1</Slide>
<Dia-index={1}>Schuif 2</Slide>
<Dia-index={2}>Schuif 3</Slide>
</Slider>
<KnopTerug>Rug</ButtonBack>
<KnopVolgende>Volgende</ButtonNext>
</CarouselProvider>
);
};

exporterenstandaard Carrousel;

In deze code kunt u zien dat de component CarouselProvider de algemene instellingen voor de carrousel definieert, zoals de naturalSlideWidth, naturalSlideHeight en totalSlides.

De component Slider bevat verschillende instanties van Slide. De component Dia definieert elke afzonderlijke dia.

Ten slotte zorgen de componenten ButtonBack en ButtonNext voor carrouselnavigatie.

Het gebruik van de pure-react-carousel-bibliotheek heeft veel voordelen, zoals:

  • Makkelijk te gebruiken: Hoewel de ingebouwde methode meer code vereist om een ​​carrousel te maken, biedt de bibliotheek een eenvoudigere manier om een ​​carrousel te maken in React.js.
  • Snel reagerend: De bibliotheek biedt de mogelijkheid om responsieve carrousels te maken. Met de ingebouwde methode zou je voor verschillende schermformaten een aparte carrousel moeten maken.
  • Maatwerk: De bibliotheek biedt veel functies die u kunt gebruiken om de carrousel aan te passen, zoals automatisch afspelen, navigatiepijlen, paginering en meer.

De reactie-responsieve-carrouselbibliotheek gebruiken

De laatste methode voor het maken van een carrousel in React.js is de reactie-responsieve-carrouselbibliotheek. Met deze bibliotheek kun je een carrousel maken met behulp van componenten. Om de bibliotheek te gebruiken, moet u deze eerst installeren met behulp van de opdracht:

npm installeren reageren-responsieve-carrousel

Nadat u de bibliotheek hebt geïnstalleerd, kunt u de component gebruiken om een ​​carrousel te maken. Hier is een voorbeeld van het gebruik van de Carousel-component:

importeren Reageer van 'Reageer';
importeren { Carrousel } van 'reageer-responsieve-carrousel';
importeren 'reactie-responsieve-carrousel/lib/styles/carousel.min.css';

const Carrouselpagina = () => {
opbrengst (
<Carrousel>
<div>
<img src="https://placehold.co/100x100" />
<p className="legende">Legende 1</P>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="legende">Legende 2</P>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="legende">Legende 3</P>
</div>
</Carousel>
);
};

exporterenstandaard CarrouselPagina;

In deze code kunt u zien dat de component Carousel de carrousel definieert. Binnen de component Carrousel bevat een div elke afzonderlijke dia. Elke dia kan zowel een afbeelding als een legenda voor die afbeelding bevatten. De bibliotheek biedt ook een reeks opties en instellingen die u kunt gebruiken om de carrousel aan te passen.

Het gebruik van de reactie-responsieve-carrouselbibliotheek heeft veel voordelen, zoals:

  • Een van de meest populaire bibliotheken: De bibliotheek is een van de meest populaire bibliotheken voor het maken van carrousels in React.js. Dus als je vastloopt, kun je gemakkelijk hulp van de community vinden.
  • Makkelijk te gebruiken: Met slechts een paar regels code maak je eenvoudig een carrousel.
  • Snel reagerend: De bibliotheek biedt de mogelijkheid om responsieve carrousels te maken.
  • Maatwerk: De bibliotheek biedt ook veel functies die u kunt gebruiken om de carrousels aan te passen en te stylen.

Verbeter de gebruikerservaring met een carrousel

Met een carrousel kunt u gebruikers meer informatie geven en hen helpen om gemakkelijker met uw website om te gaan. Carrousels helpen ook om de pagina georganiseerd en visueel aantrekkelijk te houden. Als gevolg hiervan is het een geweldige manier om de gebruikerservaring te verbeteren.

U kunt ook de gebruikersinteractie met uw carrousels volgen en de gegevens gebruiken om de gebruikerservaring te optimaliseren. Dit zal u helpen om een ​​betere gebruikerservaring op uw website te creëren. Daarna kunt u uw React-applicatie gratis implementeren op platforms zoals Github-pagina's, wat gemakkelijk en kosteneffectief is.