Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

React.js ir populāra un jaudīga JavaScript bibliotēka lietotāja saskarņu izveidei. Varat to izmantot, lai izveidotu dinamiskas, interaktīvas un atsaucīgas tīmekļa lietojumprogrammas.

Viens no izplatītākajiem komponentiem, ko varētu izmantot kopā ar React.js, ir karuselis. To ir viegli izdarīt, izmantojot iebūvētās React funkcijas vai trešās puses bibliotēku.

Kas ir karuselis un kādi ir tā lietojumi?

Karuselis ir slaidrādes komponents, kas ļauj pārlūkot attēlus vai videoklipus. To visbiežāk izmanto vietnēs, lai demonstrētu produktus vai pakalpojumus vai parādītu piedāvāto saturu. Karuseļa izmantošanai ir daudz priekšrocību, piemēram:

  • Tas ir efektīvs veids, kā pievērst uzmanību svarīgam saturam.
  • Tas ir lielisks veids, kā demonstrēt vairākus attēlus un videoklipus.
  • Tas palīdz uzturēt lapu sakārtotu un vizuāli pievilcīgu.
  • Varat to izmantot, lai izveidotu interaktīvu lietotāja pieredzi.
instagram viewer

Kā izveidot karuseli vietnē React.js

Karuseļa izveide programmā React.js ir salīdzinoši vienkārša, un varat izmantot divas populāras bibliotēkas. Varat arī izmantot iebūvētās React funkcijas, lai pievienotu karuseli.

Iebūvēto funkciju izmantošana

Pirmā karuseļa izveides metode programmā React.js ir iebūvēto līdzekļu izmantošana. React nodrošina jaudīgu veidu, kā izveidot karuseli, izmantojot komponentus. Jūs varat izmantojiet React āķus lai pievienotu un vadītu karuseli.

imports Reaģēt, { useState } no "reaģēt";

konst Karuselis = () => {
konst [index, setIndex] = useState(0);
konst garums = 3;

konst handPrevious = () => {
konst jaunsIndekss = indekss - 1;
setIndex (newIndex < 0? garums - 1: jaunsIndekss);
};

konst handNext = () => {
konst jaunsIndekss = indekss + 1;
setIndex (newIndex >= garums? 0: jaunsIndekss);
};

atgriezties (
<div klasesNosaukums="karuselis">
<poga onClick={handlePrevious}>Iepriekšējais</button>
<poga onClick={handleNext}>Nākamais</button>
<lpp>{index}</lpp>
</div>
);
};

eksportētnoklusējuma Karuselis;

Šis kods izmanto āķi useState, lai izveidotu stāvokļa mainīgo, ko sauc par indeksu. Tādējādi tiks sekots līdzi pašreizējai pozīcijai karuselī.

Funkcijas handlePrevious un handleNext rūpējas par indeksa vērtības atjauninājumiem, kad lietotājs noklikšķina uz Iepriekšējais un Nākamais pogas.

Visbeidzot, marķējums parāda indeksa vērtību rindkopas tagā. Ja vēlaties, teksta vietā varat parādīt attēlus vai videoklipus. Varat arī veidot karuseli, izmantojot parasto CSS vai izmantojot CSS ietvaru, piemēram, Tailwind CSS.

Bez izdomāta stila jums vajadzētu redzēt pamata pogu pāris un skaitli, kas attēlo pašreizējo indeksu:

Tīras reakcijas karuseļa bibliotēkas izmantošana

Otra karuseļa izveides metode programmā React.js ir tīra reakcijas karuseļa bibliotēka. Šī bibliotēka nodrošina jaudīgu veidu, kā izveidot karuseli, izmantojot komponentus. Lai izmantotu bibliotēku, vispirms tā jāinstalē, izmantojot komandu:

npm uzstādīt tīri reaģēt-karuselis

Kad esat instalējis bibliotēku, varat izmantot komponentu, lai izveidotu karuseli. Tālāk ir sniegts Karuseļa komponenta izmantošanas piemērs.

imports Reaģēt no "reaģēt";
imports { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } no "tīra reakcijas karuselis";
imports 'pure-react-carousel/dist/react-carousel.es.css';

konst Karuselis = () => {
atgriezties (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slīdnis>
<Slaidu rādītājs={0}>1. slaids</Slide>
<Slaidu rādītājs={1}>2. slaids</Slide>
<Slaidu rādītājs={2}>3. slaids</Slide>
</Slider>
<ButtonBack>Atpakaļ</ButtonBack>
<PogaTālāk>Nākamais</ButtonNext>
</CarouselProvider>
);
};

