Source

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.

Sørg for at angive et unikt id på .carouselfor valgfrie kontroller, især hvis du bruger flere karruseller på en enkelt side.

Kun dias

Her er en karrusel kun med dias. Bemærk tilstedeværelsen af .d-block​​og .img-fluidpå 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>
Indledende aktivt element påkrævet

Klassen .activeskal tilføjes til en af ​​slides. Ellers vil karrusellen ikke være synlig.

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.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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å mouseenterog 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 slideinstansmetoden 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…
})