Hvordan bygge en interaktiv karusell i React.js

Hvordan bygge en interaktiv karusell i React.js
Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

React.js er et populært og kraftig JavaScript-bibliotek for å lage brukergrensesnitt. Du kan bruke den til å bygge dynamiske, interaktive og responsive nettapplikasjoner.





En av de vanlige komponentene du kan bruke med React.js er karusellen. Det er enkelt å gjøre, enten med innebygde React-funksjoner eller ved å bruke et tredjepartsbibliotek.



MAKEUSE AV DAGENS VIDEO

En karusell er en lysbildefremvisningskomponent som lar deg bla gjennom bilder eller videoer. Det brukes oftest på nettsteder for å vise frem produkter eller tjenester eller for å vise frem fremhevet innhold. Det er mange fordeler med å bruke en karusell, for eksempel:





  • Det er en effektiv måte å trekke oppmerksomhet til viktig innhold.
  • Det er en fin måte å vise frem flere bilder og videoer.
  • Det hjelper å holde siden organisert og visuelt tiltalende.
  • Du kan bruke den til å skape en interaktiv brukeropplevelse.

Å lage en karusell i React.js er relativt enkelt, og det er to populære biblioteker du kan bruke. Du kan også bruke innebygde React-funksjoner for å legge til en karusell.

Bruke innebygde funksjoner

Den første metoden for å lage en karusell i React.js er å bruke innebygde funksjoner. React gir en kraftig måte å lage en karusell ved å bruke komponenter. Du kan bruk React kroker for å legge til og kontrollere en karusell.



import React, { useState } from 'react';

const Carousel = () => {
const [index, setIndex] = useState(0);
const length = 3;

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

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

return (
<div className="carousel">
<button onClick={handlePrevious}>Previous</button>
<button onClick={handleNext}>Next</button>
<p>{index}</p>
</div>
);
};

export default Carousel;

Denne koden bruker useState-kroken for å lage en tilstandsvariabel kalt indeks. Dette vil holde styr på gjeldende posisjon i karusellen.

HandlePrevious og handleNext-funksjonene tar seg av oppdateringer av indeksverdien når brukeren klikker på Tidligere og Neste knapper.



Til slutt viser markeringen indeksverdien i en avsnittskode. Du kan vise bilder eller videoer i stedet for tekst hvis du vil. Du kan også style karusellen med vanlig CSS eller ved å bruke et CSS-rammeverk som Tailwind CSS .

Uten noen fancy styling, bør du se et grunnleggende par knapper og et tall som representerer gjeldende indeks:



reager app med karuseller ved hjelp av innebygde funksjoner

Den andre metoden for å lage en karusell i React.js er pure-react-carousel-biblioteket. Dette biblioteket gir en kraftig måte å lage en karusell med bruk av komponenter. For å bruke biblioteket må du først installere det ved å bruke kommandoen:

npm install pure-react-carousel

Når du har installert biblioteket, kan du bruke komponenten til å lage en karusell. Her er et eksempel på hvordan du bruker karusellkomponenten:

import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slider>
<Slide index={0}>Slide 1</Slide>
<Slide index={1}>Slide 2</Slide>
<Slide index={2}>Slide 3</Slide>
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
};

export default Carousel;

I denne koden kan du se at CarouselProvider-komponenten definerer de generelle innstillingene for karusellen, for eksempel naturalSlideWidth, naturalSlideHeight og totalSlides.

Slider-komponenten inneholder flere Slide-forekomster. Lysbilde-komponenten definerer hvert enkelt lysbilde.

Til slutt håndterer komponentene ButtonBack og ButtonNext karusellnavigering.

reager app med karuseller ved hjelp av pakke

Det er mange fordeler med å bruke pure-react-carousel-biblioteket, for eksempel:

  • Lett å bruke: Mens den innebygde metoden krever mer kode for å lage en karusell, gir biblioteket en enklere måte å lage en karusell i React.js.
  • Mottakelig: Biblioteket gir muligheten til å lage responsive karuseller. Med den innebygde metoden må du lage en egen karusell for forskjellige skjermstørrelser.
  • Tilpasning: Biblioteket har mange funksjoner som du kan bruke til å tilpasse karusellen, for eksempel autoavspilling, navigasjonspiler, paginering og mer.

Den siste metoden for å lage en karusell i React.js er react-responsive-carousel-biblioteket. Med dette biblioteket kan du lage en karusell med bruk av komponenter. For å bruke biblioteket må du først installere det ved å bruke kommandoen:

hvordan lage en video til en skjermsparer
npm install react-responsive-carousel

Når du har installert biblioteket, kan du bruke komponenten til å lage en karusell. Her er et eksempel på hvordan du bruker karusellkomponenten:

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
return (
<Carousel>
<div>
<img src="https://placehold.co/100x100" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
};

export default CarouselPage;

I denne koden kan du se at Karusell-komponenten definerer karusellen. Inne i Karusell-komponenten inneholder en div hvert enkelt lysbilde. Hvert lysbilde kan inneholde et bilde så vel som en forklaring for det bildet. Biblioteket gir også en rekke alternativer og innstillinger som du kan bruke til å tilpasse karusellen.

reager app med karuseller ved hjelp av pakke

Det er mange fordeler med å bruke react-responsive-carousel-biblioteket, for eksempel:

  • Et av de mest populære bibliotekene: Biblioteket er et av de mest populære bibliotekene for å lage karuseller i React.js. Så hvis du står fast, kan du enkelt finne hjelp fra fellesskapet.
  • Lett å bruke: Med bare noen få linjer med kode kan du enkelt lage en karusell.
  • Mottakelig: Biblioteket gir muligheten til å lage responsive karuseller.
  • Tilpasning: Biblioteket har også mange funksjoner som du kan bruke til å tilpasse og style karusellene.

Med en karusell kan du gi mer informasjon til brukerne og hjelpe dem til å samhandle med nettstedet ditt lettere. Karuseller bidrar også til å holde siden organisert og visuelt tiltalende. Som et resultat er det en fin måte å forbedre brukeropplevelsen på.

Du kan også spore brukerinteraksjon med karusellene dine og bruke dataene til å optimalisere brukeropplevelsen. Dette vil hjelpe deg å skape en bedre brukeropplevelse på nettstedet ditt. Etter det kan du distribuere React-applikasjonen din gratis på plattformer som Github-sider, noe som er enkelt og kostnadseffektivt.