Bootstrap Complemento de carrusel (Carousel)
El complemento de carrusel (Carousel) de Bootstrap es una forma flexible y receptiva de agregar un control deslizante a su sitio. Además, el contenido también es lo suficientemente flexible, puede ser imágenes, marcos incrustados, videos o cualquier otro tipo de contenido que desee colocar.
Si desea hacer referencia a las funciones de este complemento por separado, deberá hacer referencia acarousel.js. O, comoDescripción general de los complementos de Bootstrapcomo se menciona en el capítulo, puede hacer referencia abootstrap.jso la versión comprimida debootstrap.min.js。
Ejemplo
A continuación se muestra una presentación de diapositivas simple, que utiliza el complemento de carrusel (Carousel) de Bootstrap para mostrar un componente genérico de elementos en bucle. Para implementar el carrusel, solo necesita agregar el código con esa marca. No necesita usar atributos data, solo un desarrollo simple basado en clases.
Ejemplo
<div id="myCarousel" class="carousel slide">
<!--Indicadores del carrusel (Carousel)-->
<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>
</ol>
<!--Elementos del carrusel (Carousel)-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Navegación del carrusel (Carousel)-->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
Pruébelo »
El resultado se muestra a continuación:
Títulos opcionales
Puede a través de.itemdentro del.carousel-captionelemento agregar títulos a las diapositivas. Solo necesita colocar cualquier HTML opcional allí, se alineará y formateará automáticamente. El siguiente ejemplo demuestra esto:
Ejemplo
<div id="myCarousel" class="carousel slide">
<!--Indicadores del carrusel (Carousel)-->
<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>
</ol>
<!--Elementos del carrusel (Carousel)-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
<div class="carousel-caption">Título 1</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
<div class="carousel-caption">Título 2</div>
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
<div class="carousel-caption">Título 3</div>
</div>
</div>
<!--Navegación del carrusel (Carousel)-->
<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>
Pruébelo »
El resultado se muestra a continuación:
Uso
- Mediante el atributo data: Usando el atributo data, puede controlar fácilmente la posición del carrusel (Carousel).
- El atributodata-slideacepta la palabra claveprevonext, que se utiliza para cambiar la posición de la diapositiva en relación con la posición actual.
- Utilicedata-slide-topara pasar un índice de diapositiva sin procesar al carrusel,data-slide-to="2"moverá el control deslizante a un índice específico, contando desde 0.
- data-ride="carousel"El atributo se utiliza para marcar que el carrusel comience a reproducirse al cargar la página.
- Mediante JavaScript: El carrusel (Carousel) se puede invocar manualmente mediante JavaScript, como se muestra a continuación:
$('.carousel').carousel()
Opciones
Hay algunas opciones que se pasan mediante el atributo data o JavaScript. La siguiente tabla enumera estas opciones:
| Nombre de la opción | Tipo/Valor predeterminado | Nombre del atributo data | Descripción |
|---|---|---|---|
| interval | number Valor predeterminado: 5000 | data-interval | La cantidad de tiempo de retraso entre cada elemento en el ciclo automático. Si es false, el carrusel no se reproducirá automáticamente. |
| pause | string Valor predeterminado: "hover" | data-pause | Pausa el ciclo del carrusel cuando el mouse entra y lo reanuda cuando el mouse sale. |
| wrap | boolean Valor predeterminado: true | data-wrap | Si el carrusel se repite continuamente. |
Métodos
A continuación se presentan algunos métodos útiles en el complemento de carrusel (Carousel):
| Método | Descripción | Ejemplo |
|---|---|---|
| .carousel(options) | Inicializa el carrusel con un objeto options opcional y comienza a recorrer los elementos. |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | Recorre los elementos del carrusel de izquierda a derecha. |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | Detiene el ciclo de elementos del carrusel. |
$('#identifier').carousel('pause') |
| .carousel(number) | Recorre el carrusel hasta un marco específico (contando desde 0, similar a una matriz). |
$('#identifier').carousel(number) |
| .carousel('prev') | Recorre el carrusel hasta el elemento anterior. |
$('#identifier').carousel('prev') |
| .carousel('next') | Recorre el carrusel hasta el siguiente elemento. |
$('#identifier').carousel('next') |
Ejemplo
El siguiente ejemplo demuestra el uso de los métodos:
Ejemplo
<div id="myCarousel" class="carousel slide">
<!--Indicadores del carrusel (Carousel)-->
<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>
</ol>
<!--Elementos del carrusel (Carousel)-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Navegación del carrusel (Carousel)-->
<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>
<!--Botones de control-->
<div style="text-align:center;">
<input type="button" class="btn start-slide" value="Start">
<input type="button" class="btn pause-slide" value="Pause">
<input type="button" class="btn prev-slide" value="Previous Slide">
<input type="button" class="btn next-slide" value="Next Slide">
<input type="button" class="btn slide-one" value="Slide 1">
<input type="button" class="btn slide-two" value="Slide 2">
<input type="button" class="btn slide-three" value="Slide 3">
</div>
</div>
<script>
$(function(){
//Inicializar carrusel
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
//Detener carrusel
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
//Recorrer al elemento anterior
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
//Recorrer al siguiente elemento
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
//Recorrer a un marco específico
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
Pruébelo »
El resultado se muestra a continuación:
Eventos
La siguiente tabla enumera los eventos que se utilizan en el complemento de carrusel (Carousel). Estos eventos se pueden utilizar como ganchos (hooks) en funciones.
| Evento | Descripción | Ejemplo |
|---|---|---|
| slide.bs.carousel | Este evento se dispara inmediatamente cuando se llama al método de instancia slide. |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | Este evento se dispara cuando el carrusel completa la transición de diapositivas. |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
Ejemplo
El siguiente ejemplo demuestra el uso de los eventos:
Ejemplo
<div id="myCarousel" class="carousel slide">
<!--Indicadores del carrusel (Carousel)-->
<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>
</ol>
<!--Elementos del carrusel (Carousel)-->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!--Navegación del carrusel (Carousel)-->
<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>
<script>
$(function(){
$('#myCarousel').on('slide.bs.carousel', function () {
alert("Este evento se dispara inmediatamente cuando se llama al método de instancia slide.");
});
});
</script>
Pruébelo »
El resultado se muestra a continuación:
