Creare Slideshow con Bootstrap Carousel

Rocco Vincycorousel, Slideshow

Molto spesso nei siti web, soprattutto in magazine online, si vedono le immagini in evidenza di alcuni articoli scorrere in una slideshow. Nella maggior parte dei casi sono articoli da prima pagina o articoli ai quali si vuole dare maggiore visibilità. Infatti le slide in movimento incuriosiscono e attraggono in modo particolare l’attenzione del lettore. In questo articolo ti mostrerò come creare velocemente una slideshow in HTML grazie alla componente Carousel di Bootstrap.

La componente Corousel di Bootstrap ti permette di creare slideshow dove scorrono immagini, o slide con testo, come in un carosello.

Il carosello di Boootstrap è realizzato facendo uso di CSS3 abbinato a del codice in javascript e il suo funzionamento consiste nel far scorrere, ad intervalli regolari, una serie di immagini alle quali è possibile aggiungere del testo e alcuni marcatori.

Ma devi tener presente che Bootstrap Carousel non effettua alcuna normalizzazione delle dimensioni delle immagini. Quindi, sarebbe opportuno usare immagini della stessa dimensione o aggiungere altre funzioni o stili personalizzati per ridimensionare correttamente il contenuto delle slide.

Un altra caratteristica interessante, che riguarda le presentazioni realizzate con questa componente, è che nei browser che supportano le Page Visibility API se la pagina non è attiva le slide non scorrono. Cioè, anche se la finestra del browser che contiene la slideshow è aperta, ma l’utente ha un altra finestra in primo piano, o sta interagendo con un’altra applicazione, la presentazione andrà in pausa. Si riattiverà solo nel momento in cui l’utente tornerà nuovamente a consultare la pagina.

Dopo aver visto le principali caratteristiche di Bootstrap Carousel, vediamo come usarla per creare slideshow per il nostro sito.

Come usare Bootstrap Caurosel per creare Slideshow

Courosel di Bootstrap ti permette di creare diverse presentazioni:

con slide che contengono solo immagini;
con i controlli avanti e indietro;
oltre ai controlli puoi aggiungere anche indicatori;
infine, con una didascalia alle slide.

Vediamo ora come implementare ognuna di queste slideshow partendo dalla più elementare.

Innanzitutto il carosello dev’essere racchiuso in un tg <div> al quale devi assegnare le classi carousel e slide e l’attributo data-ride=”carousel”.

Sempre allo stesso <div> devi assegnare anche un id che serve ai controlli per identificarlo e non creare conflitti con altre slideshow presenti nella pagina.

Inoltre, affinché il carosello sia visibile, devi aggiungere sempre la classe active ad un elemento della presentazione.

Vediamo, con un esempio, come dev’essere il codice di una presentazione con solo immagini:

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Se vogliamo inserire i controlli, dobbiamo aggiungere il seguente codice:

  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

In pratica, per aggiungere i controlli:

abbiamo assegnato la classe carousel-control-prev e l’attributo data-slide=”prev” al pulsante indietro, mentre carousel-control-next e l’attributo data-slide=”next al pulsante avanti.
nell’attributo href del tag <a> dei controlli abbiamo inserito l’id che abbiamo assegnato al carosello: <div class=”carousel” id=”carouselExample”>
infine abbiamo usato le classi carousel-control-prev-icon e carousel-control-next-icon per creare le icone.

A questo punto potremmo aggiungere anche gli indicatori. Per farlo dobbiamo creare una lista ordinata alla quale dobbiamo assegnare la classe carousel-indicators in questo modo:

  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
  </ol>

Infine, possiamo completare la presentazione aggiungendo una didascalia alle slide.

Aggiungiamo per ogni elemento (individuabile come carousel-item) un <div> con class=”carousel-caption” e al suo interno aggiungiamo il contenuto della nostra didascalia.

Quindi, uniamo tutto il codice visto fin ora e vediamo un esempio di come dev’essere il codice di una presentazione con controlli, indicatori e didascalie:

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExample" data-slide-to="1"></li>
    <li data-target="#carouselExample" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Volendo, è possibile modificare anche l’effetto di transizione delle slide. Infatti possiamo sostituire l’effetto scorrimento delle slide con l’effetto dissolvenza aggiungendo semplicemente la classe .carousel-fade al carosello:

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
     ...
  </div>
</div>

Conclusioni

Abbiamo terminato anche quest’articolo dedicato alla realizzazione di slideshow animate usando la componente Bootstrap Carousel.

Sul sito trovi tanti altri articoli con consigli utili su come usare Bootstrap e le sue componenti che ti potrebbero essere utili per realizzare le tue interfacce.

Continua a seguirci sulla nostra pagina Facebook e non esitare dal contattarci per qualsiasi informazione o chiarimento.

Bootstrap Icons, come aggiungere icone al nostro sito <- Articolo precedente