Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

React.js on suosittu ja tehokas JavaScript-kirjasto käyttöliittymien luomiseen. Voit käyttää sitä dynaamisten, interaktiivisten ja reagoivien verkkosovellusten rakentamiseen.

Yksi yleisimmistä osista, joita saatat käyttää React.js: n kanssa, on karuselli. Se on helppo tehdä joko sisäänrakennetuilla React-ominaisuuksilla tai käyttämällä kolmannen osapuolen kirjastoa.

Mikä on karuselli ja mitkä ovat sen käyttötarkoitukset?

Karuselli on diaesityskomponentti, jonka avulla voit selata kuvia tai videoita. Sitä käytetään yleisimmin verkkosivustoilla esittelemään tuotteita tai palveluita tai esittelemään esiteltyä sisältöä. Karusellin käytössä on monia etuja, kuten:

  • Se on tehokas tapa kiinnittää huomiota tärkeään sisältöön.
  • Se on loistava tapa esitellä useita kuvia ja videoita.
  • Se auttaa pitämään sivun järjestyksessä ja visuaalisesti houkuttelevana.
  • Voit käyttää sitä interaktiivisen käyttökokemuksen luomiseen.
instagram viewer

Karusellin luominen React.js: ssä

Karusellin luominen React.js: ssä on suhteellisen helppoa, ja voit käyttää kahta suosittua kirjastoa. Voit myös lisätä karusellin käyttämällä sisäänrakennettuja React-ominaisuuksia.

Sisäänrakennettujen ominaisuuksien käyttäminen

Ensimmäinen tapa luoda karuselli React.js: ssä on käyttää sisäänrakennettuja ominaisuuksia. React tarjoaa tehokkaan tavan luoda karuselli komponenttien avulla. Sinä pystyt käytä React-koukkuja lisätäksesi ja ohjataksesi karusellia.

tuonti Reagoi, { useState } alkaen "reagoi";

konst Karuselli = () => {
konst [index, setIndex] = useState(0);
konst pituus = 3;

konst handlePrevious = () => {
konst newIndex = indeksi - 1;
setIndex (newIndex < 0? pituus - 1: uusi indeksi);
};

konst handleNext = () => {
konst newIndex = indeksi + 1;
setIndex (newIndex >= pituus? 0: uusi hakemisto);
};

palata (
<div className="karuselli">
<button onClick={handlePrevious}>Edellinen</button>
<button onClick={handleNext}>Seuraava</button>
<s>{indeksi}</s>
</div>
);
};

viedäoletuksena Karuselli;

Tämä koodi käyttää useState-koukkua tilamuuttujan luomiseen nimeltä index. Tämä pitää kirjaa nykyisestä sijainnista karusellissa.

HandelPrevious- ja handleNext-funktiot huolehtivat indeksin arvon päivityksestä, kun käyttäjä napsauttaa Edellinen ja Seuraava painikkeita.

Lopuksi merkintä näyttää indeksiarvon kappaletunnisteessa. Voit halutessasi näyttää kuvia tai videoita tekstin sijaan. Voit myös muotoilla karusellin tavallisella CSS- tai CSS-muodolla käyttämällä CSS-kehystä, kuten Tailwind CSS: ää.

Ilman hienoa tyyliä sinun pitäisi nähdä peruspainikepari ja nykyistä hakemistoa edustava numero:

Pure-react-karusellikirjaston käyttäminen

Toinen tapa luoda karuselli React.js: ssä on puhdas-react-karusellikirjasto. Tämä kirjasto tarjoaa tehokkaan tavan luoda karuselli komponenttien avulla. Käyttääksesi kirjastoa sinun on ensin asennettava se komennolla:

npm Asentaa puhdas-reagoi-karuselli

Kun olet asentanut kirjaston, voit käyttää komponenttia karusellin luomiseen. Tässä on esimerkki karusellikomponentin käytöstä:

tuonti Reagoi alkaen "reagoi";
tuonti { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } alkaen "puhdas-reagoi-karuselli";
tuonti 'pure-react-carousel/dist/react-carousel.es.css';

konst Karuselli = () => {
palata (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Liukusäädin>
<Diahakemisto={0}>Dia 1</Slide>
<Diahakemisto={1}>Dia 2</Slide>
<Diahakemisto={2}>Dia 3</Slide>
</Slider>
<ButtonBack>Takaisin</ButtonBack>
<ButtonNext>Seuraava</ButtonNext>
</CarouselProvider>
);
};

