English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico de Bootstrap

Plugin de Bootstrap

Plugin de carrusel (Carousel) de Bootstrap

El plugin de carrusel (Carousel) de Bootstrap es una manera flexible y responsive de agregar deslizadores a su sitio. Además, el contenido también es lo suficientemente flexible, puede ser imágenes, marcos incrustados, videos u otros tipos de contenido que desee colocar.

Si desea referenciar funcionalidades del plugin individualmente,则需要引用 carousel.js。O, como Vista general de plugins de Bootstrap Como se mencionó en el capítulo anterior, puede referenciar bootstrap.js o la versión comprimida bootstrap.min.js。

Ejemplo en línea

A continuación se muestra una diapositiva simple que utiliza el plugin de carrusel (Carousel) de Bootstrap para mostrar un componente genérico de elemento de reproducción en bucle. Para implementar el carrusel, simplemente agregue el código con esta etiqueta. No es necesario usar la propiedad data, solo es necesario desarrollar con clase simple.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<título> Ejemplo de Bootstrap　-　Plugin de carrusel (Carousel) simple</título>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	!--　Indicadores del carrusel (Carousel)　-->
	<ol class="carousel-indicadores">
		<li data-objetivo="#myCarousel" data-diapositiva-to="0" class="active"></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="1></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="2></li>
	</ol>　　　
	!--　Elementos del carrusel (Carousel)　-->
	<div class="carousel-interno">
		<div class="item active">
			<img src="/correr/imagenes/diapositiva1.png" alt="Diapositiva primera">
		</div>
		<div class="item">
			<img src="/correr/imagenes/diapositiva2.png" alt="Diapositiva segunda">
		</div>
		<div class="item">
			<img src="/correr/imagenes/diapositiva3.png" alt="Diapositiva tercera">
		</div>
	</div>
	!--　Navegación de carrusel (Carousel)　-->
	<a class="izquierda carousel-control" href="#myCarousel" role="botón" data-deslizar="anterior">
		<span class="glyphicon glyphicon-flecha-izquierda" aria-oculto="true"></span>
		<span class="sr-sólo">Anterior</span>
	</a>}}
	<a class="derecha carousel-control" href="#myCarousel" role="botón" data-deslizar="siguiente">
		<span class="glyphicon glyphicon-flecha-derecha" aria-oculto="true"></span>
		<span class="sr-sólo">Siguiente</span>
	</a>}}
</div>　
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

título opcional

Puede usar .item dentro de .carousel-caption El elemento agrega un título al diapositivo. Sólo tiene que colocar aquí cualquier HTML opcional, se alineará y formateará automáticamente. A continuación se muestra un ejemplo de esto:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<título> Ejemplo de Bootstrap　-　Título del plugin de carrusel (Carousel)/título>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	!--　Indicadores del carrusel (Carousel)　-->
	<ol class="carousel-indicadores">
		<li data-objetivo="#myCarousel" data-diapositiva-to="0" class="active"></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="1></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="2></li>
	</ol>　　　
	!--　Elementos del carrusel (Carousel)　-->
	<div class="carousel-interno">
		<div class="item active">
			<img src="/correr/imagenes/diapositiva1.png" alt="Diapositiva primera">
			<div class="carousel-caption">Título　1</div>
		</div>
		<div class="item">
			<img src="/correr/imagenes/diapositiva2.png" alt="Diapositiva segunda">
			<div class="carousel-caption">Título　2</div>
		</div>
		<div class="item">
			<img src="/correr/imagenes/diapositiva3.png" alt="Diapositiva tercera">
			<div class="carousel-caption">Título　3</div>
		</div>
	</div>
	!--　Navegación de carrusel (Carousel)　-->
	<a class="izquierda carousel-control" href="#myCarousel" role="botón" data-deslizar="anterior">
	　　　　<span class="glyphicon glyphicon-flecha-izquierda" aria-oculto="true"></span>
	　　　　<span class="sr-sólo">Anterior</span>
	</a>}}
	<a class="derecha carousel-control" href="#myCarousel" role="botón" data-deslizar="siguiente">
	　　　　<span class="glyphicon glyphicon-flecha-derecha" aria-oculto="true"></span>
	　　　　<span class="sr-sólo">Siguiente</span>
	</a>}}
</div>　
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:


Uso

  • A través de la propiedad data：Se puede controlar fácilmente la posición del carrusel (Carousel) utilizando la propiedad data.

    • Atributo data-diapositiva Aceptar prev o next，se utiliza para cambiar la posición del diapositivo con respecto a la posición actual.

    • Usar data-diapositiva-to Para pasar un índice de deslizamiento original al carrusel.data-diapositiva-para="2" Mover el control deslizante a un índice específico, el índice comienza a contar desde 0.

    • data-ride="carousel" Attribute is used to mark that the carousel starts the animation when the page is loaded.

  • Through JavaScript: The Carousel can be manually called via JavaScript as shown below:

    $('.carousel').carousel()

Options

Some options are passed through data attributes or JavaScript. The following table lists these options:

