Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

React.js este o bibliotecă JavaScript populară și puternică pentru crearea de interfețe cu utilizatorul. Îl puteți folosi pentru a crea aplicații web dinamice, interactive și receptive.

Una dintre componentele comune pe care le-ați putea folosi cu React.js este caruselul. Este ușor de făcut, fie cu funcțiile React încorporate, fie folosind o bibliotecă terță parte.

Ce este un carusel și care sunt utilizările lui?

Un carusel este o componentă de prezentare de diapozitive care vă permite să parcurgeți imagini sau videoclipuri. Este cel mai frecvent utilizat pe site-uri web pentru a prezenta produse sau servicii sau pentru a prezenta conținutul prezentat. Există multe beneficii ale folosirii unui carusel, cum ar fi:

  • Este o modalitate eficientă de a atrage atenția asupra conținutului important.
  • Este o modalitate excelentă de a prezenta mai multe imagini și videoclipuri.
    • instagram viewer
  • Ajută la menținerea paginii organizate și atrăgătoare din punct de vedere vizual.
  • Îl puteți folosi pentru a crea o experiență de utilizator interactivă.

Cum se creează un carusel în React.js

Crearea unui carusel în React.js este relativ ușoară și există două biblioteci populare pe care le puteți utiliza. De asemenea, puteți utiliza funcțiile React încorporate pentru a adăuga un carusel.

Utilizarea caracteristicilor încorporate

Prima metodă de a crea un carusel în React.js este să utilizați funcțiile încorporate. React oferă o modalitate puternică de a crea un carusel folosind componente. Puteți utilizați cârlige React pentru a adăuga și controla un carusel.

import Reacționează, { useState } din 'reacţiona';

const Carusel = () => {
const [index, setIndex] = useState(0);
const lungime = 3;

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

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

întoarcere (
<div className="carusel">
<button onClick={handlePrevious}>Anterior</button>
<butonul onClick={handleNext}>Următorul</button>
<p>{index}</p>
</div>
);
};

exportMod implicit Carusel;

Acest cod folosește cârligul useState pentru a crea o variabilă de stare numită index. Aceasta va ține evidența poziției curente în carusel.

Funcțiile handlePrevious și handleNext se ocupă de actualizările valorii indexului atunci când utilizatorul face clic pe Anterior și Următorul butoane.

În cele din urmă, marcajul afișează valoarea indexului într-o etichetă de paragraf. Dacă doriți, puteți afișa imagini sau videoclipuri în loc de text. De asemenea, puteți stila caruselul folosind CSS normal sau folosind un cadru CSS precum Tailwind CSS.

Fără un stil elegant, ar trebui să vedeți o pereche de butoane de bază și un număr reprezentând indexul curent:

Folosind biblioteca pur-react-carusel

A doua metodă de a crea un carusel în React.js este biblioteca pur-react-carusel. Această bibliotecă oferă o modalitate puternică de a crea un carusel cu utilizarea componentelor. Pentru a utiliza biblioteca, mai întâi trebuie să o instalați folosind comanda:

npm instalare pur-react-carusel

După ce ați instalat biblioteca, puteți utiliza componenta pentru a crea un carusel. Iată un exemplu despre cum să utilizați componenta Carusel:

import Reacţiona din 'reacţiona';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } din „carusel-pur-reacție”;
import 'pur-react-carusel/dist/react-carousel.es.css';

const Carusel = () => {
întoarcere (
<CaruselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Glisor>
<Index de diapozitive={0}>Slide 1</Slide>
<Index de diapozitive={1}>Slide 2</Slide>
<Slide index={2}>Slide 3</Slide>
</Slider>
<ButtonBack>Înapoi</ButtonBack>
<ButtonNext>Următorul</ButtonNext>
</CarouselProvider>
);
};

exportMod implicit Carusel;

În acest cod, puteți vedea că componenta CarouselProvider definește setările generale pentru carusel, cum ar fi naturalSlideWidth, naturalSlideHeight și totalSlides.

Componenta Slider conține mai multe instanțe Slide. Componenta Slide definește fiecare diapozitiv individual.

În cele din urmă, componentele ButtonBack și ButtonNext se ocupă de navigarea în carusel.

Există multe avantaje în utilizarea bibliotecii pur-react-carusel, cum ar fi:

  • Ușor de folosit: În timp ce metoda încorporată necesită mai mult cod pentru a crea un carusel, biblioteca oferă o modalitate mai ușoară de a crea un carusel în React.js.
  • Reactiv: Biblioteca oferă posibilitatea de a crea carusele receptive. Cu metoda încorporată, ar trebui să creați un carusel separat pentru diferite dimensiuni de ecran.
  • Personalizare: Biblioteca oferă multe funcții pe care le puteți utiliza pentru a personaliza caruselul, cum ar fi redarea automată, săgețile de navigare, paginarea și multe altele.

Folosind biblioteca carusel-responsive-reacție

Metoda finală de a crea un carusel în React.js este biblioteca de carusel react-responsive. Cu această bibliotecă, puteți crea un carusel cu utilizarea componentelor. Pentru a utiliza biblioteca, mai întâi trebuie să o instalați folosind comanda:

npm instalare carusel-responsive-reacție

După ce ați instalat biblioteca, puteți utiliza componenta pentru a crea un carusel. Iată un exemplu de utilizare a componentei Carusel:

import Reacţiona din 'reacţiona';
import { Carusel } din 'carusel-reactiv-responsiv';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

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

exportMod implicit CarouselPage;

În acest cod, puteți vedea că componenta Carusel definește caruselul. În interiorul componentei Carusel, un div conține fiecare diapozitiv individual. Fiecare diapozitiv poate conține o imagine, precum și o legendă pentru imaginea respectivă. Biblioteca oferă, de asemenea, o serie de opțiuni și setări pe care le puteți utiliza pentru a personaliza caruselul.

Există multe beneficii ale utilizării bibliotecii carusel receptiv la reacții, cum ar fi:

  • Una dintre cele mai populare biblioteci: Biblioteca este una dintre cele mai populare biblioteci pentru crearea de carusele în React.js. Deci, dacă ați rămas blocat, puteți găsi cu ușurință ajutor de la comunitate.
  • Ușor de folosit: Cu doar câteva linii de cod, puteți crea cu ușurință un carusel.
  • Reactiv: Biblioteca oferă posibilitatea de a crea carusele receptive.
  • Personalizare: Biblioteca oferă, de asemenea, multe funcții pe care le puteți utiliza pentru a personaliza și stiliza caruselurile.

Îmbunătățiți experiența utilizatorului cu un carusel

Cu un carusel, puteți oferi mai multe informații utilizatorilor și îi puteți ajuta să interacționeze mai ușor cu site-ul dvs. web. Caruselurile ajută, de asemenea, la menținerea paginii organizate și atrăgătoare din punct de vedere vizual. Drept urmare, este o modalitate excelentă de a îmbunătăți experiența utilizatorului.

De asemenea, puteți urmări interacțiunea utilizatorului cu caruselele dvs. și puteți utiliza datele pentru a optimiza experiența utilizatorului. Acest lucru vă va ajuta să creați o experiență de utilizator mai bună pe site-ul dvs. După aceea, puteți implementa aplicația React gratuit pe platforme precum paginile Github, ceea ce este ușor și rentabil.