Share
Una delle tante utili funzionalità di Twitter Bootstrap è un piacevole carosello scorrevole per immagini e contenuti! L'installazione non è difficile. Richiede alcuni markup strutturati, il plugin jQuery Bootstrap e un paio di righe di JavaScript per inizializzarlo. Lascia che ti mostri come è fatto!
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!
Per quelli di voi che apprezzano i tutorial in bianco e nero, andiamo oltre:
Il carosello Bootstrap richiede uno schema di markup specifico, con classi appropriate.
‹ ›
Testo didascalia qui
Testo didascalia qui
Testo didascalia qui
Testo didascalia qui
Una volta fornito il markup, abbiamo bisogno di inizializzare il carousel JavaScript per fare il suo lavoro su questo carosello.
Iniziamo assicurandoci che il JavaScript necessario sia connesso a questa pagina. Troverai i tuoi link JavaScript nella parte inferiore della pagina, vicino al tag body di chiusura.
Il modo migliore e più consigliato per collegare jQuery è quello di collegarsi a una versione ospitata da CDN. Ciò fornisce un download più rapido e potrebbe essere già presente nella cache del browser dell'utente.
Ma naturalmente sarebbe bello avere un fallback, in modo che se succede qualcosa a quella versione ospitata da CDN, l'utente può ottenerlo localmente dai propri file del sito. Questo è esattamente ciò che la brava gente del calibro piatto HTML5 consiglia, e assomiglia a questo:
Tieni presente che la prima riga raggiunge la versione ospitata da Google. La seconda riga utilizza JavaScript per verificare che la prima riga abbia fatto il suo lavoro. In caso contrario, genera automaticamente un collegamento alla tua copia ospitata di jQuery, che hai incluso nei tuoi file del sito (come ho qui).
Una volta che abbiamo collegato jQuery, abbiamo bisogno dei plugin jQuery di Bootstrap. Ho incluso la versione completa e compilata di tutti i plugin di Bootstrap. Quindi il mio link ha il seguente aspetto:
Una volta che abbiamo fornito i plugin di jQuery plus Bootstrap, abbiamo solo bisogno di inizializzare il plugin Carousel per fare il suo lavoro sulla nostra giostra.
In inglese semplice, questo significa: Una volta che il documento HTML è pronto, identifica l'elemento (i) con una classe di "giostra", e dirigere il plug-in della giostra per fare il suo esempio.
Una volta che il markup è a posto e il codice JavaScript è stato fornito correttamente, dovresti essere in grado di aggiornare il tuo browser e vedere i risultati. Ogni rotazione dell'immagine richiede cinque secondi. Assicurati che il tuo mouse non si posizioni sopra la presentazione, in quanto mette in pausa il suo timer.
È possibile aggiungere parametri per regolare il tempo tra il comportamento di scorrimento della giostra.
Ad esempio, è possibile modificare i tempi in intervalli di 2 secondi (2000 millisecondi) come segue:
Nel markup del Passaggio 1, in alto, ho utilizzato le immagini di Placehold.it. Si noti che le immagini di 1200 pixel di larghezza sono sufficientemente grandi da estendere la larghezza massima completa del sito reattivo standard di Bootstrap. Ho usato un rapporto di 1200x480px semplicemente perché mi sembra visivamente piacevole - almeno sul mio grande monitor!
A questo punto sei libero di:
Ricorda sempre che, mentre provi le cose e le modifichi, l'eccellente documentazione di Twitter Bootstrap è tua amica. E se puoi usare un aiuto aggiuntivo, un sacco di persone trovano aiuto nel gruppo Google Bootstrap di Google.
Dai un'occhiata al risultato finale.
Accentsconagua
