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:

Tidligere Næste

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

Tidligere Næste

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

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.

Tidligere Næste

<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="".

Metoder

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

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