I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

React.js è una popolare e potente libreria JavaScript per la creazione di interfacce utente. Puoi usarlo per creare applicazioni web dinamiche, interattive e reattive.

Uno dei componenti comuni che potresti utilizzare con React.js è il carosello. È facile da fare, sia con le funzionalità React integrate che utilizzando una libreria di terze parti.

Cos'è un carosello e quali sono i suoi usi?

Un carosello è un componente della presentazione che ti consente di scorrere immagini o video. È più comunemente utilizzato sui siti Web per mostrare prodotti o servizi o per mostrare contenuti in primo piano. Ci sono molti vantaggi nell'usare un carosello, come ad esempio:

  • È un modo efficace per attirare l'attenzione su contenuti importanti.
  • È un ottimo modo per mostrare più immagini e video.
  • Aiuta a mantenere la pagina organizzata e visivamente accattivante.
  • Puoi usarlo per creare un'esperienza utente interattiva.
instagram viewer

Come creare un carosello in React.js

Creare un carosello in React.js è relativamente semplice e ci sono due librerie popolari che puoi usare. Puoi anche utilizzare le funzionalità integrate di React per aggiungere un carosello.

Utilizzo delle funzionalità integrate

Il primo metodo per creare un carosello in React.js consiste nell'utilizzare le funzionalità integrate. React fornisce un modo potente per creare un carosello utilizzando i componenti. Puoi usa i ganci React per aggiungere e controllare un carosello.

importare Reagisci, { useState } da 'reagire';

cost Carosello = () => {
cost [indice, setIndex] = useState(0);
cost lunghezza = 3;

cost manigliaPrecedente = () => {
cost nuovoIndice = indice - 1;
setIndex (nuovoIndex < 0? lunghezza - 1: newIndex);
};

cost handleNext = () => {
cost nuovoIndice = indice + 1;
setIndex (nuovoIndex >= lunghezza? 0: nuovoIndice);
};

ritorno (
<nomeclasse div="giostra">
<pulsante onClick={handlePrevious}>Precedente</button>
<pulsante onClick={handleNext}>Prossimo</button>
<P>{indice}</P>
</div>
);
};

esportarepredefinito Giostra;

Questo codice usa l'hook useState per creare una variabile di stato chiamata index. Ciò terrà traccia della posizione corrente nel carosello.

Le funzioni handlePrevious e handleNext si occupano degli aggiornamenti del valore dell'indice quando l'utente fa clic su Precedente E Prossimo bottoni.

Infine, il markup visualizza il valore dell'indice in un tag di paragrafo. Puoi visualizzare immagini o video invece di testo, se lo desideri. Puoi anche modellare il carosello usando i normali CSS o utilizzando un framework CSS come Tailwind CSS.

Senza alcuno stile stravagante, dovresti vedere una coppia base di pulsanti e un numero che rappresenta l'indice corrente:

Utilizzo della libreria pure-react-carousel

Il secondo metodo per creare un carosello in React.js è la libreria pure-react-carousel. Questa libreria fornisce un modo potente per creare un carosello con l'uso di componenti. Per utilizzare la libreria, devi prima installarla utilizzando il comando:

npm installare pure-react-carousel

Dopo aver installato la libreria, puoi utilizzare il componente per creare un carosello. Ecco un esempio di come utilizzare il componente Carosello:

importare Reagire da 'reagire';
importare {CarouselProvider, Slider, Slide, ButtonBack, ButtonNext} da 'carosello a reazione pura';
importare 'pure-react-carousel/dist/react-carousel.es.css';

cost Carosello = () => {
ritorno (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalDiapositive={3}
>
<Cursore>
<Indice diapositiva={0}>Diapositiva 1</Slide>
<Indice diapositiva={1}>Diapositiva 2</Slide>
<Indice diapositiva={2}>Diapositiva 3</Slide>
</Slider>
<Pulsante Indietro>Indietro</ButtonBack>
<PulsanteAvanti>Prossimo</ButtonNext>
</CarouselProvider>
);
};

esportarepredefinito Giostra;

In questo codice, puoi vedere che il componente CarouselProvider definisce le impostazioni generali per il carosello come naturalSlideWidth, naturalSlideHeight e totalSlides.

Il componente Slider contiene diverse istanze Slide. Il componente Diapositiva definisce ogni singola diapositiva.

Infine, i componenti ButtonBack e ButtonNext gestiscono la navigazione nel carosello.

Ci sono molti vantaggi nell'usare la libreria pure-react-carousel come:

  • Facile da usare: Mentre il metodo integrato richiede più codice per creare un carosello, la libreria fornisce un modo più semplice per creare un carosello in React.js.
  • Reattivo: La libreria offre la possibilità di creare caroselli reattivi. Con il metodo integrato, dovresti creare un carosello separato per le diverse dimensioni dello schermo.
  • Personalizzazione: La libreria offre molte funzionalità che puoi utilizzare per personalizzare il carosello come riproduzione automatica, frecce di navigazione, impaginazione e altro.

Utilizzo della libreria react-responsive-carousel

Il metodo finale per creare un carosello in React.js è la libreria react-responsive-carousel. Con questa libreria, puoi creare un carosello con l'uso di componenti. Per utilizzare la libreria, devi prima installarla utilizzando il comando:

npm installare carosello reattivo-reattivo

Dopo aver installato la libreria, puoi utilizzare il componente per creare un carosello. Ecco un esempio di come utilizzare il componente Carosello:

importare Reagire da 'reagire';
importare { Carosello } da 'carosello reattivo-reattivo';
importare 'react-responsive-carousel/lib/styles/carousel.min.css';

cost CarouselPage = () => {
ritorno (
<Giostra>
<div>
<img src="https://placehold.co/100x100" />
<p nomeclasse="leggenda">Leggenda 1</P>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p nomeclasse="leggenda">Leggenda 2</P>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p nomeclasse="leggenda">Leggenda 3</P>
</div>
</Carousel>
);
};

esportarepredefinito CarouselPage;

In questo codice, puoi vedere che il componente Carousel definisce il carosello. All'interno del componente Carosello, un div contiene ogni singola diapositiva. Ogni diapositiva può contenere un'immagine e una legenda per quell'immagine. La libreria fornisce anche una gamma di opzioni e impostazioni che puoi utilizzare per personalizzare il carosello.

Ci sono molti vantaggi nell'usare la libreria react-responsive-carousel come:

  • Una delle librerie più popolari: La libreria è una delle librerie più popolari per la creazione di caroselli in React.js. Quindi, se sei rimasto bloccato, puoi facilmente trovare aiuto dalla community.
  • Facile da usare: Con solo poche righe di codice, puoi facilmente creare un carosello.
  • Reattivo: La libreria offre la possibilità di creare caroselli reattivi.
  • Personalizzazione: La libreria fornisce anche molte funzionalità che puoi utilizzare per personalizzare e modellare i caroselli.

Migliora l'esperienza utente con un carosello

Con un carosello, puoi fornire più informazioni agli utenti e aiutarli a interagire più facilmente con il tuo sito web. I caroselli aiutano anche a mantenere la pagina organizzata e visivamente accattivante. Di conseguenza, è un ottimo modo per migliorare l'esperienza dell'utente.

Puoi anche tenere traccia dell'interazione dell'utente con i tuoi caroselli e utilizzare i dati per ottimizzare l'esperienza dell'utente. Questo ti aiuterà a creare una migliore esperienza utente sul tuo sito web. Successivamente, puoi distribuire la tua applicazione React gratuitamente su piattaforme come le pagine Github, che è facile ed economica.