Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

React.js je popularna i moćna JavaScript biblioteka za kreiranje korisničkih sučelja. Možete ga koristiti za izradu dinamičnih, interaktivnih i responzivnih web aplikacija.

Jedna od uobičajenih komponenti koju možete koristiti s React.js je vrtuljak. To je jednostavno učiniti, bilo s ugrađenim React značajkama ili korištenjem biblioteke treće strane.

Što je vrtuljak i čemu služi?

Vrtuljak je komponenta dijaprojekcije koja vam omogućuje kruženje kroz slike ili videozapise. Najčešće se koristi na web stranicama za predstavljanje proizvoda ili usluga ili za prikazivanje istaknutog sadržaja. Brojne su prednosti korištenja vrtuljka, kao što su:

  • To je učinkovit način privlačenja pozornosti na važan sadržaj.
  • To je sjajan način za prikazivanje više slika i videozapisa.
  • Pomaže održavati stranicu organiziranom i vizualno privlačnom.
  • Možete ga koristiti za stvaranje interaktivnog korisničkog iskustva.
instagram viewer

Kako stvoriti vrtuljak u React.js

Stvaranje vrtuljka u React.js relativno je jednostavno i postoje dvije popularne biblioteke koje možete koristiti. Također možete koristiti ugrađene React značajke za dodavanje vrtuljka.

Korištenje ugrađenih značajki

Prva metoda stvaranja vrtuljka u React.js je korištenje ugrađenih značajki. React pruža moćan način za stvaranje vrtuljka korištenjem komponenti. Možeš koristiti React kuke za dodavanje i upravljanje vrtuljkom.

uvoz Reagiraj, {useState} iz 'reagirati';

konst Vrtuljak = () => {
konst [index, setIndex] = useState(0);
konst duljina = 3;

konst handlePrethodni = () => {
konst noviIndeks = indeks - 1;
setIndex (noviIndex < 0? duljina - 1: newIndex);
};

konst handleNext = () => {
konst noviIndeks = indeks + 1;
setIndex (noviIndex >= duljina? 0: noviIndeks);
};

povratak (
<div className="karusel">
<gumb onClick={handlePrevious}>Prethodno</button>
<gumb onClick={handleNext}>Sljedeći</button>
<str>{indeks}</str>
</div>
);
};

izvozzadano Karusel;

Ovaj kod koristi kuku useState za stvaranje varijable stanja pod nazivom index. Ovo će pratiti trenutnu poziciju u karuselu.

Funkcije handlePrevious i handleNext brinu se o ažuriranju vrijednosti indeksa kada korisnik klikne na Prethodno i Sljedeći gumbi.

Konačno, markup prikazuje vrijednost indeksa u oznaci odlomka. Možete prikazati slike ili videozapise umjesto teksta ako želite. Također možete stilizirati vrtuljak koristeći uobičajeni CSS ili koristeći CSS okvir kao što je Tailwind CSS.

Bez ikakvog otmjenog stila, trebali biste vidjeti osnovni par gumba i broj koji predstavlja trenutni indeks:

Korištenje knjižnice pure-react-carousel

Druga metoda stvaranja vrtuljka u React.js je biblioteka pure-react-carousel. Ova biblioteka pruža moćan način za stvaranje vrtuljka pomoću komponenti. Da biste koristili biblioteku, prvo je morate instalirati pomoću naredbe:

npm instalirati čisti-reagirajte-vrtuljak

Nakon što instalirate biblioteku, možete koristiti komponentu za stvaranje vrtuljka. Evo primjera kako koristiti komponentu Carousel:

uvoz Reagirati iz 'reagirati';
uvoz { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } iz 'pure-react-carousel';
uvoz 'pure-react-carousel/dist/react-carousel.es.css';

konst Vrtuljak = () => {
povratak (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Klizač>
<Indeks slajda={0}>Slajd 1</Slide>
<Indeks slajdova={1}>Slajd 2</Slide>
<Indeks slajdova={2}>Slajd 3</Slide>
</Slider>
<ButtonBack>leđa</ButtonBack>
<Gumb Dalje>Sljedeći</ButtonNext>
</CarouselProvider>
);
};

