Karusell
En lysbildefremvisningskomponent for å sykle gjennom elementer – bilder eller lysbilder med tekst – som en karusell.
Hvordan det fungerer
Karusellen er en lysbildefremvisning for å sykle gjennom en rekke innhold, bygget med CSS 3D-transformasjoner og litt JavaScript. Det fungerer med en serie bilder, tekst eller egendefinerte markeringer. Den inkluderer også støtte for forrige/neste kontroller og indikatorer.
I nettlesere der Page Visibility API støttes, vil karusellen unngå å skli når nettsiden ikke er synlig for brukeren (for eksempel når nettleserfanen er inaktiv, nettleservinduet er minimert osv.).
prefers-reduced-motion
mediesøket. Se delen
for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .
Vær oppmerksom på at nestede karuseller ikke støttes, og karuseller er generelt sett ikke i samsvar med tilgjengelighetsstandarder.
Eksempel
Karuseller normaliserer ikke lysbildedimensjonene automatisk. Som sådan kan det hende du må bruke ekstra verktøy eller tilpassede stiler for å tilpasse innholdet. Mens karuseller støtter forrige/neste kontroller og indikatorer, er de ikke eksplisitt påkrevd. Legg til og tilpass etter eget ønske.
Klassen .active
må legges til et av lysbildene ellers vil ikke karusellen være synlig. Sørg også for å angi en unik id
på .carousel
for valgfrie kontroller, spesielt hvis du bruker flere karuseller på en enkelt side. Kontroll- og indikatorelementer må ha et data-bs-target
attributt (eller href
for lenker) som samsvarer id
med .carousel
elementet.
Kun lysbilder
Her er en karusell med bare lysbilder. Legg merke til tilstedeværelsen av .d-block
og .w-100
på karusellbildene for å forhindre nettleserstandardbildejustering.
<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
Legger til forrige og neste kontroll. Vi anbefaler å bruke <button>
elementer, men du kan også bruke <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å legge til indikatorene i karusellen, sammen med kontrollene, også.
<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 bildetekster
Legg enkelt til bildetekster til lysbildene dine med .carousel-caption
elementet i en hvilken som helst .carousel-item
. De kan enkelt skjules på mindre visningsporter, som vist nedenfor, med valgfrie skjermverktøy . Vi skjuler dem først med .d-none
og bringer dem tilbake på mellomstore enheter 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
Legg .carousel-fade
til i karusellen din for å animere lysbilder med en uttoningsovergang i stedet for et lysbilde.
<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
intervall
Legg data-bs-interval=""
til en .carousel-item
for å endre hvor lang tid det skal gå mellom automatisk sykling til neste 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øringssveiping
Karuseller støtter sveiping til venstre/høyre på enheter med berøringsskjerm for å flytte mellom lysbildene. Dette kan deaktiveres ved å bruke data-bs-touch
attributtet. Eksemplet nedenfor inkluderer heller ikke data-bs-ride
attributtet og har data-bs-interval="false"
derfor ikke automatisk avspilling.
<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
Legg .carousel-dark
til .carousel
for mørkere kontroller, indikatorer og bildetekster. Kontroller har blitt invertert fra standard hvit fylling med filter
CSS-egenskapen. Bildetekster og kontroller har flere Sass-variabler som 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>
Egendefinert overgang
Overgangsvarigheten til .carousel-item
kan endres med $carousel-transition-duration
Sass-variabelen før kompilering eller tilpassede stiler hvis du bruker den kompilerte CSS. Hvis flere overganger brukes, sørg for at transformasjonsovergangen er definert 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);
Bruk
Via dataattributter
Bruk dataattributter for enkelt å kontrollere posisjonen til karusellen. data-bs-slide
godtar nøkkelordene prev
eller next
, som endrer lysbildeposisjonen i forhold til gjeldende posisjon. Alternativt kan du bruke data-bs-slide-to
for å sende en rå lysbildeindeks til karusellen data-bs-slide-to="2"
, som flytter lysbildeposisjonen til en bestemt indeks som begynner med 0
.
Attributtet brukes til å merke en karusell som animasjon fra og data-bs-ride="carousel"
med sideinnlasting. Hvis du ikke bruker data-bs-ride="carousel"
å initialisere karusellen din, må du initialisere den selv. Den kan ikke brukes i kombinasjon med (overflødig og unødvendig) eksplisitt JavaScript-initialisering av samme karusell.
Via JavaScript
Ring karusell manuelt med:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Alternativer
Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-
, som i data-bs-interval=""
.
Navn | Type | Misligholde | Beskrivelse |
---|---|---|---|
interval |
Antall | 5000 |
Tiden det tar mellom automatisk sykling av et element. Hvis false , vil ikke karusellen gå automatisk. |
keyboard |
boolsk | true |
Om karusellen skal reagere på tastaturhendelser. |
pause |
streng | boolsk | 'hover' |
Hvis satt til På berøringsaktiverte enheter, når satt til |
ride |
streng | boolsk | false |
Automatisk spiller av karusellen etter at brukeren manuelt går gjennom det første elementet. Hvis satt til 'carousel' , spiller karusellen automatisk ved lasting. |
wrap |
boolsk | true |
Om karusellen skal sykle kontinuerlig eller ha harde stopp. |
touch |
boolsk | true |
Om karusellen skal støtte venstre/høyre sveipeinteraksjoner på enheter med berøringsskjerm. |
Metoder
Asynkrone metoder og overganger
Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .
Du kan opprette en karusellforekomst med karusellkonstruktøren, for eksempel for å initialisere med flere alternativer og begynne å sykle gjennom elementer:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metode | Beskrivelse |
---|---|
cycle |
Bla gjennom karusellelementene fra venstre til høyre. |
pause |
Stopper karusellen fra å sykle gjennom gjenstander. |
prev |
Går til forrige element. Går tilbake til den som ringer før forrige element har blitt vist (f.eks. før slid.bs.carousel hendelsen inntreffer). |
next |
Går til neste element. Går tilbake til den som ringer før neste element har blitt vist (f.eks. før slid.bs.carousel hendelsen inntreffer). |
nextWhenVisible |
Ikke sykle karusellen til neste når siden ikke er synlig eller karusellen eller dens overordnede ikke er synlig. Går tilbake til den som ringer før målelementet er vist |
to |
Sykler karusellen til en bestemt ramme (0-basert, ligner på en matrise). Går tilbake til den som ringer før målelementet har blitt vist (f.eks. før slid.bs.carousel hendelsen inntreffer). |
dispose |
Ødelegger et elements karusell. (Fjerner lagrede data på DOM-elementet) |
getInstance |
Statisk metode som lar deg få karusellforekomsten knyttet til et DOM-element, du kan bruke det slik:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Statisk metode som returnerer en karusellforekomst knyttet til et DOM-element eller oppretter en ny i tilfelle den ikke ble initialisert. Du kan bruke det slik:bootstrap.Carousel.getOrCreateInstance(element) |
arrangementer
Bootstraps karusellklasse avslører to hendelser for å koble til karusellfunksjonalitet. Begge arrangementene har følgende tilleggsegenskaper:
direction
: Retningen som karusellen glir (enten"left"
eller"right"
).relatedTarget
: DOM-elementet som skyves på plass som det aktive elementet.from
: Indeksen til gjeldende elementto
: Indeksen til neste element
Alle karusellbegivenheter skytes mot selve karusellen (dvs. ved <div class="carousel">
).
Hendelsestype | Beskrivelse |
---|---|
slide.bs.carousel |
Avfyres umiddelbart når slide instansmetoden påkalles. |
slid.bs.carousel |
Avfyres når karusellen har fullført glideovergangen. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})