Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

React.js on populaarne ja võimas JavaScripti teek kasutajaliideste loomiseks. Saate seda kasutada dünaamiliste, interaktiivsete ja tundlike veebirakenduste loomiseks.

Üks levinumaid komponente, mida saate React.js-iga kasutada, on karussell. Seda on lihtne teha kas sisseehitatud Reacti funktsioonide või kolmanda osapoole teegi abil.

Mis on karussell ja millised on selle kasutusalad?

Karussell on slaidiseansi komponent, mis võimaldab teil liikuda piltide või videote vahel. Seda kasutatakse kõige sagedamini veebisaitidel toodete või teenuste esitlemiseks või esiletoodud sisu näitamiseks. Karusselli kasutamisel on palju eeliseid, näiteks:

  • See on tõhus viis juhtida tähelepanu olulisele sisule.
  • See on suurepärane viis mitme pildi ja video esitlemiseks.
  • See aitab hoida lehte korrastatuna ja visuaalselt atraktiivsena.
  • Saate seda kasutada interaktiivse kasutajakogemuse loomiseks.

Karusselli loomine rakenduses React.js

Karusselli loomine rakenduses React.js on suhteliselt lihtne ja seal on kaks populaarset teeki, mida saate kasutada. Karusselli lisamiseks saate kasutada ka sisseehitatud Reacti funktsioone.

Sisseehitatud funktsioonide kasutamine

Esimene meetod karusselli loomiseks rakenduses React.js on sisseehitatud funktsioonide kasutamine. React pakub komponentide abil võimsat viisi karusselli loomiseks. Sa saad kasutage Reacti konkse karusselli lisamiseks ja juhtimiseks.

importida Reageerige, { useState } alates 'reageerida';

konst Karussell = () => {
konst [index, setIndex] = useState(0);
konst pikkus = 3;

konst käepideEelmine = () => {
konst uusIndeks = indeks - 1;
setIndex (newIndex < 0? pikkus - 1: uusIndeks);
};

konst handNext = () => {
konst uusIndeks = indeks + 1;
setIndex (newIndex >= pikkus? 0: uusindeks);
};

tagasi (
<div klassiNimi="karussell">
<nupp onClick={handlePrevious}>Eelmine</button>
<nupp onClick={handleNext}>Edasi</button>
<lk>{indeks}</lk>
</div>
);
};

eksportidavaikimisi Karussell;

See kood kasutab konksu useState, et luua olekumuutuja nimega indeks. See jälgib karusselli praegust asukohta.

Funktsioonid handlePrevious ja handleNext hoolitsevad indeksi väärtuse värskenduste eest, kui kasutaja klõpsab Eelmine ja Edasi nupud.

Lõpuks kuvab märgistus lõigusildis indeksi väärtuse. Soovi korral saate teksti asemel kuvada pilte või videoid. Samuti saate karusselli stiilida kasutades tavalist CSS-i või kasutades CSS-i raamistikku nagu Tailwind CSS.

Ilma väljamõeldud stiilita peaksite nägema põhilist nuppude paari ja numbrit, mis esindavad praegust registrit:

Pure-react-carousell Library kasutamine

Teine meetod karusselli loomiseks rakenduses React.js on puhas-react-karusselli teek. See teek pakub võimsa viisi komponentide abil karusselli loomiseks. Teegi kasutamiseks peate selle esmalt installima käsuga:

npm installida puhas-reageeri-karussell

Kui olete teegi installinud, saate seda komponenti kasutada karusselli loomiseks. Siin on näide karusselli komponendi kasutamise kohta.

importida Reageerige alates 'reageerida';
importida { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } alates 'puhas-reageeri-karussell';
importida 'pure-react-carousel/dist/react-carousel.es.css';

konst Karussell = () => {
tagasi (
<CarousellProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Liugur>
<Slaidi register={0}>Slaid 1</Slide>
<Slaidi register={1}>Slaid 2</Slide>
<Slaidi register={2}>Slaid 3</Slide>
</Slider>
<ButtonBack>tagasi</ButtonBack>
<NuppJärgmine>Edasi</ButtonNext>
</CarouselProvider>
);
};

