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.

Certifique-se de definir um ID exclusivo .carouselpara controles opcionais, especialmente se você estiver usando vários carrosséis em uma única página.

Somente slides

Aqui está um carrossel apenas com slides. Observe a presença de .d-blocke .img-fluidnas 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Com controles

Adicionando os controles anterior e seguinte:

Anterior Próximo

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Anterior Próximo

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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, a 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.

Anterior Próximo

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

Métodos

.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 para o 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">).

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