Kako zgraditi interaktivni vrtiljak v React.js

Kako zgraditi interaktivni vrtiljak v React.js
Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

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.



MAKEUSEOF VIDEO DNEVA

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:





kako preprečiti pregrevanje telefona
  • 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.

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.



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;

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:



reagirajte na aplikacijo z vrtiljaki z uporabo vgrajenih funkcij

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 install pure-react-carousel

Ko namestite knjižnico, lahko s komponento ustvarite vrtiljak. Tu je primer uporabe komponente Carousel:

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;

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.

reagirajte aplikacijo z vrtiljaki z uporabo paketa

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.

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 install react-responsive-carousel

Ko namestite knjižnico, lahko s komponento ustvarite vrtiljak. Tu je primer uporabe komponente Carousel:

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;

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.

reagirajte aplikacijo z vrtiljaki z uporabo paketa

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.

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.

netflix se naloži, vendar ne bo igral

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.