React.js je priljubljena in zmogljiva knjižnica JavaScript za ustvarjanje uporabniških vmesnikov. Uporabite ga lahko za izdelavo dinamičnih, interaktivnih in odzivnih spletnih aplikacij.
Ena od pogostih komponent, ki jih lahko uporabljate z React.js, je vrtiljak. To je preprosto narediti, bodisi z vgrajenimi funkcijami React ali z uporabo knjižnice tretje osebe.
Kaj je vrtiljak in kakšne so njegove uporabe?
Vrtiljak je komponenta diaprojekcije, ki vam omogoča kroženje med slikami ali videoposnetki. Najpogosteje se uporablja na spletnih mestih za predstavitev izdelkov ali storitev ali za razkazovanje predstavljene vsebine. Uporaba vrtiljaka ima številne prednosti, kot so:
- Je učinkovit način, da opozorite na pomembno vsebino.
- To je odličen način za predstavitev več slik in videoposnetkov.
- Pomaga ohranjati stran organizirano in vizualno privlačno.
- Uporabite ga lahko za ustvarjanje interaktivne uporabniške izkušnje.
Kako ustvariti vrtiljak v React.js
Ustvarjanje vrtiljaka v React.js je relativno enostavno in obstajata dve priljubljeni knjižnici, ki ju lahko uporabite. Za dodajanje vrtiljaka lahko uporabite tudi vgrajene funkcije React.
Uporaba vgrajenih funkcij
Prva metoda ustvarjanja vrtiljaka v React.js je uporaba vgrajenih funkcij. React ponuja zmogljiv način za ustvarjanje vrtiljaka z uporabo komponent. Ti lahko uporabite kljuke React za dodajanje in nadzor vrtiljaka.
uvoz Odziv, {useState} od 'reagirati';konst Vrtiljak = () => {
konst [index, setIndex] = useState(0);
konst dolžina = 3;
konst handlePrevious = () => {
konst newIndex = indeks - 1;
setIndex (newIndex < 0? dolžina - 1: newIndex);
};
konst handleNext = () => {
konst newIndex = indeks + 1;
setIndex (newIndex >= dolžina? 0: novIndeks);
};
vrnitev (
<div className="vrtiljak">
<gumb onClick={handlePrevious}>Prejšnja</button>
<gumb onClick={handleNext}>Naslednji</button>
<str>{index}</str>
</div>
);
};
izvozprivzeto vrtiljak;
Ta koda uporablja kljuko useState za ustvarjanje spremenljivke stanja, imenovane index. To bo spremljalo trenutni položaj v vrtiljaku.
Funkciji handlePrevious in handleNext poskrbita za posodobitev vrednosti indeksa, ko uporabnik klikne Prejšnja in Naslednji gumbi.
Končno oznaka prikaže vrednost indeksa v oznaki odstavka. Če želite, lahko namesto besedila prikažete slike ali videoposnetke. Vrtiljak lahko oblikujete tudi z običajnim CSS oz z uporabo ogrodja CSS, kot je Tailwind CSS.
Brez modnega sloga bi morali videti osnovni par gumbov in številko, ki predstavlja trenutni indeks:
Uporaba knjižnice pure-react-carousel
Druga metoda ustvarjanja vrtiljaka v React.js je knjižnica pure-react-carousel. Ta knjižnica ponuja zmogljiv način za ustvarjanje vrtiljaka z uporabo komponent. Če želite uporabljati knjižnico, jo morate najprej namestiti z ukazom:
npm namestite pure-react-caruselKo namestite knjižnico, lahko s komponento ustvarite vrtiljak. Tu je primer uporabe komponente Carousel:
uvoz Reagiraj od 'reagirati';
uvoz { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } od 'pure-react-carousel';
uvoz 'pure-react-carousel/dist/react-carousel.es.css';konst Vrtiljak = () => {
vrnitev (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Drsnik>
<Indeks diapozitiva={0}>Diapozitiv 1</Slide>
<Indeks diapozitiva={1}>Diapozitiv 2</Slide>
<Indeks diapozitiva={2}>Diapozitiv 3</Slide>
</Slider>
<ButtonBack>Nazaj</ButtonBack>
<GumbNaprej>Naslednji</ButtonNext>
</CarouselProvider>
);
};
izvozprivzeto vrtiljak;
V tej kodi lahko vidite, da komponenta CarouselProvider definira splošne nastavitve za vrtiljak, kot so naturalSlideWidth, naturalSlideHeight in totalSlides.
Komponenta Slider vsebuje več primerkov Slide. Komponenta Slide definira vsak posamezen diapozitiv.
Končno komponenti ButtonBack in ButtonNext upravljata navigacijo z vrtiljakom.
Uporaba knjižnice pure-react-carousel ima številne prednosti, kot so:
- Enostaven za uporabo: Medtem ko vgrajena metoda zahteva več kode za ustvarjanje vrtiljaka, knjižnica ponuja lažji način za ustvarjanje vrtiljaka v React.js.
- Odziven: Knjižnica omogoča ustvarjanje odzivnih vrtiljakov. Z vgrajeno metodo bi morali ustvariti ločen vrtiljak za različne velikosti zaslona.
- Prilagajanje: Knjižnica ponuja številne funkcije, s katerimi lahko prilagodite vrtiljak, kot so samodejno predvajanje, navigacijske puščice, označevanje strani in drugo.
Uporaba knjižnice react-responsive-carousel Library
Zadnja metoda ustvarjanja vrtiljaka v React.js je knjižnica react-responsive-carousel. S to knjižnico lahko ustvarite vrtiljak z uporabo komponent. Če želite uporabljati knjižnico, jo morate najprej namestiti z ukazom:
npm namestite odzivni-odzivni-vrtiljakKo namestite knjižnico, lahko s komponento ustvarite vrtiljak. Tu je primer uporabe komponente Carousel:
uvoz Reagiraj od 'reagirati';
uvoz { Vrtiljak } od 'react-responsive-carusel';
uvoz 'react-responsive-carousel/lib/styles/carousel.min.css';konst CarouselPage = () => {
vrnitev (
<Vrtiljak>
<div>
<img src="https://placehold.co/100x100" />
<p ime razreda="legenda">Legenda 1</str>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p ime razreda="legenda">Legenda 2</str>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p ime razreda="legenda">Legenda 3</str>
</div>
</Carousel>
);
};
izvozprivzeto CarouselPage;
V tej kodi lahko vidite, da komponenta Carousel definira vrtiljak. Znotraj komponente Carousel element div vsebuje vsak posamezen diapozitiv. Vsak diapozitiv lahko vsebuje sliko in legendo za to sliko. Knjižnica ponuja tudi vrsto možnosti in nastavitev, s katerimi lahko prilagodite vrtiljak.
Uporaba knjižnice react-responsive-carusel ima številne prednosti, kot so:
- Ena najbolj priljubljenih knjižnic: Knjižnica je ena najbolj priljubljenih knjižnic za ustvarjanje vrtiljakov v React.js. Torej, če se vam je zataknilo, lahko preprosto poiščete pomoč skupnosti.
- Enostaven za uporabo: Z le nekaj vrsticami kode lahko preprosto ustvarite vrtiljak.
- Odziven: Knjižnica omogoča ustvarjanje odzivnih vrtiljakov.
- Prilagajanje: Knjižnica ponuja tudi številne funkcije, ki jih lahko uporabite za prilagajanje in oblikovanje vrtiljakov.
Izboljšajte uporabniško izkušnjo z vrtiljakom
Z vrtiljakom lahko uporabnikom zagotovite več informacij in jim pomagate pri lažji interakciji z vašim spletnim mestom. Vrtiljaki tudi pomagajo, da je stran organizirana in vizualno privlačna. Posledično je to odličen način za izboljšanje uporabniške izkušnje.
Prav tako lahko sledite interakciji uporabnikov z vrtiljaki in uporabite podatke za optimizacijo uporabniške izkušnje. To vam bo pomagalo ustvariti boljšo uporabniško izkušnjo na vaši spletni strani. Po tem lahko svojo aplikacijo React brezplačno namestite na platforme, kot so strani Github, kar je preprosto in stroškovno učinkovito.