Option nameType/Default valueData attribute name描述
intervalnumber
Default value:5000		data-intervalThe delay time between automatic looping of each item. If false, the carousel will not loop automatically.
pausestring
Default value: "hover"		data-pausePause the loop of carousel when the mouse enters and resume when the mouse leaves.
wrapboolean
Default value: true		data-wrapWhether the carousel loops continuously.

Methods

The following are some useful methods of the Carousel plugin:

Methods描述Ejemplo
.carousel(options)Initialize the carousel with an optional options object and start the loop of items.
$('#identifier').carousel({
　　　　interval:　2000
})
.carousel('cycle')Loop items from left to right.
$('#identifier').carousel('cycle')
.carousel('pause')Stop the loop of carousel items.
$('#identifier').carousel('pause')
.carousel(number)Loop to a specific frame (starting from 0, similar to an array).
$('#identifier').carousel(number)
.carousel('prev')Loop to the previous item.
$('#identifier').carousel('prev')
.carousel('next')Loop to the next item.
$('#identifier').carousel('next')

Ejemplo en línea

The following examples demonstrate the usage of the method:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<título> Ejemplo de Bootstrap　-　Carousel plugin method</título>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	!--　Indicadores del carrusel (Carousel)　-->
	<ol class="carousel-indicadores">
		<li data-objetivo="#myCarousel" data-diapositiva-to="0" class="active"></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="1></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="2></li>
	</ol>　　　
	!--　Elementos del carrusel (Carousel)　-->
	<div class="carousel-interno">
		<div class="item active">
		<img src="/correr/imagenes/diapositiva1.png" alt="Diapositiva primera">
		</div>
		<div class="item">
		<img src="/correr/imagenes/diapositiva2.png" alt="Diapositiva segunda">
		</div>
		<div class="item">
		<img src="/correr/imagenes/diapositiva3.png" alt="Diapositiva tercera">
		</div>
	</div>
	!--　Navegación de carrusel (Carousel)　-->
	<a class="izquierda carousel-control" href="#myCarousel" role="botón" data-deslizar="anterior">
	　　　　<span class="glyphicon glyphicon-flecha-izquierda" aria-oculto="true"></span>
	　　　　<span class="sr-sólo">Anterior</span>
	</a>}}
	<a class="derecha carousel-control" href="#myCarousel" role="botón" data-deslizar="siguiente">
	　　　　<span class="glyphicon glyphicon-flecha-derecha" aria-oculto="true"></span>
	　　　　<span class="sr-sólo">Siguiente</span>
	</a>}}
</div>
!--　control button　-->
<div style="text-align:center;">
	<input type="button" class="btn start-slide"　value="Start">
	
	
	
	Prueba y observa ‹/›

Los resultados se muestran a continuación:


事件

下表列出了轮播(Carousel)插件中要用到的事件。这些事件可在函数中作为钩子使用。

事件描述Ejemplo
slide.bs.carousel当调用 slide 示例方法时立即触发该事件。
$('#identifier').on('slide.bs.carousel', function () {
　　　　//　执行一些动作...
})
slid.bs.carousel当轮播完成幻灯片过渡效果时触发该事件。
$('#identifier').on('slid.bs.carousel', function () {
　　　　//　执行一些动作...
})

Ejemplo en línea

El siguiente ejemplo muestra el uso de eventos:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<título> Ejemplo de Bootstrap　-　Eventos del plugin de carrusel (Carousel)</título>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</<head>
<body>
<div id="myCarousel" class="carousel slide">
	!--　Indicadores del carrusel (Carousel)　-->
	<ol class="carousel-indicadores">
		<li data-objetivo="#myCarousel" data-diapositiva-para="0"　
			clase="active"></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="1></li>
		<li data-objetivo="#myCarousel" data-diapositiva-para="2></li>
	</ol>　　　
	!--　Elementos del carrusel (Carousel)　-->
	<div class="carousel-interno">
		<div class="item active">
			<img src="/correr/imagenes/diapositiva1.png" alt="Diapositiva primera">
		</div>
		<div class="item">
			<img src="/correr/imagenes/diapositiva2.png" alt="Diapositiva segunda">
		</div>
		<div class="item">
			<img src="/correr/imagenes/diapositiva3.png" alt="Diapositiva tercera">
		</div>
	</div>
	!--　Navegación de carrusel (Carousel)　-->
	<a class="izquierda carousel-control" href="#myCarousel" role="botón" data-deslizar="anterior">
	　　　　<span class="glyphicon glyphicon-flecha-izquierda" aria-oculto="true"></span>
	　　　　<span class="sr-sólo">Anterior</span>
	</a>}}
	<a class="derecha carousel-control" href="#myCarousel" role="botón" data-deslizar="siguiente">
	　　　　<span class="glyphicon glyphicon-flecha-derecha" aria-oculto="true"></span>
	　　　　<span class="sr-sólo">Siguiente</span>
	</a>}}
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("Este evento se desencadena inmediatamente cuando se llama al método de ejemplo de slide.");
		});
	});
</script>
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

Normas de codificación HTML de BootstrapComplemento de plegable de Bootstrap