Carrossel

Um componente de apresentação de slides para percorrer elementos — imagens ou slides de texto — como um carrossel.

Como funciona

O carrossel é uma apresentação de slides para percorrer uma série de conteúdo, construída com transformações CSS 3D e um pouco de JavaScript. Ele funciona com uma série de imagens, texto ou marcação personalizada. Também inclui suporte para controles e indicadores anteriores/próximos.

Nos navegadores em que a API de visibilidade da página é compatível, o carrossel evitará o deslizamento quando a página da Web não estiver visível para o usuário (como quando a guia do navegador estiver inativa, a janela do navegador estiver minimizada etc.).

Esteja ciente de que os carrosséis aninhados não são suportados e os carrosséis geralmente não são compatíveis com os padrões de acessibilidade.

Por fim, se você estiver construindo nosso JavaScript a partir da fonte, ele requerutil.js .

Exemplo

Os carrosséis não normalizam automaticamente as dimensões do slide. Como tal, pode ser necessário usar utilitários adicionais ou estilos personalizados para dimensionar o conteúdo adequadamente. Embora os carrosséis suportem controles e indicadores anteriores/seguintes, eles não são explicitamente necessários. Adicione e personalize como achar melhor.

A .activeclasse precisa ser adicionada a um dos slides , caso contrário o carrossel não ficará visível. Certifique-se também de definir um id exclusivo .carouselpara controles opcionais, especialmente se você estiver usando vários carrosséis em uma única página. Os elementos de controle e indicador devem ter um data-targetatributo (ou hrefpara links) que corresponda ao id do .carouselelemento.

Somente slides

Aqui está um carrossel apenas com slides. Observe a presença de .d-blocke .w-100nas imagens do carrossel para evitar o alinhamento da imagem padrão do navegador.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Com controles

Adicionando os controles anterior e seguinte:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Com indicadores

Você também pode adicionar os indicadores ao carrossel, juntamente com os controles.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Com legendas

Adicione legendas aos seus slides facilmente com o .carousel-captionelemento em qualquer arquivo .carousel-item. Eles podem ser facilmente ocultados em viewports menores, conforme mostrado abaixo, com utilitários de exibição opcionais . Nós os ocultamos inicialmente com .d-nonee os trazemos de volta em dispositivos de tamanho médio com .d-md-block.

Rótulo do primeiro slide

Nulla vitae elit libero, um pharetra augue mollis interdum.

Rótulo do segundo slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rótulo do terceiro slide

Praesent comodo cursus magna, vel scelerisque nisl consectetur.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Adicione .carousel-fadeao seu carrossel para animar slides com uma transição de fade em vez de um slide.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Uso

Por atributos de dados

Use atributos de dados para controlar facilmente a posição do carrossel. data-slideaceita as palavras-chave prevou next, que altera a posição do slide em relação à sua posição atual. Como alternativa, use data-slide-topara 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 animado a partir do carregamento da página. Ele não pode ser usado em combinação com a inicialização JavaScript explícita (redundante e desnecessária) do mesmo carrossel.

Por JavaScript

Chame o carrossel manualmente com:

$('.carousel').carousel()

Opções

As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção a data-, como em data-interval="".

Nome	Modelo	Predefinição	Descrição
intervalo	número	5000	A quantidade de tempo de atraso entre o ciclo automático de um item. Se for falso, o carrossel não fará o ciclo automaticamente.
teclado	boleano	verdadeiro	Se o carrossel deve reagir a eventos de teclado.
pausa	seqüência \| boleano	"flutuar"	Se definido como `"hover"`, pausa o ciclo do carrossel ligado `mouseenter`e retoma o ciclo do carrossel ligado `mouseleave`. Se definido como `false`, passar o mouse sobre o carrossel não o pausará. Em dispositivos habilitados para toque, quando definido como `"hover"`, o ciclismo fará uma pausa `touchend`(quando o usuário terminar de interagir com o carrossel) por dois intervalos, antes de retomar automaticamente. Observe que isso é um acréscimo ao comportamento do mouse acima.
passeio	corda	falso	Reproduz automaticamente o carrossel depois que o usuário alterna manualmente o primeiro item. Se for "carrossel", reproduz automaticamente o carrossel no carregamento.
enrolar	boleano	verdadeiro	Se o carrossel deve circular continuamente ou ter paradas bruscas.

Métodos

Métodos e transições assíncronas

Todos os métodos de API são assíncronos e iniciam uma transição . Eles retornam ao chamador assim que a transição é iniciada, mas antes que ela termine . Além disso, uma chamada de método em um componente de transição será ignorada .

Consulte nossa documentação JavaScript para obter mais informações.

`.carousel(options)`

Inicializa o carrossel com opções opcionais objecte começa a percorrer os itens.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

Percorre os itens do carrossel da esquerda para a direita.

`.carousel('pause')`

Interrompe o carrossel de percorrer os itens.

`.carousel(number)`

Alterna o carrossel para um quadro específico (baseado em 0, semelhante a uma matriz). Retorna ao chamador antes que o item de destino seja mostrado (ou seja, antes que o slid.bs.carouselevento ocorra).

`.carousel('prev')`

Volta ao item anterior. Retorna ao chamador antes que o item anterior tenha sido mostrado (ou seja, antes que o slid.bs.carouselevento ocorra).

`.carousel('next')`

Alterna para o próximo item. Retorna ao chamador antes que o próximo item seja mostrado (ou seja, antes que o slid.bs.carouselevento ocorra).

`.carousel('dispose')`

Destrói o carrossel de um elemento.

Eventos

A classe carrossel do Bootstrap expõe dois eventos para conectar-se à funcionalidade do carrossel. Ambos os eventos têm as seguintes propriedades adicionais:

direction: A direção na qual o carrossel está deslizando (ou "left"ou "right").
relatedTarget: o elemento DOM que está sendo posicionado como o item ativo.
from: O índice do item atual
to: O índice do próximo item

Todos os eventos de carrossel são disparados no próprio carrossel (ou seja, no <div class="carousel">).

Tipo de evento	Descrição
slide.bs.carrossel	Esse evento é acionado imediatamente quando o `slide`método de instância é invocado.
slide.bs.carrossel	Este evento é acionado quando o carrossel conclui sua transição de slides.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Alterar duração da transição

A duração da transição .carousel-itempode ser alterada com a $carousel-transitionvariável Sass antes de compilar ou estilos personalizados se você estiver usando o CSS compilado. Se várias transições forem aplicadas, certifique-se de que a transição de transformação seja definida primeiro (por exemplo transition: transform 2s ease, opacity .5s ease-out, ).