eksportētnoklusējuma Karuselis;

Šajā kodā var redzēt, ka komponents CarouselProvider definē karuseļa vispārīgos iestatījumus, piemēram, naturalSlideWidth, naturalSlideHeight un totalSlides.

Komponents Slīdnis satur vairākus slaidu gadījumus. Komponents Slaids nosaka katru atsevišķu slaidu.

Visbeidzot, komponenti ButtonBack un ButtonNext apstrādā karuseļa navigāciju.

Tīras reakcijas karuseļa bibliotēkas izmantošanai ir daudz priekšrocību, piemēram:

  • Viegli izmantot: Lai gan iebūvētajai metodei ir nepieciešams vairāk koda, lai izveidotu karuseli, bibliotēka nodrošina vienkāršāku veidu, kā izveidot karuseli pakalpojumā React.js.
  • Atsaucīgs: Bibliotēka nodrošina iespēju veidot atsaucīgus karuseļus. Izmantojot iebūvēto metodi, jums būtu jāizveido atsevišķs karuselis dažādiem ekrāna izmēriem.
  • Pielāgošana: Bibliotēka nodrošina daudzas funkcijas, kuras varat izmantot, lai pielāgotu karuseli, piemēram, automātiskā atskaņošana, navigācijas bultiņas, lappušu maiņa un citas.

Izmantojot reaģēt-reaģējošo karuseļa bibliotēku

Pēdējā karuseļa izveides metode programmā React.js ir react-responsive-carousel bibliotēka. Izmantojot šo bibliotēku, varat izveidot karuseli, izmantojot komponentus. Lai izmantotu bibliotēku, vispirms tā jāinstalē, izmantojot komandu:

npm uzstādīt reaģēt-atsaucoties-karuselis

Kad esat instalējis bibliotēku, varat izmantot komponentu, lai izveidotu karuseli. Tālāk ir sniegts Carousel komponenta izmantošanas piemērs.

imports Reaģēt no "reaģēt";
imports { Karuselis } no 'reaģēt-reaģējošs-karuselis';
imports 'react-responsive-carousel/lib/styles/carousel.min.css';

konst CarouselPage = () => {
atgriezties (
<Karuselis>
<div>
<img src="https://placehold.co/100x100" />
<p klasesNosaukums="leģenda">Leģenda 1</lpp>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p klasesNosaukums="leģenda">Leģenda 2</lpp>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p klasesNosaukums="leģenda">Leģenda 3</lpp>
</div>
</Carousel>
);
};

eksportētnoklusējuma CarouselPage;

Šajā kodā var redzēt, ka komponents Carousel definē karuseli. Karuseļa komponentā ir ietverts katrs atsevišķs slaids. Katrā slaidā var būt attēls, kā arī šī attēla leģenda. Bibliotēka piedāvā arī virkni iespēju un iestatījumu, ko varat izmantot, lai pielāgotu karuseli.

Reaģēt-reaģējošo karuseļa bibliotēkas izmantošanai ir daudz priekšrocību, piemēram:

  • Viena no populārākajām bibliotēkām: Bibliotēka ir viena no populārākajām bibliotēkām karuseļu veidošanai programmā React.js. Tātad, ja esat iestrēdzis, varat viegli atrast palīdzību no kopienas.
  • Viegli izmantot: Izmantojot tikai dažas koda rindiņas, varat viegli izveidot karuseli.
  • Atsaucīgs: Bibliotēka nodrošina iespēju veidot atsaucīgus karuseļus.
  • Pielāgošana: Bibliotēka nodrošina arī daudzas funkcijas, kuras varat izmantot, lai pielāgotu un veidotu karuseļus.

Uzlabojiet lietotāja pieredzi, izmantojot karuseli

Izmantojot karuseli, varat sniegt lietotājiem vairāk informācijas un palīdzēt viņiem vieglāk mijiedarboties ar jūsu vietni. Karuseļi arī palīdz uzturēt lapu sakārtotu un vizuāli pievilcīgu. Rezultātā tas ir lielisks veids, kā uzlabot lietotāja pieredzi.

Varat arī izsekot lietotāju mijiedarbībai ar saviem karuseļiem un izmantot datus, lai optimizētu lietotāja pieredzi. Tas palīdzēs jums izveidot labāku lietotāja pieredzi jūsu vietnē. Pēc tam jūs varat bez maksas izvietot savu React lietojumprogrammu tādās platformās kā Github lapas, kas ir vienkārši un rentabli.