El carrusel Plugin
El plug-in del carrusel es un componente para el ciclismo a través de elementos, como un carrusel (diapositivas).
Tip: Los complementos pueden ser incluidos de forma individual (usando Bootstrap's individuales "carousel.js" de archivos), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js" ).
Ejemplo carrusel
La Canea
El ambiente en Chania tiene un toque de Florencia y Venecia.
La Canea
El ambiente en Chania tiene un toque de Florencia y Venecia.
Flores
flores hermosas en Kolymbari, Creta.
Flores
flores hermosas en Kolymbari, Creta.
Nota: Los carruseles no son compatibles correctamente en Internet Explorer 9 y versiones anteriores (ya que utilizan las transiciones y animaciones CSS3 para lograr el efecto de diapositivas).
Cómo crear un carrusel
El siguiente ejemplo muestra cómo crear un carrusel básica:
Ejemplo
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Inténtalo tú mismo " ejemplo Explicación
La más externa <div> :
Carruseles requieren el uso de un identificador (en este caso id="myCarousel" ) para los controles de carrusel para funcionar correctamente.
El class="carousel" especifica que este <div> contiene un carrusel.
El .slide clase añade un efecto de transición CSS y animación, lo que hace que los objetos se deslicen al mostrar un nuevo elemento. Omite esta clase si no desea este efecto.
El data-ride="carousel" de atributos dice Bootstrap para comenzar la animación del carrusel inmediatamente cuando se carga la página.
El "Indicadores" parte:
Los indicadores son los pequeños puntos en la parte inferior de cada diapositiva (que indica el número de diapositivas que hay en el carrusel, y que se deslizan el usuario está viendo actualmente).
Los indicadores se especifican en una lista ordenada con clase .carousel-indicators .
La data-target atributo apunta a la identificación del carrusel.
La data-slide-to atributo especifica que se deslizan para ir a, al hacer clic sobre el punto específico.
El "Envoltura para las diapositivas" parte:
Las diapositivas se especifican en un <div> con la clase .carousel-inner .
El contenido de cada diapositiva se define en un <div> con la clase .item . Esto puede ser texto o imágenes.
El .active clase tiene que ser añadido a una de las diapositivas. De lo contrario, el carrusel no será visible.
La parte "controles izquierdo y derecho":
Este código agrega botones "correctas" que permite al usuario ir y venir entre las diapositivas de forma manual "izquierda" y.
El data-slide atributo acepta la palabra clave "prev" o "next" , que altera la posición de deslizamiento con respecto a su posición actual.
Añadir títulos a las diapositivas
Añadir <div class="carousel-caption"> dentro de cada <div class="item"> para crear un título para cada diapositiva:
Ejemplo
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Inténtalo tú mismo " Completar Bootstrap carrusel de referencia
Para una referencia completa de todas las opciones de carrusel, métodos y eventos, visite nuestro Bootstrap JS carrusel de referencia .