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

Tutorial básico do Bootstrap

Plugin do Bootstrap

Plugin de carrossel (Carousel) do Bootstrap

O plugin de carrossel (Carousel) do Bootstrap é uma maneira flexível e responsiva de adicionar deslizadores ao site. Além disso, o conteúdo é suficientemente flexível, podendo ser imagens, frames incorporados, vídeos ou qualquer tipo de conteúdo que desejar inserir.

Se desejar referenciar apenas as funções do plugin, é necessário referenciar carousel.js。Ou, como Visão geral de plugins do Bootstrap Como mencionado no capítulo anterior, pode-se referenciar bootstrap.js ou a versão comprimida bootstrap.min.js。

Exemplo Online

A seguir, há um exemplo simples de slide, que usa o plugin de carrossel (Carousel) do Bootstrap para exibir um componente genérico de elemento de reprodução em loop. Para implementar o carrossel, é necessário apenas adicionar o código com essa marcação. Não é necessário usar a propriedade data, basta desenvolvimento simples baseado em classe.

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Plugin de carrossel (Carousel) simples</title>
	<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 do Carousel　-->
	<ol class="carousel-indicadores">
		<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>　　　
	<!--　Itens do Carousel　-->
	<div class="carousel-interno">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="First slide">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Third slide">
		</div>
	</div>
	<!--　Navegação de Carousel　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-seta-left" aria-hidden="true"></span>
		<span class="sr-only">Anterior</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-seta-right" aria-hidden="true"></span>
		<span class="sr-only">Próximo</span>
	</a>
</div>　
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos a seguir:

título opcional

Pode-se usar .item dentro de .carousel-caption O elemento adiciona um título ao slide. Basta colocar qualquer HTML opcional aqui, ele alinhara e formatará automaticamente. O exemplo a seguir ilustra isso:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Título do plugin de carrossel (Carousel)</title>
	<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 do Carousel　-->
	<ol class="carousel-indicadores">
		<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>　　　
	<!--　Itens do Carousel　-->
	<div class="carousel-interno">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="First slide">
			<div class="carousel-caption">Título　1</div>
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Second slide">
			<div class="carousel-caption">Título　2</div>
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Third slide">
			<div class="carousel-caption">Título　3</div>
		</div>
	</div>
	<!--　Navegação de Carousel　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-seta-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Anterior</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-seta-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Próximo</span>
	</a>
</div>　
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos a seguir:


Uso

  • através da propriedade：Pode-se controlar facilmente a posição do carrossel (Carousel) usando a propriedade data.

    • propriedade data-slide Aceita o atributo prev ou next，usado para alterar a posição do slide em relação à posição atual.

    • Usar data-slide-to Para passar um índice de deslize original para o carrossel,data-slide-to="2" Movemos o deslizador para um índice específico, contando a partir de 0.

    • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

  • 通过 JavaScript：轮播(Carousel)可通过 JavaScript 手动调用，如下所示：

    $('.carousel').carousel()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称类型/默认值Data 属性名称Descrição
intervalnumber
默认值：5000		data-interval自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pausestring
默认值："hover"		data-pause鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrapboolean
默认值：true		data-wrap轮播是否连续循环。

方法

下面是一些轮播(Carousel)插件中有用的方法：

方法DescriçãoExemplo
.carousel(options)初始化轮播为可选的 options 对象，并开始循环项目。
$('#identifier').carousel({
　　　　interval:　2000
})
.carousel('cycle')从左到右循环轮播项目。
$('#identifier').carousel('cycle')
.carousel('pause')停止轮播循环项目。
$('#identifier').carousel('pause')
.carousel(number)循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。
$('#identifier').carousel(number)
.carousel('prev')循环轮播到上一个项目。
$('#identifier').carousel('prev')
.carousel('next')循环轮播到下一个项目。
$('#identifier').carousel('next')

Exemplo Online

下面的示例演示了方法的用法：

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　轮播(Carousel)插件方法</title>
	<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 do Carousel　-->
	<ol class="carousel-indicadores">
		<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>　　　
	<!--　Itens do Carousel　-->
	<div class="carousel-interno">
		<div class="item active">
		<img src="/run/images/slide1.png" alt="First slide">
		</div>
		<div class="item">
		<img src="/run/images/slide2.png" alt="Second slide">
		</div>
		<div class="item">
		<img src="/run/images/slide3.png" alt="Third slide">
		</div>
	</div>
	<!--　Navegação de Carousel　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-seta-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Anterior</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-seta-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Próximo</span>
	</a>
</div>
<!--　控制按钮　-->
<div style="text-align:center;">
	<input type="button" class="btn start-slide"　value="Start">
	
	
	
	Teste e veja ‹/›

Os resultados são exibidos a seguir:


Evento

A tabela a seguir lista os eventos que são usados no plugin de carrossel (Carousel). Esses eventos podem ser usados como ganchos em funções.

EventoDescriçãoExemplo
slide.bs.carouselOcorre este evento imediatamente ao chamar o método de exemplo slide.
$('#identifier').on('slide.bs.carousel', function () {
　　　　//　Executar algumas ações...
})
slid.bs.carouselOcorre este evento quando a transição de efeito de deslize do carrossel é concluída.
$('#identifier').on('slid.bs.carousel', function () {
　　　　//　Executar algumas ações...
})

Exemplo Online

Os seguintes exemplos demonstram o uso de eventos:

Exemplo Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Eventos do Plugin Carousel/title>
	<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 do Carousel　-->
	<ol class="carousel-indicadores">
		<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>　　　
	<!--　Itens do Carousel　-->
	<div class="carousel-interno">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="First slide">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Second slide">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Third slide">
		</div>
	</div>
	<!--　Navegação de Carousel　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-seta-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Anterior</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-seta-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Próximo</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("O evento é acionado imediatamente ao chamar o método slide.");
		});
	});
</script>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos a seguir:

Norma de Codificação HTML BootstrapPlugin de Dobrável Bootstrap