JS Carousel (carousel.js)
O plug-in Carousel é um componente para andar de bicicleta através de elementos, como um carrossel (slideshow).
Para um tutorial sobre Carrosséis, leia nossa Bootstrap Carousel Tutorial .
Nota: Carrosséis não são suportados corretamente no Internet Explorer 9 e anteriores (porque eles usam transições e animações CSS3 para alcançar o efeito de slides).
As Classes Carousel Plugin
| Classe | Descrição |
|---|---|
| .carousel | Cria um carrossel |
| .slide | Adiciona uma transição CSS e efeito de animação ao deslizar de um item para outro. Remover esta classe se você não quiser este efeito |
| .carousel-indicators | Adiciona indicadores para o carrossel. Estes são os pequenos pontos na parte inferior de cada slide (que indica quantos slides existem no carrossel e que deslize o usuário está visualizando) |
| .carousel-inner | Adiciona slides para o carrossel |
| .item | Especifica o conteúdo de cada slide |
| .left carousel-control | Adiciona um botão esquerdo para o carrossel, que permite ao usuário para voltar entre os slides |
| .right carousel-control | Adiciona um botão à direita para o carrossel, que permite ao usuário ir para a frente entre os slides |
| .carousel-caption | Especifica uma legenda para o carrossel |
Via data-* Atributos
A data-ride="carousel" atributo ativa o carrossel.
O data-slide e data-slide-to atributos especifica que deslizam para onde ir.
O data-slide atributo aceita dois valores: prev ou no próximo, enquanto que data-slide-to aceitar números.
Exemplo
<!--
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">
Tente você mesmo " via JavaScript
Habilitar manualmente com:
Exemplo
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Tente você mesmo " Opções do carrossel
Opções podem ser passadas através de atributos de dados ou JavaScript. Para atributos de dados, acrescentar o nome de opção para de dados, como em dados do intervalo = "".
| Nome | Digitar | Padrão | Descrição | Tente |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Especifica o atraso (em milissegundos) entre cada slide. Nota: Ajuste o intervalo para false para impedir que os itens de deslizar automaticamente | Usando JS Usando dados |
| pause | string, or the boolean false | "hover" | Interrompe o carrossel de passar pelo próximo slide quando o ponteiro do mouse entra o carrossel, e retoma o deslizamento quando o ponteiro do mouse deixa o carrossel Nota: Defina pausa para false para impedir a possibilidade de pausar em foco | Usando JS Usando dados |
| wrap | boolean | true | Especifica se o carrossel deve passar por todos os slides de forma contínua, ou parar no último slide
| Usando JS Usando dados |
Métodos do carrossel
A tabela a seguir lista os métodos de carrossel todos disponíveis.
| Método | Descrição | Tente |
|---|---|---|
| .carousel( options ) | Ativa o carrossel com uma opção. Veja opções acima para valores válidos | Tente |
| .carousel("cycle") | Percorre os itens do carrossel da esquerda para a direita | Tente |
| .carousel("pause") | Pára o carrossel de passar por itens | Tente |
| .carousel(number) | Vai para um item especificado (zero-based: primeiro item é 0, segundo item é 1, etc ..) | Tente |
| .carousel("prev") | Vai para o item anterior | Tente |
| .carousel("next") | Vai para o próximo item | Tente |
Eventos do carrossel
A tabela a seguir lista os eventos carrossel todos disponíveis.
| Evento | Descrição | Tente |
|---|---|---|
| slide.bs.carousel | Ocorre quando o carrossel está prestes a deslizar de um item para outro | Tente |
| slid.bs.carousel | Ocorre quando o carrossel terminou de correr de um item para outro | Tente |
Exemplos
Legendas para Slides
Adicionar <div class="carousel-caption"> dentro de cada <div class="item"> para criar uma legenda para cada slide:
Exemplo
<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>
Tente você mesmo "