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.).
prefers-reduced-motion
medieforespø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 .active
skal tilføjes til en af slides, ellers vil karrusellen ikke være synlig. Sørg også for at indstille en unik id
på .carousel
for valgfrie kontroller, især hvis du bruger flere karruseller på en enkelt side. Kontrol- og indikatorelementer skal have en data-bs-target
attribut (eller href
for links), der matcher id
elementets .carousel
.
Kun dias
Her er en karrusel med kun dias. Bemærk tilstedeværelsen af .d-block
og .w-100
på karruselbillederne for at forhindre browserens standardbilledjustering.
<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"
.
<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.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<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-caption
elementet 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-none
og bringer dem tilbage på mellemstore enheder med .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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-fade
til din karrusel for at animere dias med en fade-overgang i stedet for et dias.
<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>
Individuelt .carousel-item
interval
Tilføj data-bs-interval=""
til a .carousel-item
for at ændre den tid, der skal forsinkes mellem automatisk cykling til næste element.
<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-touch
attributten. Eksemplet nedenfor inkluderer heller ikke data-bs-ride
attributten og har data-bs-interval="false"
så den ikke automatisk afspilles.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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-dark
til .carousel
for mørkere kontroller, indikatorer og billedtekster. Kontrolelementer er blevet inverteret fra deres standard hvide fyld med filter
CSS-egenskaben. Billedtekster og kontrolelementer har yderligere Sass-variabler, der tilpasser color
og background-color
.
<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-duration
Sass-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
$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`)
$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-slide
accepterer nøgleordene prev
eller next
, som ændrer diaspositionen i forhold til dens aktuelle position. Alternativt kan du bruge data-bs-slide-to
til 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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Muligheder
Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-
, som i data-bs-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 automatisk køre. |
keyboard |
boolesk | true |
Om karrusellen skal reagere på tastaturbegivenheder. |
pause |
streng | boolesk | 'hover' |
Hvis den er indstillet til På berøringsaktiverede enheder, når den er indstillet til |
ride |
streng | boolesk | false |
Afspiller karrusellen automatisk, efter at brugeren manuelt skifter det første element. Hvis den er indstillet til 'carousel' , afspiller karrusellen automatisk ved indlæsning. |
wrap |
boolesk | true |
Om karrusellen skal cykle kontinuerligt eller have hårde stop. |
touch |
boolesk | true |
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 .
Du kan oprette en karruselforekomst med karruselkonstruktøren, for eksempel for at initialisere med yderligere muligheder og begynde at cykle gennem elementer:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metode | Beskrivelse |
---|---|
cycle |
Cykler gennem karruselelementerne fra venstre mod højre. |
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.carousel hændelsen indtræffer). |
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.carousel hæ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 |
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.carousel hændelsen indtræffer). |
dispose |
Ødelægger et elements karrusel. (Fjerner gemte 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, der er 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) |
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 vareto
: Indekset for det næste punkt
Alle karruselbegivenheder skydes mod selve karrusellen (dvs. ved <div class="carousel">
).
Begivenhedstype | Beskrivelse |
---|---|
slide.bs.carousel |
Udløses med det samme, når slide instansmetoden påkaldes. |
slid.bs.carousel |
Affyres, når karrusellen har fuldført sin glideovergang. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})