Bootstrap - Plugin Carrossel

O carrossel Bootstrap é uma maneira flexível e responsiva de adicionar um controle deslizante ao seu site. Além de ser responsivo, o conteúdo é flexível o suficiente para permitir imagens, iframes, vídeos ou qualquer tipo de conteúdo que você desejar.

Se você deseja incluir esta funcionalidade de plug-in individualmente, você precisará do carousel.js. Além disso, conforme mencionado no capítulo Visão geral dos plug-ins de bootstrap , você pode incluir bootstrap.js ou bootstrap.min.js minificado .

Exemplo

Uma apresentação de slides simples abaixo mostra um componente genérico para percorrer os elementos como um carrossel, usando o plug-in de carrossel Bootstrap. Para implementar o carrossel, você só precisa adicionar o código com a marcação. Não há necessidade de atributos de dados, apenas desenvolvimento simples baseado em classe.

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
</div>

Legendas opcionais

Você pode adicionar legendas aos slides facilmente com o .carousel-caption elemento dentro de qualquer .item. Coloque qualquer HTML opcional lá e ele será alinhado e formatado automaticamente. O exemplo a seguir demonstra isso -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>
   
   <!-- Carousel nav --> 
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

Uso

Via data attributes - Use atributos de dados para controlar facilmente a posição do carrossel.
- Atributo data-slideaceita as palavras-chave prev ou next , o que altera a posição do slide em relação à sua posição atual.
- Usar data-slide-to para passar um índice de slide bruto para o carrossel data-slide-to = "2", que muda a posição do slide para um índice específico começando com 0.
- o data-ride = "carousel" atributo é usado para marcar um carrossel como uma animação começando no carregamento da página.
Via JavaScript - O carrossel pode ser chamado manualmente com JavaScript conforme abaixo -

$('.carousel').carousel()

Opções

Existem algumas opções que podem ser transmitidas por meio de atributos de dados ou JavaScript, listadas na tabela a seguir -

Nome da Opção	Tipo / valor padrão	Nome do atributo de dados	Descrição
intervalo	número Padrão - 5000	intervalo de dados	A quantidade de tempo de atraso entre o ciclo automático de um item. Se for falso, o carrossel não circulará automaticamente.
pausa	string Padrão - "hover"	pausa de dados	Pausa o ciclo do carrossel no mouseenter e retoma o ciclo do carrossel na página do mouse.
embrulho	padrão booleano - verdadeiro	quebra de dados	Se o carrossel deve girar continuamente ou ter paradas bruscas.

Métodos

Aqui está uma lista de métodos úteis que podem ser usados com o código do carrossel.

Método	Descrição	Exemplo
.carossel (opções)	Inicializa o carrossel com um objeto de opções opcional e começa a percorrer os itens.	`$('#identifier').carousel({ interval: 2000 })`
.carossel ('ciclo')	Percorre os itens do carrossel da esquerda para a direita.	`$('#identifier').carousel('cycle')`
.carossel ('pausa')	Impede que o carrossel percorra os itens.	`$('#identifier')..carousel('pause')`
.carossel (número)	Percorre o carrossel para um determinado quadro (baseado em 0, semelhante a uma matriz)	`$('#identifier').carousel(number)`
.carossel ('anterior')	Volta para o item anterior.	`$('#identifier').carousel('prev')`
.carossel ('próximo')	Alterna para o próximo item.	`$('#identifier').carousel('next')`

Exemplo

O exemplo a seguir demonstra o uso de métodos -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
   
   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <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() {
	
      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });
      
      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });
      
      // Cycles the carousel to a particular frame 
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });
      
      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });
      
      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

Eventos

A classe carrossel do Bootstrap expõe dois eventos para conexão com a funcionalidade do carrossel que estão listados na tabela a seguir.

Evento	Descrição	Exemplo
slide.bs.carousel	Este evento é disparado imediatamente quando o método de instância de slide é chamado.	`$('#identifier').on('slide.bs.carousel', function () { // do something })`
slid.bs.carousel	Este evento é disparado quando o carrossel conclui sua transição de slides.	`$('#identifier').on('slid.bs.carousel', function () { // do something })`

Exemplo

O exemplo a seguir demonstra o uso de eventos -

<div id = "myCarousel" class = "carousel slide">
   
   <!-- 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>
   </ol>   
   
   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>
      
      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>
   
   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>
	
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>