Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Karrusel

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

På denne side

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.

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-bs-targetattribut (eller hreffor links), der matcher idelementets .carousel.

Kun dias

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

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Med indikatorer

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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.

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-touchattributten. Eksemplet nedenfor inkluderer heller ikke data-bs-rideattributten, så den afspilles ikke automatisk.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Mørk variant

Tilføj .carousel-darktil .carouselfor mørkere kontroller, indikatorer og billedtekster. Kontrolelementer er blevet inverteret fra deres standard hvide fyld med filterCSS-egenskaben. Billedtekster og kontrolelementer har yderligere Sass-variabler, der tilpasser colorog background-color.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Brugerdefineret overgang

Overgangsvarigheden af .carousel-item​​kan ændres med $carousel-transition-durationSass-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. ).

Sass

Variabler

Variabler for alle karruseller:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Variabler for den mørke karrusel :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Brug

Via dataattributter

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

Attributten data-bs-ride="carousel"bruges til at markere en karrusel som animerende startende ved sideindlæsning. Hvis du ikke bruger data-bs-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:

const carousel = new bootstrap.Carousel('#myCarousel')

Muligheder

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Navn Type Standard Beskrivelse
interval nummer 5000 Mængden af ​​tid, der skal forsinkes mellem automatisk cykling af en vare.
keyboard boolesk true 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. Dette er et supplement til musens adfærd.
ride streng, boolesk false Hvis den er indstillet til true, afspiller karrusellen automatisk, efter at brugeren manuelt har gennemgået det første element. Hvis den er indstillet til "carousel", afspiller karrusellen automatisk ved indlæsning.
touch boolesk true Om karrusellen skal understøtte venstre/højre swipe-interaktioner på touchscreen-enheder.
wrap boolesk true 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 .

Du kan oprette en karruselforekomst med karruselkonstruktøren, for eksempel for at initialisere med yderligere muligheder og begynde at cykle gennem elementer:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metode Beskrivelse
cycle Cykler gennem karruselelementerne fra venstre mod højre.
dispose Ødelægger et elements karrusel. (Fjerner lagrede data på DOM-elementet)
getInstance Statisk metode, som giver dig mulighed for at få karruselforekomsten knyttet til et DOM-element, du kan bruge det sådan her: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Statisk metode, som returnerer en karruselforekomst knyttet til et DOM-element eller opretter en ny, hvis den ikke blev initialiseret. Du kan bruge det sådan her: bootstrap.Carousel.getOrCreateInstance(element).
next Skifter til næste punkt. Vender tilbage til den, der ringer, før det næste element er blevet vist (f.eks. før slid.bs.carouselhændelsen indtræffer).
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 målelementet er blevet vist .
pause Stopper karrusellen i at cykle gennem genstande.
prev Skifter til det forrige element. Vender tilbage til den, der ringer, før det forrige element er blevet vist (f.eks. før slid.bs.carouselhændelsen indtræffer).
to 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 (f.eks. 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
slid.bs.carousel Affyres, når karrusellen har fuldført sin glideovergang.
slide.bs.carousel Udløses med det samme, når slideinstansmetoden påkaldes. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})