Creare un custom slider con il carousel di Bootstrap

Nel corso di questa guida vedremo come creare uno slider accattivante (qui trovate l’esempio finale) in poco tempo e senza bisogno di acquistare licenze o importare nuovi script e fogli di stile, unico requisito: utilizzare Bootstrap.

La guida è basata su Bootstrap 3 e potrebbero esserci delle variazioni per le precedenti versioni. Se non sapete cos’è Bootstrap vi rimando alla guida su Twitter Bootstrap, essendo questa basata sulla versione 2.3.2, vi invito a dare un’occhiata anche alla nuova versione, dove troverete tutte le differenze con la precedente e la documentazione sull’argomento trattato oggi.

Utilizzare il carousel

Tra le tante funzionalità che Bootstrap ci mette a disposizione per lo sviluppo rapido, troviamo anche un carousel molto sobrio, ma che ci permette di scorrere immagini e anche contenuto.

Prerequisiti

Per cominciare includiamo il foglio di stile, jQuery e lo script javascript di Bootstrap, in questo modo:

<!DOCTYPE html>
<html>
 <head>
   <title>Bootstrap: creare un custom slider</title>
   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Mentre molte funzionalità di Bootstrap necessitano esclusivamente del foglio di stile, il carousel non può funzionare senza lo script javascript.

Il carousel

Una volta preparata la pagina vuota, andiamo a inserire nel body il codice per il carousel:

<div id=”#myCarousel” class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Elementi --> 
      <div class="carousel-inner">
           <div class="item">
          <img src="URL_IMMAGINE_SFONDO" alt="TESTO ALT">
          <div class="carousel-caption">
              <h1>TITOLO CAPTION</h1>
              <p>Testo caption</p>
          </div>
        </div>
          <div class="item">
          <img src="URL_IMMAGINE_SFONDO" alt="TESTO ALT">
          <div class="carousel-caption">
              <h1>TITOLO CAPTION</h1>
              <p>Testo caption</p>
          </div>
        </div>
        <div class="item">
          <img src="URL_IMMAGINE_SFONDO" alt="TESTO ALT">
          <div class="carousel-caption">
              <h1>TITOLO CAPTION</h1>
              <p>Testo caption</p>
          </div>
        </div>
      </div>
       <!-- frecce per il controllo -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

Carousel_originale

Vediamo come è composto:

  • il div contenitore con classe carousel e id univoco che identificherà il nostro slider;
  • un elenco con classe carousel-indicators, con cui andiamo a costruire i punti che ci indicheranno in quale slide siamo;
  • un altro div con classe carousel-inner, che conterrà gli elementi div con classe item che rappresentano le vere e proprie slide;
  • 2 link di classe carousel-control che rappresenteranno le frecce sinistra( con classe left ) e destra( con classe right ).

Iniziamo con la customizzazione

Nuovo-carousel

Modificare gli indicatori

Modificare gli indicatori risulta abbastanza semplice:

  • possiamo modificare la posizione e il background applicando stili alla classe .carousel-indicators
  • applicare uno stile a .carousel-indicators > li per modificare lo stile dei pallini, ricordando che utilizzano di default il background come colore del centro del pallino e il bordo arrotondato; cambiando quindi le regole per background e border possiamo creare molte variazioni dei pallini;
  • è utile ricordare infine che al tag li degli indicatori viene applicata la classe active nel caso in cui la slide corrente sia quella associata al pallino.

Modificare le frecce per il controllo

La modifica delle frecce per il controllo si può effettuare applicando uno stile alla classe carousel-control, in aggiunta si troverà anche la classe left e right per le 2 differenti frecce.

Durante la modifica delle frecce è utile ricordare che queste sono posizionate in modo assoluto.

Lo slider

Questo punto, a differenza dei precedenti, è più complesso e richiede di capire come funziona il carousel.

Per comprendere il funzionamento, dobbiamo analizzare la slide singolarmente:

<div class="item">
          		<img src="URL_IMMAGINE_SFONDO" alt="TESTO ALT">
            	<div class="carousel-caption">
              	<h1>TITOLO CAPTION</h1>
              	<p>Testo caption</p>
            	</div>
	</div>

La prima cosa fondamentale da sapere è che gli item sono disposti relativamente e nascosti con la proprietà css display.

Quando la slide cambia, viene applicata all’elemento precedente o successivo la classe prev o next insieme alla classe left o right.

Queste classi permettono alla slide che sta entrando di essere visualizzata tramite display:block; e posizionata a sinistra o a destra in modo assoluto, in modo da dar vita alla transizione con css3 che non sarebbe altrimenti possibile. La classe left o right è utilizzata per l’animazione e viene applicata anche all’elemento attualmente attivo.

Quando la transizione è completata, all’item viene aggiunta la classe active e le precedenti vengono rimosse (prev o next left o right).

Fatta questa premessa, posso dirvi che è possibile modificare il comportamento e lo stile delle slide durante l’animazione unicamente sovrascrivendo i css di default.

