Kā izveidot interaktīvu karuseli pakalpojumā React.js

Kā izveidot interaktīvu karuseli pakalpojumā React.js
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.



DIENAS VIDEO MAKEUSEOF

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.

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.



kā salabot zilo nāves ekrānu
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;

Š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:



reaģēt uz lietotni ar karuseļiem, izmantojot iebūvētās funkcijas

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

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

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;

Š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.

kāpēc tiek izmantoti 100 no mana diska?
reaģēt uz lietotni ar karuseļiem, izmantojot pakotni

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.

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

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

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;

Š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 uz lietotni ar karuseļiem, izmantojot pakotni

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

Kā lejupielādēt fotoattēlus no sava Samsung tālruņa uz datoru
  • 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.

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.