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

Animationseffekten af denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

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 en unik idpå .carouselfor valgfrie kontroller, især hvis du bruger flere karruseller på en enkelt side. Kontrol- og indikatorelementer skal have en data-targetattribut (eller hreffor links), der matcher idelementets .carousel.

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

Med kontroller

Tilføjelse af forrige og næste kontrol. Vi anbefaler at bruge <button>elementer, men du kan også bruge <a>elementer med 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>

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

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

Noget repræsentativt pladsholderindhold for det første dias.

Anden slide label

Noget repræsentativt pladsholderindhold for det andet dias.

Tredje slide label

Noget repræsentativt pladsholderindhold for det tredje dias.

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

Crossfade

Tilføj .carousel-fadetil din karrusel for at animere dias med en fade-overgang i stedet for et dias. Afhængigt af dit karruselindhold (f.eks. dias med kun tekst), vil du måske tilføje .bg-bodyeller noget tilpasset CSS til .carousel-items'erne for korrekt crossfading.

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

Individuelt `.carousel-item`interval

Tilføj data-interval=""til a .carousel-itemfor at ændre den tid, der skal forsinkes mellem automatisk cykling til næste element.

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

Deaktiver berøringsstrygning

Karruseller understøtter at stryge til venstre/højre på touchscreen-enheder for at flytte mellem dias. Dette kan deaktiveres ved hjælp af data-touchattributten. Eksemplet nedenfor inkluderer heller ikke data-rideattributten og har data-interval="false"så den ikke automatisk afspilles.

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

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. Hvis du ikke bruger data-ride="carousel"til at initialisere din karrusel, skal du selv initialisere den. 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 `false`, vil karrusellen ikke køre automatisk.
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 den er indstillet til `'carousel'`, afspiller karrusellen automatisk ved indlæsning.
indpakning	boolesk	rigtigt	Om karrusellen skal cykle kontinuerligt eller have hårde stop.
røre ved	boolesk	rigtigt	Om karrusellen skal understøtte venstre/højre swipe-interaktioner på touchscreen-enheder.

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.

`.carousel('nextWhenVisible')`

Lad være med at cykle karrusellen til næste, når siden ikke er synlig, eller karrusellen eller dens forælder ikke er synlig. 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('to')`

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

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