izvozzadano Karusel;

U ovom kodu možete vidjeti da komponenta CarouselProvider definira opće postavke za vrtuljak kao što su naturalSlideWidth, naturalSlideHeight i totalSlides.

Komponenta Slider sadrži nekoliko instanci Slide. Komponenta Slajd definira svaki pojedinačni slajd.

Konačno, komponente ButtonBack i ButtonNext upravljaju navigacijom vrtuljkom.

Brojne su prednosti korištenja biblioteke pure-react-carousel kao što su:

  • Jednostavan za korištenje: Dok ugrađena metoda zahtijeva više koda za stvaranje vrtuljka, biblioteka pruža lakši način za stvaranje vrtuljka u React.js.
  • Uzvratni: Knjižnica pruža mogućnost stvaranja responzivnih karusela. Uz ugrađenu metodu, morali biste stvoriti zaseban vrtuljak za različite veličine zaslona.
  • Prilagodba: Knjižnica nudi mnoge značajke koje možete koristiti za prilagodbu vrtuljka kao što su automatska reprodukcija, navigacijske strelice, označavanje stranica i još mnogo toga.

Korištenje biblioteke react-responsive-carousel

Konačna metoda stvaranja vrtuljka u React.js je biblioteka react-responsive-carousel. Pomoću ove biblioteke možete stvoriti vrtuljak pomoću komponenti. Da biste koristili biblioteku, prvo je morate instalirati pomoću naredbe:

npm instalirati reagirati-odgovarati-vrtuljak

Nakon što instalirate biblioteku, možete koristiti komponentu za stvaranje vrtuljka. Evo primjera kako koristiti komponentu Carousel:

uvoz Reagirati iz 'reagirati';
uvoz {Vrtuljak} iz 'reagirati-odgovarati-vrtuljak';
uvoz 'react-responsive-carousel/lib/styles/carousel.min.css';

konst KaruselPage = () => {
povratak (
<Karusel>
<div>
<img src="https://placehold.co/100x100" />
<p naziv klase="legenda">Legenda 1</str>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p naziv klase="legenda">Legenda 2</str>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p naziv klase="legenda">Legenda 3</str>
</div>
</Carousel>
);
};

izvozzadano CarouselPage;

U ovom kodu možete vidjeti da komponenta vrtuljak definira vrtuljak. Unutar komponente vrtuljka, div sadrži svaki pojedinačni slajd. Svaki slajd može sadržavati sliku kao i legendu za tu sliku. Knjižnica također nudi niz opcija i postavki koje možete koristiti za prilagodbu vrtuljka.

Brojne su prednosti korištenja biblioteke react-responsive-carousel kao što su:

  • Jedna od najpopularnijih knjižnica: Biblioteka je jedna od najpopularnijih biblioteka za kreiranje karusela u React.js. Dakle, ako ste zapeli, lako možete pronaći pomoć zajednice.
  • Jednostavan za korištenje: Sa samo nekoliko redaka koda možete jednostavno stvoriti vrtuljak.
  • Uzvratni: Knjižnica pruža mogućnost stvaranja responzivnih karusela.
  • Prilagodba: Knjižnica također nudi mnoge značajke koje možete koristiti za prilagođavanje i stiliziranje karusela.

Poboljšajte korisničko iskustvo s vrtuljkom

S vrtuljkom možete pružiti više informacija korisnicima i pomoći im da lakše komuniciraju s vašim web mjestom. Vrtuljci također pomažu da stranica ostane organizirana i vizualno privlačna. Kao rezultat toga, to je izvrstan način za poboljšanje korisničkog iskustva.

Također možete pratiti korisničku interakciju sa svojim karuselima i koristiti podatke za optimizaciju korisničkog iskustva. To će vam pomoći da stvorite bolje korisničko iskustvo na svojoj web stranici. Nakon toga možete besplatno implementirati svoju React aplikaciju na platforme kao što su Github stranice, što je jednostavno i isplativo.