eksportidavaikimisi Karussell;

Selles koodis näete, et komponent CarouselProvider määrab karusselli üldised sätted, nagu naturalSlideWidth, naturalSlideHeight ja totalSlides.

Slideri komponent sisaldab mitut slaidi eksemplari. Slaidi komponent määratleb iga üksiku slaidi.

Lõpuks juhivad komponendid ButtonBack ja ButtonNext karussellnavigeerimist.

Puhta reageerimiskarussellteegi kasutamisel on palju eeliseid, näiteks:

  • Lihtne kasutada: Kui sisseehitatud meetod nõuab karusselli loomiseks rohkem koodi, pakub teek rakenduses React.js karusselli loomiseks lihtsamat viisi.
  • Vastupidav: Raamatukogu annab võimaluse luua reageerivaid karusselle. Sisseehitatud meetodi puhul peaksite looma erinevate ekraanisuuruste jaoks eraldi karusselli.
  • Kohandamine: Teek pakub palju funktsioone, mida saate kasutada karusselli kohandamiseks, näiteks automaatesitus, navigeerimisnooled, lehekülgede jagamine ja palju muud.

Reageerimis-reageeriva karussellteegi kasutamine

Viimane meetod karusselli loomiseks rakenduses React.js on reageerida reageeriv karusselli teek. Selle teegi abil saate komponentide abil luua karusselli. Teegi kasutamiseks peate selle esmalt installima käsuga:

npm installida reageeri-reageeri-karussell

Kui olete teegi installinud, saate seda komponenti kasutada karusselli loomiseks. Siin on näide karusselli komponendi kasutamisest.

importida Reageerige alates 'reageerida';
importida { karussell } alates 'reageer-responsive-carusell';
importida 'react-responsive-carousel/lib/styles/carousel.min.css';

konst CarouselPage = () => {
tagasi (
<Karussell>
<div>
<img src="https://placehold.co/100x100" />
<p klassiNimi="legend">Legend 1</lk>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p klassiNimi="legend">Legend 2</lk>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p klassiNimi="legend">Legend 3</lk>
</div>
</Carousel>
);
};

eksportidavaikimisi CarousellPage;

Selles koodis näete, et komponent Karussell määratleb karusselli. Karusselli komponendi sees sisaldab iga üksikut slaidi div. Iga slaid võib sisaldada nii pilti kui ka selle pildi legendi. Teek pakub ka erinevaid valikuid ja sätteid, mida saate karusselli kohandamiseks kasutada.

Reageeriva karussellteegi kasutamisel on palju eeliseid, näiteks:

  • Üks populaarsemaid raamatukogusid: Teek on üks populaarsemaid teeke rakenduses React.js karussellide loomiseks. Nii et kui jääte jänni, leiate kogukonnalt hõlpsalt abi.
  • Lihtne kasutada: Vaid mõne koodirea abil saate hõlpsasti karusselli luua.
  • Vastupidav: Raamatukogu annab võimaluse luua reageerivaid karusselle.
  • Kohandamine: Teegis on ka palju funktsioone, mida saate kasutada karussellide kohandamiseks ja stiiliks.

Parandage karusselliga kasutajakogemust

Karusselli abil saate pakkuda kasutajatele rohkem teavet ja aidata neil teie veebisaidiga hõlpsamini suhelda. Samuti aitavad karussellid hoida lehte korrastatuna ja visuaalselt atraktiivsena. Selle tulemusena on see suurepärane viis kasutajakogemuse parandamiseks.

Samuti saate jälgida kasutajate suhtlust oma karussellidega ja kasutada andmeid kasutajakogemuse optimeerimiseks. See aitab teil luua oma veebisaidil parema kasutuskogemuse. Pärast seda saate oma Reacti rakenduse tasuta juurutada sellistel platvormidel nagu Githubi lehed, mis on lihtne ja kulutõhus.