in English

Carrusel

Un compoñente de presentación de diapositivas para percorrer elementos (imaxes ou diapositivas de texto) como un carrusel.

Cómo funciona

O carrusel é unha presentación de diapositivas para percorrer unha serie de contidos, construído con transformacións CSS 3D e un pouco de JavaScript. Funciona cunha serie de imaxes, texto ou marcas personalizadas. Tamén inclúe soporte para controis e indicadores anteriores/seguintes.

Nos navegadores nos que se admite a API de visibilidade da páxina , o carrusel evitará deslizarse cando a páxina web non sexa visible para o usuario (por exemplo, cando a pestana do navegador está inactiva, a xanela do navegador está minimizada, etc.).

O efecto de animación deste compoñente depende da prefers-reduced-motionconsulta multimedia. Consulta a sección de movemento reducido da nosa documentación de accesibilidade .

Teña en conta que os carrusels anidados non son compatibles e que, en xeral, os carruseles non cumpren os estándares de accesibilidade.

Por último, se estás a construír o noso JavaScript desde a fonte, requireutil.js .

Exemplo

Os carrusels non normalizan automaticamente as dimensións das diapositivas. Polo tanto, é posible que necesites usar utilidades adicionais ou estilos personalizados para dimensionar adecuadamente o contido. Aínda que os carrusels admiten controis e indicadores anteriores ou seguintes, non son necesarios de forma explícita. Engade e personaliza como creas oportuno.

A .activeclase debe engadirse a unha das diapositivas , se non, o carrusel non estará visible. Tamén asegúrate de configurar un único para idos .carouselcontrois opcionais, especialmente se estás a usar varios carruseles nunha mesma páxina. Os elementos de control e indicador deben ter un data-targetatributo (ou hrefpara as ligazóns) que coincida co iddo .carouselelemento.

Só diapositivas

Aquí tes un carrusel só con diapositivas. Teña en conta a presenza de .d-blocke .w-100nas imaxes do carrusel para evitar o aliñamento de imaxes predeterminado do navegador.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Con controis

Engadindo os controis anteriores e seguintes. Recomendamos usar <button>elementos, pero tamén pode usar <a>elementos con role="button".

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Con indicadores

Tamén podes engadir os indicadores ao carrusel, xunto cos controis.

<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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Con subtítulos

Engade subtítulos ás túas diapositivas facilmente co .carousel-captionelemento de calquera .carousel-item. Pódense ocultar facilmente en xanelas máis pequenas, como se mostra a continuación, con utilidades de visualización opcionais . Ocultámolos inicialmente con .d-nonee traémolos de volta en dispositivos de tamaño medio con .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Fundido cruzado

Engade .carousel-fadeao teu carrusel para animar as diapositivas cunha transición de fundido en lugar dunha diapositiva. Dependendo do contido do teu carrusel (por exemplo, diapositivas só de texto), quizais queiras engadir .bg-bodyou algún CSS personalizado ao .carousel-items para un fundido cruzado adecuado.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Engadir data-interval=""a a .carousel-itempara cambiar a cantidade de tempo que transcorre entre o paso automático ao seguinte elemento.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Desactiva o dedo táctil

Os carrusels admiten pasar o dedo cara á esquerda/dereita nos dispositivos con pantalla táctil para moverse entre as diapositivas. Isto pódese desactivar usando o data-touchatributo. O exemplo seguinte tampouco inclúe o data-rideatributo e ten, data-interval="false"polo que non se reproduce automaticamente.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Uso

A través de atributos de datos

Usa atributos de datos para controlar facilmente a posición do carrusel. data-slideacepta as palabras clave prevou next, que altera a posición da diapositiva en relación coa súa posición actual. Alternativamente, úsao data-slide-topara pasar un índice de diapositivas en bruto ao carrusel data-slide-to="2", que cambia a posición da diapositiva a un índice concreto que comeza por 0.

O data-ride="carousel"atributo úsase para marcar un carrusel como animación a partir da carga da páxina. Se non o utilizas data-ride="carousel"para inicializar o teu carrusel, tes que inicializalo ti mesmo. Non se pode usar en combinación coa inicialización explícita de JavaScript (redundante e innecesaria) do mesmo carrusel.

