O carrossel Plugin
O plug-in Carousel é um componente para andar de bicicleta através de elementos, como um carrossel (slideshow).
Dica: Plugins podem ser incluídos individualmente (usando Bootstrap's individuais "carousel.js" arquivo), ou todos de uma vez (usando "bootstrap.js" ou "bootstrap.min.js" ).
Exemplo Carousel
Chania
A atmosfera em Chania tem um toque de Florença e Veneza.
Chania
A atmosfera em Chania tem um toque de Florença e Veneza.
Flores
flores bonitas em Kolymbari, Creta.
Flores
flores bonitas em Kolymbari, Creta.
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).
Como criar um carrossel
O exemplo a seguir mostra como criar um carrossel básica:
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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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 " exemplo Explicado
A mais externa <div> :
Carrosséis requerem o uso de um identificador (neste caso id="myCarousel" ) para controlo do carrossel para funcionar correctamente.
A class="carousel" especifica que este <div> contém um carrossel.
O .slide classe adiciona um efeito de transição CSS e animação, o que torna os itens deslize ao mostrar um novo item. Omitir esta classe se você não quiser este efeito.
A data-ride="carousel" atributo diz Bootstrap para começar a animar o carrossel imediatamente quando a página é carregada.
O "Indicadores" parte:
Os indicadores são os pequenos pontos na parte inferior de cada slide (que indica quantos slides existe no carrossel e que deslize o usuário está vendo).
Os indicadores são especificados em uma lista ordenada com classe .carousel-indicators .
O data-target atributo aponta para o id do carrossel.
A data-slide-to atributo especifica que deslizam para ir, ao clicar no ponto específico.
O "Wrapper para slides" parte:
Os slides são especificados em um <div> com a classe .carousel-inner .
O conteúdo de cada slide é definido em um <div> com a classe .item . Este pode ser um texto ou imagens.
O .active classe tem de ser adicionado a uma das lâminas. Caso contrário, o carrossel não será visível.
A parte "Esquerda e direita controla":
Este código adiciona botões "direito" que permite ao usuário ir e voltar entre os slides manualmente "esquerda" e.
O data-slide atributo aceita a palavras-chave "prev" ou "next" , que altera a posição de deslizamento em relação à sua posição atual.
Adicionar legendas aos 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 " Conclua Bootstrap Carousel Referência
Para uma referência completa de todos os carrosséis opções, métodos e eventos, ir ao nosso Bootstrap JS Carousel Referência .