Carousel – Tutorial Bootstrap per creare una galleria
In questo tutorial vedremo come creare una gallery come questa per le vostre foto senza scaricare script o fogli di stile, l’unico strumento di cui usufruiremo sarà bootstrap.
Per chi non sapesse cosa sia bootstrap può guardare questo articolo.
Step 1)
Per prima cosa creiamo l’intestazione del sito e richiamiamo i file bootstrap di cui abbiamo bisogno: il css, javascript e jquery.
Il CSS lo richiamiamo nell‘head:
<link href=”css/bootstrap.css” rel=”stylesheet”>
<style type=”text/css”>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href=”css/bootstrap-responsive.css” rel=”stylesheet”>
E invece javascript e jQuery in fondo al body:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script>window.jQuery || document.write(‘<script src=”js/jquery-1.7.2.min.js”><\/script>’)</script>
<!– Bootstrap jQuery plugins compiled and minified –>
<script src=”js/bootstrap.min.js”></script>
<script>
$(document).ready(function(){
$(‘.carousel’).carousel({
interval: 4000
});
});
</script></body>
</html>
Step 2)
Ora andiamo a creare la nostra galleria:
<div class=”container”>
<!– Carousel –>
<!– consult Bootstrap docs at
//twitter.github.com/bootstrap/javascript.html#carousel –>
<div id=”this-carousel-id” class=”carousel slide”>
<div class=”carousel-inner”>
<div class=”item active”>
<a href=”//hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/”> <img src=”img/antennae.jpg” alt=”Antennae Galaxies” />
</a>
<div class=”carousel-caption”>
<p>The Antennae Galaxies</p>
<p><a href=”//hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/”>Hubblesite.org »</a></p>
</div>
</div>
<div class=”item”>
<a href=”//hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/”>
<img src=”img/carina.jpg” alt=”Carina Caterpillar” />
</a>
<div class=”carousel-caption”>
<p>Carina Nebula: The Caterpillar</p>
<p><a href=”//hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/”>Hubblesite.org »</a></p>
</div>
</div>
<div class=”item”>
<a href=”//hubblesite.org/gallery/album/entire/pr2003010i/npp/128/”>
<img src=”img/echo.jpg” alt=”Light Echo” />
</a>
<div class=”carousel-caption”>
<p>Light Echo From Star V838 Monocerotis</p>
<p><a href=”//hubblesite.org/gallery/album/entire/pr2003010i/npp/128/”>Hubblesite.org »</a></p>
</div>
</div>
<div class=”item”>
<a href=”//hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/”>
<img src=”img/ngc5866.jpg” alt=”Galaxy NGC5866″ />
</a>
<div class=”carousel-caption”>
<p>Galaxy NGC 5866</p>
<p><a href=”//hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/”>Hubblesite.org »</a></p>
</div>
</div>
</div><!– .carousel-inner –>
<!– next and previous controls here
href values must reference the id for this carousel –>
<a class=”carousel-control left” href=”#this-carousel-id” data-slide=”prev”>‹</a>
<a class=”carousel-control right” href=”#this-carousel-id” data-slide=”next”>›</a>
</div><!– .carousel –>
<!– end carousel –></div> <!– /container –>
ANALIZZIAMO IL CODICE:
<div id=”this-carousel-id” class=”carousel slide”> L’id è l’ancoraggio al quale fanno riferimento le freccette che fanno scorrere le slide a destra o a sinistra, le ritroviamo qui:
<a class=”carousel-control left” href=”#this-carousel-id” data-slide=”prev”>‹</a>
<a class=”carousel-control right” href=”#this-carousel-id” data-slide=”next”>›</a>
class=”carousel slide” è la classe css che fa da contenitore alla galleria che possiamo modificare direttamente nel css.
L’elemento carousel-inner è la cornice dell’immagine, se volessimo ad esempio inserire un bordo, per esempio, basterebbe inserire nel css, alla regola .carousel-inner – border: solid 5px;
La regola item invece dovete sapere che è caratterizzata dalla fondamentale regola css display, la quale permette ai div di rimanere nascosti e sovrapposti l’un l’altro.
POTETE SCARICARE LA CARTELLA CON I FILE HTML, CSS E JAVASCRIPT QUI.
Promozioni
Potrebbe interessarti
Commenti