Saltar al contingut principal Saltar a la navegació de documents
Check
in English

Carrusel

Un component de presentació de diapositives per passar per elements (imatges o diapositives de text) com un carrusel.

En aquesta pàgina

Com funciona

El carrusel és una presentació de diapositives per recórrer una sèrie de continguts, construït amb transformacions CSS 3D i una mica de JavaScript. Funciona amb una sèrie d'imatges, text o marques personalitzades. També inclou suport per a controls i indicadors anteriors/següents.

Als navegadors on s'admet l' API de visibilitat de la pàgina , el carrusel evitarà lliscar quan la pàgina web no sigui visible per a l'usuari (com ara quan la pestanya del navegador està inactiva, la finestra del navegador està minimitzada, etc.).

L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

Tingueu en compte que els carrusels imbricats no s'admeten i, en general, els carrusels no compleixen els estàndards d'accessibilitat.

Exemple

Els carrusels no normalitzen automàticament les dimensions de la diapositiva. Com a tal, és possible que hàgiu d'utilitzar utilitats addicionals o estils personalitzats per dimensionar adequadament el contingut. Tot i que els carrusels admeten controls i indicadors anteriors/següents, no són necessaris explícitament. Afegiu i personalitzeu com us convingui.

La .activeclasse s'ha d'afegir a una de les diapositives , en cas contrari, el carrusel no serà visible. Assegureu-vos també d'establir un únic idper .carouselals controls opcionals, especialment si feu servir diversos carrusels en una sola pàgina. Els elements de control i indicador han de tenir un data-bs-targetatribut (o hrefper als enllaços) que coincideixi amb el idde l' .carouselelement.

Només diapositives

Aquí teniu un carrusel només amb diapositives. Tingueu en compte la presència de les imatges .d-blocki .w-100a les imatges del carrusel per evitar l'alineació d'imatges predeterminada del navegador.

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

Amb controls

Afegint els controls anterior i següent. Recomanem utilitzar <button>elements, però també podeu utilitzar <a>elements amb role="button".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Amb indicadors

També podeu afegir els indicadors al carrusel, juntament amb els controls.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Amb subtítols

Afegiu subtítols a les vostres diapositives fàcilment amb l' .carousel-captionelement de qualsevol .carousel-item. Es poden amagar fàcilment en finestres més petites, com es mostra a continuació, amb utilitats de visualització opcionals . Els amaguem inicialment amb .d-nonei els tornem a portar en dispositius de mida mitjana amb .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Fundició creuada

Afegiu .carousel-fade-lo al vostre carrusel per animar les diapositives amb una transició esvaïda en lloc d'una diapositiva. Depenent del contingut del carrusel (p. ex., diapositives només de text), és possible que vulgueu afegir .bg-bodyo algun CSS personalitzat a la .carousel-items per a un encreuament adequat.

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Afegeix data-bs-interval=""a a .carousel-itemper canviar la quantitat de temps per retardar entre el cicle automàticament a l'element següent.

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Desactiva el lliscament tàctil

Els carrusels admeten lliscar cap a l'esquerra/dreta als dispositius de pantalla tàctil per moure's entre diapositives. Això es pot desactivar mitjançant l' data-bs-touchatribut. L'exemple següent tampoc inclou l' data-bs-rideatribut, de manera que no es reprodueix automàticament.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Variant fosca

Afegiu .carousel-dark-lo .carousela controls, indicadors i subtítols més foscos. Els controls s'han invertit del seu emplenament blanc predeterminat amb la filterpropietat CSS. Els subtítols i els controls tenen variables Sass addicionals que personalitzen colori background-color.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Transició personalitzada

La durada de la transició .carousel-itemes pot canviar amb la $carousel-transition-durationvariable Sass abans de compilar o estils personalitzats si utilitzeu el CSS compilat. Si s'apliquen diverses transicions, assegureu-vos que la transició de transformació estigui definida primer (p. ex transition: transform 2s ease, opacity .5s ease-out. ).

Sass

Les variables

Variables per a tots els carrusels:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Variables per al carrusel fosc :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Ús

Mitjançant atributs de dades

Utilitzeu atributs de dades per controlar fàcilment la posició del carrusel. data-bs-slideaccepta les paraules clau prevo next, que altera la posició de la diapositiva en relació a la seva posició actual. Alternativament, utilitzeu data-bs-slide-toper passar un índex de diapositives en brut al carrusel data-bs-slide-to="2", que canvia la posició de la diapositiva a un índex concret que comença per 0.

