Karusell
En bildspelskomponent för att cykla genom element – bilder eller bilder med text – som en karusell.
Hur det fungerar
Karusellen är ett bildspel för att cykla genom en serie innehåll, byggt med CSS 3D-transformationer och lite JavaScript. Det fungerar med en serie bilder, text eller anpassad uppmärkning. Den innehåller också stöd för tidigare/nästa kontroller och indikatorer.
I webbläsare där Page Visibility API stöds kommer karusellen att undvika att glida när webbsidan inte är synlig för användaren (som när webbläsarfliken är inaktiv, webbläsarfönstret är minimerat, etc.).
prefers-reduced-motion
mediefrågan. Se
avsnittet om reducerad rörelse i vår tillgänglighetsdokumentation .
Tänk på att kapslade karuseller inte stöds, och karuseller är i allmänhet inte kompatibla med tillgänglighetsstandarder.
Exempel
Karuseller normaliserar inte automatiskt bildens dimensioner. Som sådan kan du behöva använda ytterligare verktyg eller anpassade stilar för att anpassa innehållet. Även om karuseller stöder föregående/nästa kontroller och indikatorer, krävs de inte uttryckligen. Lägg till och anpassa som du vill.
Klassen .active
måste läggas till på en av bilderna annars syns inte karusellen. Se också till att ställa in en unik id
på .carousel
för valfria kontroller, särskilt om du använder flera karuseller på en enda sida. Kontroll- och indikatorelement måste ha ett data-bs-target
attribut (eller href
för länkar) som matchar id
elementets .carousel
.
Endast diabilder
Här är en karusell med endast rutschbanor. Observera förekomsten av .d-block
och .w-100
på karusellbilder för att förhindra webbläsarens standardbildjustering.
<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
Lägger till föregående och nästa kontroller. Vi rekommenderar att du använder <button>
element, men du kan också använda <a>
element 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 också lägga till indikatorerna i karusellen, tillsammans med kontrollerna.
<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 bildtexter
Lägg enkelt till bildtexter till dina bilder med .carousel-caption
elementet i valfri .carousel-item
. De kan enkelt döljas i mindre visningsportar, som visas nedan, med valfria skärmverktyg . Vi gömmer dem först med .d-none
och tar tillbaka dem på medelstora 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
Lägg .carousel-fade
till i din karusell för att animera bilder med en tona övergång istället för en bild.
<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>
Individuellt .carousel-item
intervall
Lägg data-bs-interval=""
till en .carousel-item
för att ändra hur lång tid det ska gå mellan att automatiskt cykla till nästa objekt.
<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>
Inaktivera peksvepning
Karuseller stöder svep åt vänster/höger på enheter med pekskärm för att flytta mellan bilderna. Detta kan inaktiveras med data-bs-touch
attributet. Exemplet nedan inkluderar inte heller data-bs-ride
attributet och har data-bs-interval="false"
så att det inte spelas upp automatiskt.
<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
Lägg .carousel-dark
till .carousel
för mörkare kontroller, indikatorer och bildtexter. Kontroller har inverterats från deras vita standardfyllning med filter
CSS-egenskapen. Bildtexter och kontroller har ytterligare Sass-variabler som anpassar color
och 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>
Anpassad övergång
Övergångslängden för .carousel-item
kan ändras med $carousel-transition-duration
Sass-variabeln före kompilering eller anpassade stilar om du använder den kompilerade CSS. Om flera övergångar tillämpas, se till att transformationsövergången definieras först (t.ex. 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);
Användande
Via dataattribut
Använd dataattribut för att enkelt styra karusellens position. data-bs-slide
accepterar nyckelorden prev
eller next
, vilket ändrar bildens position i förhållande till dess nuvarande position. Alternativt kan du använda data-bs-slide-to
för att skicka ett obearbetat diabildsindex till karusellen data-bs-slide-to="2"
, vilket flyttar diapositionen till ett visst index som börjar med 0
.
Attributet data-bs-ride="carousel"
används för att markera en karusell som animering med början vid sidladdning. Om du inte använder data-bs-ride="carousel"
för att initiera din karusell, måste du initiera den själv. Den kan inte användas i kombination med (redundant och onödig) explicit JavaScript-initiering av samma karusell.
Via JavaScript
Ring karusellen manuellt med:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
alternativ
Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-bs-
, som i data-bs-interval=""
.
namn | Typ | Standard | Beskrivning |
---|---|---|---|
interval |
siffra | 5000 |
Hur lång tid det tar mellan att automatiskt cykla ett objekt. Om false , kommer karusellen inte att cykla automatiskt. |
keyboard |
booleskt | true |
Om karusellen ska reagera på tangentbordshändelser. |
pause |
sträng | booleskt | 'hover' |
Om inställt på På beröringsaktiverade enheter, när inställt på |
ride |
sträng | booleskt | false |
Spelar upp karusellen automatiskt efter att användaren manuellt cyklar det första objektet. Om inställt på 'carousel' , spelar karusellen automatiskt vid laddning. |
wrap |
booleskt | true |
Om karusellen ska cykla kontinuerligt eller ha hårda stopp. |
touch |
booleskt | true |
Huruvida karusellen ska stödja vänster/höger svep-interaktioner på enheter med pekskärm. |
Metoder
Asynkrona metoder och övergångar
Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .
Du kan skapa en karusellinstans med karusellkonstruktören, till exempel för att initiera med ytterligare alternativ och börja cykla igenom objekt:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metod | Beskrivning |
---|---|
cycle |
Cyklar genom karusellföremålen från vänster till höger. |
pause |
Stoppar karusellen från att cykla genom föremål. |
prev |
Går till föregående post. Återgår till den som ringer innan föregående objekt har visats (t.ex. innan slid.bs.carousel händelsen inträffar). |
next |
Går till nästa objekt. Återgår till den som ringer innan nästa objekt har visats (t.ex. innan slid.bs.carousel händelsen inträffar). |
nextWhenVisible |
Cykla inte karusellen till nästa när sidan inte är synlig eller karusellen eller dess förälder inte är synlig. Återgår till den som ringer innan målobjektet har visats |
to |
Cyklar karusellen till en viss bildruta (0-baserad, liknande en array). Återgår till den som ringer innan målobjektet har visats (t.ex. innan slid.bs.carousel händelsen inträffar). |
dispose |
Förstör ett elements karusell. (Tar bort lagrad data på DOM-elementet) |
getInstance |
Statisk metod som låter dig få karusellinstansen kopplad till ett DOM-element, du kan använda den så här:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Statisk metod som returnerar en karusellinstans som är kopplad till ett DOM-element eller skapa en ny om den inte initierades. Du kan använda det så här:bootstrap.Carousel.getOrCreateInstance(element) |
evenemang
Bootstraps karusellklass avslöjar två händelser för att koppla in karusellfunktionalitet. Båda händelserna har följande ytterligare egenskaper:
direction
: Den riktning i vilken karusellen glider (antingen"left"
eller"right"
).relatedTarget
: DOM-elementet som skjuts på plats som det aktiva objektet.from
: Indexet för det aktuella objektetto
: Indexet för nästa objekt
Alla karusellhändelser avfyras mot själva karusellen (dvs. vid <div class="carousel">
).
Event typ | Beskrivning |
---|---|
slide.bs.carousel |
Avfyras omedelbart när slide instansmetoden anropas. |
slid.bs.carousel |
Avfyras när karusellen har slutfört sin glidövergång. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})