viedäoletuksena Karuselli;

Tässä koodissa näet, että CarouselProvider-komponentti määrittää karusellin yleiset asetukset, kuten naturalSlideWidth, naturalSlideHeight ja totalSlides.

Slider-komponentti sisältää useita Slide-esiintymiä. Diakomponentti määrittelee jokaisen yksittäisen dian.

Lopuksi ButtonBack- ja ButtonNext-komponentit käsittelevät karusellinavigointia.

Pure-react-karusellikirjaston käyttämisessä on monia etuja, kuten:

  • Helppokäyttöinen: Vaikka sisäänrakennettu menetelmä vaatii enemmän koodia karusellin luomiseen, kirjasto tarjoaa helpomman tavan luoda karuselli React.js: ssä.
  • Responsiivinen: Kirjasto tarjoaa mahdollisuuden luoda reagoivia karuselleja. Sisäänrakennetulla menetelmällä sinun on luotava erillinen karuselli eri näyttökokoille.
  • Räätälöinti: Kirjasto tarjoaa monia ominaisuuksia, joita voit käyttää karusellin mukauttamiseen, kuten automaattinen toisto, navigointinuolet, sivutus ja paljon muuta.

Reaktio-responsiivisen karusellikirjaston käyttäminen

Viimeinen tapa luoda karuselli React.js: ssä on react-responsive-carousel -kirjasto. Tämän kirjaston avulla voit luoda karusellin komponenttien avulla. Käyttääksesi kirjastoa sinun on ensin asennettava se komennolla:

npm Asentaa reagoi-responsiivinen-karuselli

Kun olet asentanut kirjaston, voit käyttää komponenttia karusellin luomiseen. Tässä on esimerkki karusellikomponentin käytöstä:

tuonti Reagoi alkaen "reagoi";
tuonti { Karuselli } alkaen "reagoi-responsiivinen-karuselli";
tuonti 'react-responsive-carousel/lib/styles/carousel.min.css';

konst CarouselPage = () => {
palata (
<Karuselli>
<div>
<img src="https://placehold.co/100x100" />
<p luokanNimi="legenda">Legenda 1</s>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p luokanNimi="legenda">Legenda 2</s>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p luokanNimi="legenda">Legenda 3</s>
</div>
</Carousel>
);
};

viedäoletuksena CarouselPage;

Tässä koodissa näet, että Karuselli-komponentti määrittää karusellin. Karusellikomponentin sisällä div sisältää jokaisen yksittäisen dian. Jokainen dia voi sisältää kuvan sekä kuvan selitteen. Kirjasto tarjoaa myös valikoiman vaihtoehtoja ja asetuksia, joiden avulla voit mukauttaa karusellia.

Reaktio-responsiivisen karusellikirjaston käyttämisessä on monia etuja, kuten:

  • Yksi suosituimmista kirjastoista: Kirjasto on yksi suosituimmista kirjastoista React.js: n karusellien luomiseen. Joten jos jäät jumiin, voit helposti löytää apua yhteisöltä.
  • Helppokäyttöinen: Vain muutaman rivin koodilla voit helposti luoda karusellin.
  • Responsiivinen: Kirjasto tarjoaa mahdollisuuden luoda reagoivia karuselleja.
  • Räätälöinti: Kirjasto tarjoaa myös monia ominaisuuksia, joiden avulla voit mukauttaa ja muokata karuselleja.

Paranna käyttökokemusta karusellin avulla

Karusellin avulla voit tarjota käyttäjille enemmän tietoa ja auttaa heitä olemaan vuorovaikutuksessa verkkosivustosi kanssa helpommin. Karusellit auttavat myös pitämään sivun järjestyksessä ja visuaalisesti houkuttelevana. Tämän seurauksena se on loistava tapa parantaa käyttökokemusta.

Voit myös seurata käyttäjien vuorovaikutusta karusellien kanssa ja käyttää tietoja käyttökokemuksen optimointiin. Tämä auttaa sinua luomaan paremman käyttökokemuksen verkkosivustollesi. Sen jälkeen voit ottaa React-sovelluksesi käyttöön ilmaiseksi alustoilla, kuten Github-sivuilla, mikä on helppoa ja kustannustehokasta.