Creare un custom slider con il carousel di Bootstrap

Transcript

Your Inspiration Web
Web Design Community, ispirazione, tutorial, guide e risorse gratuite
http://www.yourinspirationweb.com
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:
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:
1/6
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
2/6
Modificare gli indicatori
Modificare gli indicatori risulta abbastanza semplice:
possiamo modificare la posizione e il background applicando stili alla classe .carouselindicators
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
3/6
carousel.
Per comprendere il funzionamento, dobbiamo analizzare la slide singolarmente:
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:
imposto lo stato normale del testo, applicando lo stile sia al caption generico che a quello
attivo:
imposto l’animazione del testo per la slide che sta uscendo:
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.
4/6
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:
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:
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:
E definendo lo stile per la slide attiva concludiamo l’animazione:
5/6
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.
6/6
Powered by TCPDF (www.tcpdf.org)

Creare un custom slider con il carousel di Bootstrap

Transcript

Documenti analoghi

STORIA E ARCHITETTURA DEL COMPUTER Tesina PPT

scarica la descrizione del lavoro da fare

Come preparare una buona presentazione della tesi

INFO PRODOTTO n° 1505

Convenzione Agenzia CAROUSEL/AVIS