Apr 282013
Un modo molte semplice e veloce per costruire uno slider potrebbe essere affidarsi a twitter bootstrap, un insieme di widget ed elementi per creare rapidamente layout gradevoli e funzionali.
Come prima cosa serve scaricare il pacchetto composto da css, icone e file js da qui
Ovviamente sia il css sia il javascript andranno collegati alla nostra pagina:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> ... <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Oltre al nostro framework, come si può vedere, avremo bisogno anche di jQuery.
Montiamo l’html che sarà composto da 3 parti: l’indicatore di avanzamento, le immagini e i pulsanti.
Partiamo dall’indicatore di avanzamento:
<ol> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>
Procediamo con le nostre immagine e le relative label sottostanti:
<div> <div> <img src="img/DSC00079.JPG" alt=""> <div> <h4>Alpe d'Huez</h4> <p>Arrivo in vetta.</p> </div> </div> <div> <img src="img/DSC00081.JPG" alt=""> <div> <h4>Col de la Croix-de-Fer</h4> <p>La scalata.</p> </div> </div> <div> <img src="img/DSC00085.JPG" alt=""> <div> <h4>Col du Télégraphe</h4> <p>Riposo.</p> </div> </div> </div>
E infine i due bottoni di avanzamento:
<a href="#myCarousel" data-slide="prev">‹</a> <a href="#myCarousel" data-slide="next">›</a>
Infine attiviamo il tutto:
$('.carousel').carousel()
L’esempio
Sorry, the comment form is closed at this time.