L' data-bs-ride="carousel"atribut s'utilitza per marcar un carrusel com a animador a partir de la càrrega de la pàgina. Si no feu servir data-bs-ride="carousel"per inicialitzar el vostre carrusel, haureu d'inicialitzar-lo vosaltres mateixos. No es pot utilitzar en combinació amb la inicialització explícita de JavaScript (redundant i innecessària) del mateix carrusel.

Mitjançant JavaScript

Truqueu manualment al carrusel amb:

const carousel = new bootstrap.Carousel('#myCarousel')

Opcions

Com que les opcions es poden passar mitjançant atributs de dades o JavaScript, podeu afegir un nom d'opció a data-bs-, com a data-bs-animation="{value}". Assegureu-vos de canviar el tipus de cas del nom de l'opció de " camelCase " a " kebab-case " quan passeu les opcions mitjançant atributs de dades. Per exemple, utilitzeu data-bs-custom-class="beautifier"en comptes de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, tots els components admeten un atribut de dades reservades experimentalsdata-bs-config que pot albergar una configuració senzilla de components com a cadena JSON. Quan un element té data-bs-config='{"delay":0, "title":123}'i data-bs-title="456"atributs, el titlevalor final serà 456i els atributs de dades independents substituiran els valors donats a data-bs-config. A més, els atributs de dades existents poden albergar valors JSON com data-bs-delay='{"show":0,"hide":150}'.

Nom Tipus Per defecte Descripció
interval nombre 5000 La quantitat de temps per retardar entre el cicle automàtic d'un element.
keyboard booleà true Si el carrusel ha de reaccionar als esdeveniments del teclat.
pause cadena, booleà "hover" Si s'estableix en "hover", posa en pausa el cicle del carrusel encès mouseenteri reprèn el cicle del carrusel encès mouseleave. Si s'estableix en false, passar el cursor per sobre del carrusel no el posarà en pausa. Als dispositius tàctils, quan s'estableix en "hover", el ciclisme s'aturarà touchend(un cop l'usuari hagi acabat d'interaccionar amb el carrusel) durant dos intervals, abans de reprendre's automàticament. Això s'afegeix al comportament del ratolí.
ride cadena, booleà false Si s'estableix a true, es reprodueix automàticament el carrusel després que l'usuari faci un cicle manualment amb el primer element. Si s'estableix en "carousel", reprodueix automàticament el carrusel en carregar.
touch booleà true Si el carrusel ha d'admetre les interaccions de lliscament esquerra/dreta als dispositius de pantalla tàctil.
wrap booleà true Si el carrusel ha de circular contínuament o tenir parades dures.

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

Podeu crear una instància de carrusel amb el constructor de carrusel, per exemple, per inicialitzar-lo amb opcions addicionals i començar a recórrer els elements:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Mètode Descripció
cycle Recorre els elements del carrusel d'esquerra a dreta.
dispose Destrueix el carrusel d'un element. (Elimina les dades emmagatzemades a l'element DOM)
getInstance Mètode estàtic que us permet obtenir la instància del carrusel associada a un element DOM, podeu utilitzar-lo així: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Mètode estàtic que retorna una instància de carrusel associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així: bootstrap.Carousel.getOrCreateInstance(element).
next Passa a l'element següent. Torna a la persona que truca abans que es mostri el següent element (p. ex., abans slid.bs.carouselque es produeixi l'esdeveniment).
nextWhenVisible No passeu del carrusel al següent quan la pàgina no sigui visible o el carrusel o el seu pare no sigui visible. Torna a la persona que truca abans que s'hagi mostrat l'element de destinació .
pause Impedeix que el carrusel circuli per elements.
prev Cicles a l'element anterior. Torna a la persona que truca abans que s'hagi mostrat l'element anterior (p. ex., abans slid.bs.carouselque es produeixi l'esdeveniment).
to Cicle el carrusel a un fotograma concret (basat en 0, similar a una matriu). Torna a la persona que truca abans que s'hagi mostrat l'element de destinació (p. ex., abans slid.bs.carouselque es produeixi l'esdeveniment).

Esdeveniments

La classe de carrusel de Bootstrap exposa dos esdeveniments per connectar-se a la funcionalitat del carrusel. Tots dos esdeveniments tenen les següents propietats addicionals:

  • direction: La direcció en què llisca el carrusel (o "left"bé "right").
  • relatedTarget: l'element DOM que s'està fent lliscar al seu lloc com a element actiu.
  • from: l'índex de l'element actual
  • to: l'índex de l'element següent

Tots els esdeveniments del carrusel es desenvolupen al mateix carrusel (és a dir, al <div class="carousel">).

Tipus d'esdeveniment Descripció
slid.bs.carousel S'ha disparat quan el carrusel ha completat la transició de lliscament.
slide.bs.carousel S'activa immediatament quan slides'invoca el mètode d'instància. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})