HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Carousel

Il plugin Carousel è destinato alla creazione di slideshow di immagini e pannelli di testo.

Markup HTML di base

Uno slideshow realizzato con il componente Carousel consta di tre sezioni:

  • le immagini o i pannelli;
  • gli indicatori di posizione che fungono anche da navigazione;
  • i controlli, ovvero le frecce di avanzamento verso la slide successiva e precedente.

Per realizzare lo slideshow si racchiudono le slide e i controlli di navigazione all'interno div che deve avere un id e le classi .carousel e .slide.

All'interno di questo div si annida un altro div con classe .carousel-inner che a sua volta racchiude le slide vere e proprie. I div con le immagini devono avere la classe .item. Le immagini possono essere accompagnate da una didascalia contraddistinta da un div con classe .carousel-caption.

<div id="slideshow" class="carousel slide">
 <div class="carousel-inner">
  <div class="item active">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  <div class="item active">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
  <div class="item active">
   <img src="..." alt="...">
   <div class="carousel-caption">
    ...
   </div>
  </div>
 </div>

<!-- Indicatori di posizione -->
 <ol class="carousel-indicators">
  <li data-target="#slideshow" data-slide-to="0" class="active"></li>
  <li data-target="#slideshow" data-slide-to="1"></li>
  <li data-target="#slideshow" data-slide-to="2"></li>
 </ol>

<!-- Controlli -->
 <a class="left carousel-control" href="#slideshow" data-slide="prev">
 <span class="icon-prev"></span>
 </a>
 <a class="right carousel-control" href="#slideshow" data-slide="next">
 <span class="icon-next"></span>
 </a>
</div>