React.js yra populiari ir galinga „JavaScript“ biblioteka, skirta vartotojo sąsajoms kurti. Jį galite naudoti kurdami dinamiškas, interaktyvias ir reaguojančias žiniatinklio programas.
Vienas iš įprastų komponentų, kuriuos galite naudoti su React.js, yra karuselė. Tai lengva padaryti naudojant įmontuotas „React“ funkcijas arba naudojant trečiosios šalies biblioteką.
Kas yra karuselė ir kokia jos paskirtis?
Karuselė yra skaidrių demonstravimo komponentas, leidžiantis peržiūrėti vaizdus ar vaizdo įrašus. Jis dažniausiai naudojamas svetainėse, siekiant pristatyti produktus ar paslaugas arba parodyti siūlomą turinį. Karuselės naudojimas turi daug privalumų, pavyzdžiui:
- Tai veiksmingas būdas atkreipti dėmesį į svarbų turinį.
- Tai puikus būdas parodyti kelis vaizdus ir vaizdo įrašus.
- Tai padeda išlaikyti puslapį tvarkingą ir vizualiai patrauklų.
- Jį galite naudoti norėdami sukurti interaktyvią vartotojo patirtį.
Kaip sukurti karuselę React.js
Sukurti karuselę React.js yra gana paprasta ir yra dvi populiarios bibliotekos, kurias galite naudoti. Taip pat galite naudoti įtaisytąsias „React“ funkcijas, kad pridėtumėte karuselę.
Integruotų funkcijų naudojimas
Pirmasis „React.js“ karuselės kūrimo būdas yra naudoti integruotas funkcijas. „React“ yra galingas būdas sukurti karuselę naudojant komponentus. Tu gali naudokite React kabliukus pridėti ir valdyti karuselę.
importuoti Reaguoti, { useState } iš „reaguoti“;konst Karuselė = () => {
konst [index, setIndex] = useState(0);
konst ilgis = 3;
konst rankenaAnkstesnis = () => {
konst newIndex = indeksas - 1;
setIndex (newIndex < 0? ilgis - 1: naujasIndeksas);
};
konst handleNext = () => {
konst newIndex = indeksas + 1;
setIndex (newIndex >= ilgis? 0: naujasIndeksas);
};
grąžinti (
<div className="karuselė">
<mygtukas onClick={handlePrevious}>Ankstesnis</button>
<mygtukas onClick={handleNext}>Kitas</button>
<p>{indeksas}</p>
</div>
);
};
eksportuotinumatytas Karuselė;
Šis kodas naudoja kabliuką useState, kad sukurtų būsenos kintamąjį, vadinamą indeksu. Taip bus stebima esama padėtis karuselėje.
Funkcijos handlePrevious ir handelNext rūpinasi indekso reikšmės atnaujinimais, kai vartotojas spusteli Ankstesnis ir Kitas mygtukai.
Galiausiai, žymėjimas rodo indekso reikšmę pastraipos žymoje. Jei norite, vietoj teksto galite rodyti vaizdus arba vaizdo įrašus. Taip pat galite formuoti karuselę naudodami įprastą CSS arba naudojant CSS sistemą, pvz., Tailwind CSS.
Be jokio įmantraus stiliaus, turėtumėte matyti pagrindinę mygtukų porą ir skaičių, nurodantį dabartinį indeksą:
Naudojant grynos reakcijos karuselės biblioteką
Antrasis „React.js“ karuselės kūrimo būdas yra grynos reakcijos karuselės biblioteka. Ši biblioteka yra galingas būdas sukurti karuselę naudojant komponentus. Norėdami naudoti biblioteką, pirmiausia turite ją įdiegti naudodami komandą:
npm diegti gryna-reaguoti-karuselėĮdiegę biblioteką, galite naudoti komponentą, kad sukurtumėte karuselę. Štai pavyzdys, kaip naudoti karuselės komponentą:
importuoti Reaguoti iš „reaguoti“;
importuoti { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } iš „grynos reakcijos karuselė“;
importuoti 'pure-react-carousel/dist/react-carousel.es.css';konst Karuselė = () => {
grąžinti (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slankiklis>
<Skaidrių indeksas={0}>1 skaidrė</Slide>
<Skaidrių rodyklė={1}>2 skaidrė</Slide>
<Skaidrių indeksas={2}>3 skaidrė</Slide>
</Slider>
<ButtonBack>Atgal</ButtonBack>
<MygtukasKitas>Kitas</ButtonNext>
</CarouselProvider>
);
};
eksportuotinumatytas Karuselė;
Šiame kode galite matyti, kad komponentas CarouselProvider apibrėžia bendruosius karuselės nustatymus, pvz., naturalSlideWidth, naturalSlideHeight ir totalSlides.
Slankiklio komponente yra keli skaidrių egzemplioriai. Skaidrių komponentas apibrėžia kiekvieną atskirą skaidrę.
Galiausiai, „ButtonBack“ ir „ButtonNext“ komponentai valdo karuselės naršymą.
Grynos reakcijos karuselės bibliotekos naudojimas turi daug privalumų, pavyzdžiui:
- Paprasta naudoti: Nors įtaisytajam metodui reikia daugiau kodo norint sukurti karuselę, biblioteka suteikia lengvesnį būdą sukurti karuselę React.js.
- Atsakingas: Biblioteka suteikia galimybę kurti reaguojančias karuseles. Naudodami integruotą metodą, turėtumėte sukurti atskirą karuselę skirtingiems ekranų dydžiams.
- Tinkinimas: Bibliotekoje yra daug funkcijų, kurias galite naudoti norėdami tinkinti karuselę, pvz., automatinis paleidimas, naršymo rodyklės, puslapių rūšiavimas ir kt.
Reagavimo ir reaguojančios karuselės bibliotekos naudojimas
Paskutinis React.js karuselės kūrimo būdas yra react-responsive-carousel biblioteka. Naudodami šią biblioteką galite sukurti karuselę naudodami komponentus. Norėdami naudoti biblioteką, pirmiausia turite ją įdiegti naudodami komandą:
npm diegti reaguoti-reaguoti-karuselėĮdiegę biblioteką, galite naudoti komponentą, kad sukurtumėte karuselę. Štai pavyzdys, kaip naudoti karuselės komponentą:
importuoti Reaguoti iš „reaguoti“;
importuoti { Karuselė } iš „reaguoti-reaguoti-karuselė“;
importuoti 'react-responsive-carousel/lib/styles/carousel.min.css';konst CarouselPage = () => {
grąžinti (
<Karuselė>
<div>
<img src="https://placehold.co/100x100" />
<p klasėsPavadinimas="legenda">Legenda 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p klasėsPavadinimas="legenda">Legenda 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p klasėsPavadinimas="legenda">Legenda 3</p>
</div>
</Carousel>
);
};
eksportuotinumatytas CarouselPage;
Šiame kode matote, kad komponentas „Karuselė“ apibrėžia karuselę. „Karuselės“ komponente „div“ yra kiekviena atskira skaidrė. Kiekvienoje skaidrėje gali būti vaizdas ir to vaizdo legenda. Bibliotekoje taip pat yra įvairių parinkčių ir nustatymų, kuriuos galite naudoti norėdami tinkinti karuselę.
Reagavimo ir reaguojančios karuselės bibliotekos naudojimas turi daug privalumų, pavyzdžiui:
- Viena populiariausių bibliotekų: Biblioteka yra viena iš populiariausių bibliotekų, skirtų kurti karuseles React.js. Taigi, jei įstrigote, galite lengvai rasti pagalbos iš bendruomenės.
- Paprasta naudoti: Turėdami tik kelias kodo eilutes, galite lengvai sukurti karuselę.
- Atsakingas: Biblioteka suteikia galimybę kurti reaguojančias karuseles.
- Tinkinimas: Bibliotekoje taip pat yra daug funkcijų, kurias galite naudoti norėdami tinkinti ir formuoti karuseles.
Pagerinkite naudotojo patirtį naudodami karuselę
Naudodami karuselę galite suteikti daugiau informacijos naudotojams ir padėti jiems lengviau sąveikauti su jūsų svetaine. Karuselės taip pat padeda išlaikyti puslapį tvarkingą ir vizualiai patrauklų. Todėl tai puikus būdas pagerinti vartotojo patirtį.
Taip pat galite stebėti naudotojo sąveiką su savo karuselėmis ir naudoti duomenis, kad optimizuotumėte naudotojo patirtį. Tai padės sukurti geresnę naudotojo patirtį jūsų svetainėje. Po to galite nemokamai įdiegti „React“ programą tokiose platformose kaip „Github“ puslapiai, o tai yra paprasta ir ekonomiška.
