Home-theater-designers
React.js és una biblioteca de JavaScript popular i potent per crear interfícies d'usuari. Podeu utilitzar-lo per crear aplicacions web dinàmiques, interactives i sensibles.
Un dels components habituals que podeu utilitzar amb React.js és el carrusel. És fàcil de fer, ja sigui amb les funcions de React integrades o amb una biblioteca de tercers.
MAKEUSEO VÍDEO DEL DIA
Què és un carrusel i quins són els seus usos?
Un carrusel és un component de presentació de diapositives que us permet navegar per imatges o vídeos. S'utilitza més habitualment als llocs web per mostrar productes o serveis o per mostrar contingut destacat. Hi ha molts avantatges d'utilitzar un carrusel, com ara:
- És una manera eficaç de cridar l'atenció sobre continguts importants.
- És una manera fantàstica de mostrar diverses imatges i vídeos.
- Ajuda a mantenir la pàgina organitzada i visualment atractiva.
- Podeu utilitzar-lo per crear una experiència d'usuari interactiva.
Com crear un carrusel a React.js
Crear un carrusel a React.js és relativament fàcil i hi ha dues biblioteques populars que podeu utilitzar. També podeu utilitzar les funcions de React integrades per afegir un carrusel.
el disc té un 100 per cent de Windows 10
Ús de funcions integrades
El primer mètode per crear un carrusel a React.js és fer ús de les funcions integrades. React ofereix una manera potent de crear un carrusel mitjançant components. Tu pots utilitzar els ganxos React per afegir i controlar un carrusel.
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;Aquest codi utilitza el ganxo useState per crear una variable d'estat anomenada index. Això farà un seguiment de la posició actual al carrusel.
Les funcions handlePrevious i handleNext s'encarreguen de les actualitzacions del valor de l'índex quan l'usuari fa clic al botó. Anterior i Pròxim botons.
Finalment, el marcatge mostra el valor de l'índex en una etiqueta de paràgraf. Podeu mostrar imatges o vídeos en comptes de text si voleu. També podeu estilitzar el carrusel amb CSS normal o utilitzant un marc CSS com Tailwind CSS .
Sense cap estil fantàstic, hauríeu de veure un parell bàsic de botons i un número que representa l'índex actual:
Utilitzant la biblioteca de carrusel de reacció pura
El segon mètode per crear un carrusel a React.js és la biblioteca pure-react-carrusel. Aquesta biblioteca proporciona una manera potent de crear un carrusel amb l'ús de components. Per utilitzar la biblioteca, primer heu d'instal·lar-la amb l'ordre:
npm install pure-react-carouselUn cop instal·lada la biblioteca, podeu utilitzar el component per crear un carrusel. Aquí teniu un exemple de com utilitzar el component Carrusel:
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;En aquest codi, podeu veure que el component CarouselProvider defineix la configuració general del carrusel, com ara naturalSlideWidth, naturalSlideHeight i totalSlides.
El component Slider conté diverses instàncies de Slide. El component Diapositiva defineix cada diapositiva individual.
Finalment, els components ButtonBack i ButtonNext gestionen la navegació en carrusel.
Hi ha molts avantatges d'utilitzar la biblioteca de carrusel de reacció pura, com ara:
- Fàcil d'usar: Tot i que el mètode integrat requereix més codi per crear un carrusel, la biblioteca ofereix una manera més fàcil de crear un carrusel a React.js.
- Responsible: La biblioteca ofereix la possibilitat de crear carrusels responsius. Amb el mètode integrat, hauríeu de crear un carrusel independent per a diferents mides de pantalla.
- Personalització: La biblioteca ofereix moltes funcions que podeu utilitzar per personalitzar el carrusel, com ara la reproducció automàtica, les fletxes de navegació, la paginació i molt més.
Ús de la biblioteca de carrusel react-responsive
El mètode final per crear un carrusel a React.js és la biblioteca de carrusel sensible a la reacció. Amb aquesta biblioteca, podeu crear un carrusel amb l'ús de components. Per utilitzar la biblioteca, primer heu d'instal·lar-la amb l'ordre:
no puc enviar missatges de text a l'iPhone
npm install react-responsive-carouselUn cop instal·lada la biblioteca, podeu utilitzar el component per crear un carrusel. Aquí teniu un exemple de com utilitzar el component Carrusel:
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;En aquest codi, podeu veure que el component Carrusel defineix el carrusel. Dins del component Carrusel, un div conté cada diapositiva individual. Cada diapositiva pot contenir una imatge així com una llegenda per a aquesta imatge. La biblioteca també ofereix una sèrie d'opcions i configuracions que podeu utilitzar per personalitzar el carrusel.
Hi ha molts avantatges d'utilitzar la biblioteca de carrusel sensible a la reacció, com ara:
- Una de les biblioteques més populars: La biblioteca és una de les biblioteques més populars per crear carrusels a React.js. Per tant, si us heu encallat, podeu trobar ajuda de la comunitat fàcilment.
- Fàcil d'usar: Amb només unes poques línies de codi, podeu crear fàcilment un carrusel.
- Responsible: La biblioteca ofereix la possibilitat de crear carrusels responsius.
- Personalització: La biblioteca també ofereix moltes funcions que podeu utilitzar per personalitzar i estilitzar els carrusels.
Millora l'experiència de l'usuari amb un carrusel
Amb un carrusel, podeu proporcionar més informació als usuaris i ajudar-los a interactuar amb el vostre lloc web més fàcilment. Els carrusels també ajuden a mantenir la pàgina organitzada i visualment atractiva. Com a resultat, és una bona manera de millorar l'experiència de l'usuari.
També podeu fer un seguiment de la interacció de l'usuari amb els vostres carrusels i utilitzar les dades per optimitzar l'experiència de l'usuari. Això us ajudarà a crear una millor experiència d'usuari al vostre lloc web. Després d'això, podeu implementar la vostra aplicació React gratuïtament a plataformes com les pàgines de Github, que és fàcil i rendible.