Carrusel

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

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.).

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

Finalment, si esteu creant el nostre JavaScript des de la font, requereixutil.js .

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 identificador únic .carouselals controls opcionals, sobretot si feu servir diversos carrusels en una sola pàgina. Els elements de control i indicador han de tenir un data-targetatribut (o hrefper als enllaços) que coincideixi amb l'identificador de 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.

<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>

Amb controls

Afegint els controls anteriors i següents:

<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>

Amb indicadors

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

<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>

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.

Primera etiqueta de la diapositiva

Nulla vitae elit libero, a pharetra augue mollis interdum.

Segona etiqueta de la diapositiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiqueta de la tercera diapositiva

Praesent commodo 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>

Fundició creuada

Afegiu .carousel-fade-lo al vostre carrusel per animar les diapositives amb una transició esvaïda en lloc d'una diapositiva.

<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>

Ús

Mitjançant atributs de dades

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

L' data-ride="carousel"atribut s'utilitza per marcar un carrusel com a animador a partir de la càrrega de la pàgina. 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:

$('.carousel').carousel()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-interval="".

Nom	Tipus	Per defecte	Descripció
interval	nombre	5000	La quantitat de temps per retardar entre el cicle automàtic d'un element. Si és fals, el carrusel no girarà automàticament.
teclat	booleà	veritat	Si el carrusel ha de reaccionar als esdeveniments del teclat.
pausa	cadena \| booleà	"passar el ratolí"	Si s'estableix en `"hover"`, posa en pausa el cicle del carrusel encès `mouseenter`i 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. Tingueu en compte que això s'afegeix al comportament del ratolí anterior.
passeig	corda	fals	Reprodueix automàticament el carrusel després que l'usuari faci el cicle manualment del primer element. Si és "carrusel", es reprodueix automàticament el carrusel durant la càrrega.
embolicar	booleà	veritat	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ó.

`.carousel(options)`

Inicialitza el carrusel amb opcions opcionals objecti comença a circular pels elements.

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

`.carousel('cycle')`

Recorre els elements del carrusel d'esquerra a dreta.

`.carousel('pause')`

Impedeix que el carrusel circuli per elements.

`.carousel(number)`

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ó (és a dir, abans slid.bs.carouselque es produeixi l'esdeveniment).

`.carousel('prev')`

Cicles a l'element anterior. Torna a la persona que truca abans que s'hagi mostrat l'element anterior (és a dir, abans slid.bs.carouselque es produeixi l'esdeveniment).

`.carousel('next')`

Passa a l'element següent. Torna a la persona que truca abans que es mostri el següent element (és a dir, abans slid.bs.carouselque es produeixi l'esdeveniment).

`.carousel('dispose')`

Destrueix el carrusel d'un element.

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ó
slide.bs.carrusel	Aquest esdeveniment s'activa immediatament quan `slide`s'invoca el mètode d'instància.
slid.bs.carrusel	Aquest esdeveniment s'activa quan el carrusel ha completat la transició de diapositives.

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

Canvia la durada de la transició

La durada de la transició .carousel-itemes pot canviar amb la $carousel-transitionvariable 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).