La prima modifica sull’animazione che ho voluto testare è stata quella sul testo:

  •  imposto il testo di partenza nella slide entrante:
    .carousel .item.next .carousel-caption, .carousel .item.prev .carousel-caption{
    	transform: scale(3) rotate(720deg);
    	-ms-transform: scale(3)  rotate(720deg); /* IE 9 */
    	-webkit-transform: scale(3) rotate(720deg); /* Safari and Chrome */
    }
    
  • imposto lo stato normale del testo, applicando lo stile sia al caption generico che a quello attivo:
    .carousel-inner > .item .carousel-caption, .carousel .item.active .carousel-caption{
    	color:#fff;
    	transform: scale(1) rotate(0deg);
    	-ms-transform: scale(1) rotate(0deg); /* IE 9 */
    	-webkit-transform: scale(1) rotate(0deg); /* Safari and Chrome */	
    	-webkit-transition: all 1s ease-in-out;
    	transition: all 1s ease-in-out;
    }
    
  • imposto l’animazione del testo per la slide che sta uscendo:
    .carousel .item.active.left .carousel-caption, .carousel .item.active.right .carousel-caption{
    	transform: scale(0.2) rotate(-720deg);
    	-ms-transform: scale(0.2) rotate(-720deg); /* IE 9 */
    	-webkit-transform: scale(0.2)rotate(-720deg);  /* Safari and Chrome */
    
    }
    

Questo stile permette di far ruotare e rimpicciolire il testo durante la slide, quello uscente diventerà sempre più piccolo, mentre quello entrante da grande diventerà normale.

Manca un solo accorgimento da prendere in considerazione:

L’elemento contenitore con classe carousel-inner non ci permette di far andare le scritte fuori dal carousel, anche se queste con la nuova dimensione uscirebbero (personalmente, non mi piaceva molto, perciò ho lasciato che il testo venisse tagliato); questo è fattibile impostando la proprietà overflow:visible; alla classe .carousel-inner, su bootsrap è impostato su hidden.

La seconda cosa che ho voluto provare è stata quella di modificare l’animazione di default: nell’esempio l’ho sostituita con un effetto scomparsa in trasparenza; chiaramente, con le nozioni apprese potete creare l’animazione che più vi aggrada.

La prima cosa da fare è impostare un background al contenitore; in questo modo, quando sia l’elemento entrante che quello uscente saranno trasparenti, si vedrà comunque un colore di sfondo:

.carousel-inner{
background: #000;
}

In questo caso le slide più diventano trasparenti e più diventano scure. Anche qua la scelta è abbastanza personale, non impostandolo l’effetto sarà di trasparenza totale per qualche millisecondo.

Per ottenere un effetto di transizione con la trasparenza, è requisito fondamentale che le slide siano una sopra l’altra, perciò le ho posizionate tutte in modo assoluto:

.carousel-inner > .item {
display:block;
	position: absolute;
	top: 0;
	left: 0;
	opacity:0;
	height: 540px;
}

.carousel .item.active.left, .carousel .item.active.right{
	left:0px !important;
	top:0px !important;
	opacity:0;
}

Ho inoltre eliminato il problema della proprietà display:none nelle transition css3, nascondendo la slide tramice l’opacità a 0.

A questo punto modificando la slide nello stato intermedio della transizione, otteniamo l’effetto comparsa della nuova slide:

.carousel .item.next, .carousel .item.prev{
	display:block;
	position:absolute;
	left:0px !important;
	top:0px !important;
	opacity:0.5;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

E definendo lo stile per la slide attiva concludiamo l’animazione:

 

.carousel .item.active{
	opacity:1;
	position: relative;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

effetto

Risulta molto importante tenere la posizione relativa sull’elemento attivo, poiché altezza e larghezza del container dipendono dalla grandezza della slide attiva.

Il risultato finale che fa da esempio pratico a questa guida lo trovate qui.

Il mio consiglio è quello di analizzare il codice (tramite gli strumenti messi a disposizione dai browser) e provare a fare le modifiche.

Spero che questa guida possa rendervi più semplice capire i meccanismi interni del carousel e facilitarvi la prima customizzazione, le altre poi risulteranno più semplici.

 

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , , , , ,

L'autore

Diplomato in informatica, inizia la sua esperienza di web developer all’età di 17 anni con le prime collaborazioni. Attualmente Wordpress, Symfony, Bootstrap e AngularJS compongono le sue giornate insieme a vari caffè. Ama sviluppare e collaborare con i creativi; tolto il lavoro la sua passione sono le moto.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

7 commenti

  1. maurizio
  2. Andrea

Trackback e pingback

  1. Creare un custom slider con il carousel di Boot...
    […] Nel corso di questa guida vedremo come creare uno slider accattivante (qui trovate l'esempio finale) in poco tempo e …

Lascia un Commento

Current day month ye@r *