Karrusel

En slideshow-komponent til at cykle gennem elementer - billeder eller dias med tekst - som en karrusel.

Hvordan det virker

Karrusellen er et diasshow til at cykle gennem en række indhold, bygget med CSS 3D-transformationer og en smule JavaScript. Det fungerer med en række billeder, tekst eller brugerdefinerede markeringer. Det inkluderer også understøttelse af forrige/næste kontroller og indikatorer.

I browsere, hvor Page Visibility API er understøttet, vil karrusellen undgå at glide, når websiden ikke er synlig for brugeren (såsom når browserfanen er inaktiv, browservinduet er minimeret osv.).

Vær opmærksom på, at indlejrede karruseller ikke understøttes, og karruseller er generelt ikke kompatible med tilgængelighedsstandarder.

Til sidst, hvis du bygger vores JavaScript fra kilden, kræverutil.js det .

Eksempel

Karruseller normaliserer ikke automatisk dias dimensioner. Som sådan skal du muligvis bruge yderligere hjælpeprogrammer eller brugerdefinerede stilarter for at tilpasse indholdet passende. Selvom karruseller understøtter forrige/næste kontroller og indikatorer, er de ikke eksplicit påkrævet. Tilføj og tilpas, som det passer dig.

Klassen .activeskal tilføjes til en af slides, ellers vil karrusellen ikke være synlig. Sørg også for at indstille et unikt id på .carouselfor valgfri kontrol, især hvis du bruger flere karruseller på en enkelt side. Kontrol- og indikatorelementer skal have en data-targetattribut (eller hreffor links), der matcher .carouselelementets id.

Kun dias

Her er en karrusel kun med dias. Bemærk tilstedeværelsen af .d-blockog .w-100på karruselbillederne for at forhindre browserens standardbilledjustering.

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

Med kontroller

Tilføjelse af forrige og næste kontrolelementer:

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

Med indikatorer

Du kan også føje indikatorerne til karrusellen sammen med kontrollerne.

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

Med billedtekster

Tilføj nemt billedtekster til dine dias med .carousel-captionelementet i enhver .carousel-item. De kan nemt skjules på mindre visningsporte, som vist nedenfor, med valgfri skærmværktøjer . Vi skjuler dem i første omgang med .d-noneog bringer dem tilbage på mellemstore enheder med .d-md-block.

Første slide label

Nulla vitae elit libero, en pharetra augue mollis interdum.

Anden slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tredje slide label

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>

Crossfade

Tilføj .carousel-fadetil din karrusel for at animere dias med en fade-overgang i stedet for et dias.

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

Brug

Via dataattributter

Brug dataattributter til nemt at kontrollere karrusellens position. data-slideaccepterer nøgleordene preveller next, som ændrer diaspositionen i forhold til dens aktuelle position. Alternativt kan du bruge data-slide-totil at sende et råt diasindeks til karrusellen data-slide-to="2", som flytter diaspositionen til et bestemt indeks, der begynder med 0.

Attributten data-ride="carousel"bruges til at markere en karrusel som animerende startende ved sideindlæsning. Den kan ikke bruges i kombination med (overflødig og unødvendig) eksplicit JavaScript-initialisering af den samme karrusel.

Via JavaScript

Kald karrusel manuelt med:

$('.carousel').carousel()

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-, som i data-interval="".

Navn	Type	Standard	Beskrivelse
interval	nummer	5000	Mængden af tid, der skal forsinkes mellem automatisk cykling af en vare. Hvis falsk, vil karrusellen ikke automatisk cykle.
tastatur	boolesk	rigtigt	Om karrusellen skal reagere på tastaturbegivenheder.
pause	streng \| boolesk	"hover"	Hvis den er indstillet til `"hover"`, pauser cyklingen af karrusellen på `mouseenter`og genoptager cyklingen af karrusellen på `mouseleave`. Hvis den er indstillet til `false`, vil det ikke sætte den på pause ved at holde markøren over karrusellen. På berøringsaktiverede enheder, når den er indstillet til `"hover"`, vil cykling pause på `touchend`(når brugeren er færdig med at interagere med karrusellen) i to intervaller, før den automatisk genoptages. Bemærk, at dette er et supplement til ovenstående museadfærd.
ride	snor	falsk	Afspiller karrusellen automatisk, efter at brugeren manuelt skifter det første element. Hvis "karrusel", automatisk afspiller karrusellen ved indlæsning.
indpakning	boolesk	rigtigt	Om karrusellen skal cykle kontinuerligt eller have hårde stop.

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information.

`.carousel(options)`

Initialiserer karrusellen med valgfrie muligheder objectog begynder at cykle gennem genstande.

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

`.carousel('cycle')`

Cykler gennem karruselelementerne fra venstre mod højre.

`.carousel('pause')`

Stopper karrusellen i at cykle gennem genstande.

`.carousel(number)`

Cykler karrusellen til en bestemt ramme (0-baseret, svarende til et array). Vender tilbage til den, der ringer, før målelementet er blevet vist (dvs. før slid.bs.carouselhændelsen indtræffer).

`.carousel('prev')`

Skifter til det forrige element. Vender tilbage til den, der ringer, før det forrige element er blevet vist (dvs. før slid.bs.carouselhændelsen indtræffer).

`.carousel('next')`

Skifter til næste punkt. Vender tilbage til den, der ringer, før det næste element er blevet vist (dvs. før slid.bs.carouselhændelsen indtræffer).

`.carousel('dispose')`

Ødelægger et elements karrusel.

Begivenheder

Bootstraps karruselklasse afslører to hændelser for tilslutning til karruselfunktionalitet. Begge begivenheder har følgende yderligere egenskaber:

direction: Den retning, karrusellen glider i (enten "left"eller "right").
relatedTarget: DOM-elementet, der skubbes på plads som det aktive element.
from: Indekset for den aktuelle vare
to: Indekset for det næste punkt

Alle karruselbegivenheder skydes mod selve karrusellen (dvs. ved <div class="carousel">).

Begivenhedstype	Beskrivelse
slide.bs.karrusel	Denne hændelse udløses med det samme, når `slide`instansmetoden påkaldes.
slid.bs.karrusel	Denne begivenhed udløses, når karrusellen har fuldført sin slide-overgang.

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

Skift overgangsvarighed

Overgangsvarigheden af .carousel-itemkan ændres med $carousel-transitionSass-variablen før kompilering eller brugerdefinerede stilarter, hvis du bruger den kompilerede CSS. Hvis der anvendes flere overgange, skal du sørge for, at transformationsovergangen er defineret først (f.eks. transition: transform 2s ease, opacity .5s ease-out).