JS carrusel (carousel.js)
El plug-in del carrusel es un componente para el ciclismo a través de elementos, como un carrusel (diapositivas).
Para ver un tutorial sobre los carruseles, lea nuestra Bootstrap carrusel Tutorial .
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).
Las clases del carrusel Plugin
| Clase | Descripción |
|---|---|
| .carousel | Crea un carrusel |
| .slide | Añade una transición CSS y efecto de animación cuando se desliza de un elemento al siguiente. Eliminar a esta clase si no desea este efecto |
| .carousel-indicators | Añade indicadores para el carrusel. Estos 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) |
| .carousel-inner | Añade diapositivas al carrusel |
| .item | Especifica el contenido de cada diapositiva |
| .left carousel-control | Añade un botón izquierdo para el carrusel, que permite al usuario volver entre las diapositivas |
| .right carousel-control | Añade un botón a la derecha al carrusel, que permite al usuario ir hacia adelante entre las diapositivas |
| .carousel-caption | Especifica una leyenda para el carrusel |
Via data-* Atributos
El data-ride="carousel" de atributos activa el carrusel.
La data-slide y data-slide-to atributos Especifica que se deslizan a donde ir.
El data-slide atributo acepta dos valores: Anterior o siguiente, mientras que data-slide-to aceptar los números.
Ejemplo
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
Inténtalo tú mismo " a través de JavaScript
Habilitar manualmente con:
Ejemplo
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Inténtalo tú mismo " Opciones de transportador
Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de de datos, al igual que en los datos de intervalo = "".
| Nombre | Tipo | Defecto | Descripción | Intentalo |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Especifica el retardo (en milisegundos) entre cada diapositiva. Nota: Ajuste el intervalo en false para detener los objetos se deslicen de forma automática | El uso de JS Utilizando datos |
| pause | string, or the boolean false | "hover" | Hace una pausa en el carrusel de pasar por la siguiente diapositiva cuando el puntero del ratón entra en el carrusel, y reanuda el deslizamiento cuando el puntero del ratón sale del carrusel Nota: pausa establece en false para detener la capacidad para hacer una pausa en vuelo estacionario | El uso de JS Utilizando datos |
| wrap | boolean | true | Especifica si el carrusel debe pasar por todas las diapositivas de forma continua, o detenerse en la última diapositiva
| El uso de JS Utilizando datos |
Métodos carrusel
En la siguiente tabla se enumeran los métodos carrusel todos disponibles.
| Método | Descripción | Intentalo |
|---|---|---|
| .carousel( options ) | Activa el carrusel con una opción. Ver opciones anteriores para valores válidos | Intentalo |
| .carousel("cycle") | Pasa a través de los elementos del carrusel de izquierda a derecha | Intentalo |
| .carousel("pause") | Detiene el carrusel de pasar por artículos | Intentalo |
| .carousel(number) | Va a un elemento especificado (basado en cero: primer elemento es 0, el segundo elemento es 1, etc ..) | Intentalo |
| .carousel("prev") | Va al elemento anterior | Intentalo |
| .carousel("next") | Va a la orden del día, | Intentalo |
Eventos del carrusel
En la siguiente tabla se enumeran los eventos carrusel todos disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| slide.bs.carousel | Se produce cuando el carrusel está a punto de deslizarse de un elemento a otro | Intentalo |
| slid.bs.carousel | Se produce cuando el carrusel ha terminado de deslizamiento de un elemento a otro | Intentalo |
Ejemplos
Leyendas de 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 "