Vía JavaScript

Chamar ao carrusel manualmente con:

$('.carousel').carousel()

Opcións

As opcións pódense pasar a través de atributos de datos ou JavaScript. Para os atributos de datos, engada o nome da opción a data-, como en data-interval="".

Nome Tipo Por defecto Descrición
intervalo número 5000 A cantidade de tempo que transcorre entre o ciclo automático dun elemento. Se false, o carrusel non realizará un ciclo automaticamente.
teclado booleano verdade Indica se o carrusel debe reaccionar aos eventos do teclado.
pausa cadea | booleano 'pasar'

Se se establece en 'hover', detén o ciclo do carrusel activado mouseentere retoma o ciclo do carrusel activado mouseleave. Se se define como false, pasar o rato sobre o carrusel non o deterá.

Nos dispositivos táctiles, cando se configura como 'hover', o ciclo activarase touchend(unha vez que o usuario remate de interactuar co carrusel) durante dous intervalos, antes de retomarse automaticamente. Teña en conta que isto é ademais do comportamento anterior do rato.
paseo corda falso Reproduce automaticamente o carrusel despois de que o usuario faga un ciclo manualmente o primeiro elemento. Se se define como 'carousel', reproduce automaticamente o carrusel ao cargar.
envolver booleano verdade Se o carrusel debe circular de forma continua ou ter paradas duras.
tocar booleano verdade Indica se o carrusel debería admitir interaccións de desprazamento cara á esquerda/dereita nos dispositivos con pantalla táctil.

Métodos

Métodos asíncronos e transicións

Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .

Consulte a nosa documentación de JavaScript para obter máis información .

.carousel(options)

Inicia o carrusel cunhas opcións opcionais objecte comeza a percorrer os elementos.

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

.carousel('cycle')

Percorre os elementos do carrusel de esquerda a dereita.

.carousel('pause')

Impide que o carrusel circule por elementos.

.carousel(number)

Cicla o carrusel a un cadro particular (baseado en 0, semellante a unha matriz). Volve ao interlocutor antes de que se mostrase o elemento de destino (é dicir, antes de slid.bs.carouselque se produza o evento).

.carousel('prev')

Ciclos ao elemento anterior. Volve á persoa que chama antes de que se mostrase o elemento anterior (é dicir, antes de slid.bs.carouselque se produza o evento).

.carousel('next')

Ciclos ao seguinte elemento. Volve á persoa que chama antes de que se amose o seguinte elemento (é dicir, antes de slid.bs.carouselque se produza o evento).

.carousel('dispose')

Destrúe o carrusel dun elemento.

.carousel('nextWhenVisible')

Non pases o carrusel ao seguinte cando a páxina non estea visible ou o carrusel ou o seu pai non estean visibles. Volve á persoa que chama antes de que se amose o seguinte elemento (é dicir, antes de slid.bs.carouselque se produza o evento).

.carousel('to')

Cicla o carrusel a un cadro particular (baseado en 0, semellante a unha matriz). Volve á persoa que chama antes de que se amose o seguinte elemento (é dicir, antes de slid.bs.carouselque se produza o evento).

Eventos

A clase de carrusel de Bootstrap expón dous eventos para conectarse á funcionalidade do carrusel. Ambos eventos teñen as seguintes propiedades adicionais:

  • direction: A dirección na que se despraza o carrusel ( "left"ou ben "right").
  • relatedTarget: o elemento DOM que se está a colocar como elemento activo.
  • from: O índice do elemento actual
  • to: O índice do seguinte elemento

Todos os eventos do carrusel desenvólvense no propio carrusel (é dicir, no <div class="carousel">).

Tipo de evento Descrición
slide.bs.carrusel Este evento desenvólvese inmediatamente cando slidese invoca o método de instancia.
deslizar.bs.carrusel Este evento desenvólvese cando o carrusel completou a súa transición de diapositivas. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Cambiar a duración da transición

A duración da transición de .carousel-itempódese cambiar coa $carousel-transitionvariable Sass antes de compilar ou estilos personalizados se estás a usar o CSS compilado. Se se aplican varias transicións, asegúrate de que a transición de transformación estea definida primeiro (por exemplo, transition: transform 2s ease, opacity .5s ease-out).