Lezione 5: Javascript (Carousel)

Carousel:

Con il termine carousel definiamo uno slideshow ciclico di contenuti detti diappositive. Oltre al codice HTML e CSS visto fino ad ora, per realizzare questo componente avremo bisogno di alcune funzioni Javascript. I componenti che possiamo utilizzare all'interno dello slideshow possono essere sia immagini, testo o oggetti custom definiti dallo sviluppatore. Oltre alla visualizzazione degli elementi, vedremo come definire dei comandi di navigazione tra le diappositive ed indicatori di posizione all'interno della lista di elementi. Come gli altri componenti visti nelle precedenti lezioni, trovate nella documentazione ufficiale maggiori dettagli in merito all'implentazione.

Definizione:

Il nostro scopo è quello di implementare quanto visto nella demo della precedente lezione. Come potete notare, il carousel ci permette di ciclare delle immagini a video. Queste, presentano inoltre dei pulsanti di navigazione e delle scritte sovraimposte. In breve quindi, il nostro carousel è composto da tre elementi:

• Immagine
• Titolo e sottotitolo
• Elementi di navigazione (ordine delle slide, pulsanti)

<div id="myCarousel" class="carousel slide">
      
</div>

In questo modo definiamo un nuovo spazio di tipo carousel all'interno della pagina. Particolare attenzione va data alla definizione dell'ID dell'elemento. Ci è possibile definire molteplici elementi all'interno della nostra pagina, ma come per altri oggetti web, il carousel non mantiene una struttura monolitica all'interno del codice ma lega i suoi elementi attraverso l'ID.

Questo concetto sarà sicuramente più chiaro, osservando il codice sottostante di definizione degli elementi di navigazione tra le slide:

<div id="myCarousel" class="carousel slide">
   <!-- indicatori -->
   <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
   </ol>
</div>

Qui definiamo gli indicatori di posizione delle slide che visualizzeremo a video. Attraverso l'utilizzo della classe active definiamo quale sarà l'elemento iniziale della nostra lista. A questo punto possiamo definire gli elementi del nostro carousel:

<div class="carousel-inner">
   <div class="item active">
    <img src= "img/header-bg.png" alt="Welcome">
    <div class="container">
        <div class="carousel-caption">
            <h1>Carousel</h1>
            <p>Questo è un testo di paragrafo, Prova a cambiarmi.</p>
        </div>
    </div>
    </div>
....
</div>

Nel codice definiamo quindi un nuovo div carousel-inner in cui inserire gli elementi che andranno a comporre il nostro carousel. Quindi, definiamo un nuovo item di classe active che rappresenti il nostro elemento d'ingresso all'interno del carousel.

Riprendendo quanto detto all'inizio di questo paragrafo, per completare il nostro carousel - e mimare quanto fatto nella demo - non ci resta che inserire i controlli di navigazione tra le slide.

Bootstrap mette a diposizione due funzioni Javascript per il controllo del carousel, prev e next, che andremo a definire all'interno dei carousel-control come visibile nella porzione di codice riportato qui sotto.

<!-- Pulsanti -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

Ci serve più stile:

A questo punto abbiamo definito il nostro carousel, ma è rimasto in sospeso un aspetto della nostra pagina. Provando il codice realizzato fino ad ora, avrai notato come resti visibile uno spazio tra la navbar ed il carousel; inoltre, il titolo e sottotitolo visualizzato potrebbe essere, a seconda del risultato voluto, troppo piccolo o troppo grande. In aggiunta, hai provato a ridimensionare la finestra? Non è un risultato accettabile per un sito mobile-first no?

Media queries:

A questo punto possiamo affrontare l'argomento più spinoso, come possiamo modificare il comportamento del carousel (ed i suoi elementi) in un ottica mobile-first? In nostro aiuto arrivano le media queries.

Ricordate quanto visto per le tabelle alla seconda lezione? Bootstrap prevedere la definizione degli elementi attraverso i gruppi xs,sm,md,lg, le media queries non fanno eccezione a questa definizione. Oltre ai citati gruppi, è possibile definire gli elementi attraverso l'indicazione esplicita della risuluzione come riportato qui sotto:

@media (max-width: 1920px) {
 
}
 
@media (max-width: 1280px) {
 
}
 
@media (max-width: 1024px) {
 
}
 
@media (max-width: 800px) {
 
}
 
@media (max-width: 700px) {
  
}
 
@media (max-width: 500px) {
  
}
    

@media (max-width: 1920px) {
 
    .carousel-caption h1 {
      font-size: 120px;
    }
 
    .carousel-caption p {
      font-size: 20px;
    }
}