Carrousel
Een component voor een diavoorstelling waarmee u door elementen (afbeeldingen of dia's met tekst) kunt bladeren, zoals een carrousel.
Hoe het werkt
De carrousel is een diavoorstelling om door een reeks inhoud te fietsen, gebouwd met CSS 3D-transformaties en een beetje JavaScript. Het werkt met een reeks afbeeldingen, tekst of aangepaste opmaak. Het bevat ook ondersteuning voor vorige/volgende bedieningselementen en indicatoren.
In browsers waar de Page Visibility API wordt ondersteund, zal de carrousel niet verschuiven wanneer de webpagina niet zichtbaar is voor de gebruiker (zoals wanneer het browsertabblad inactief is, het browservenster geminimaliseerd is, enz.).
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
Houd er rekening mee dat geneste carrousels niet worden ondersteund en dat carrousels over het algemeen niet voldoen aan de toegankelijkheidsnormen.
Ten slotte, als u ons JavaScript vanaf de bron bouwt, isutil.js
.
Voorbeeld
Carrousels normaliseren de afmetingen van dia's niet automatisch. Als zodanig moet u mogelijk extra hulpprogramma's of aangepaste stijlen gebruiken om inhoud op de juiste manier te rangschikken. Hoewel carrousels vorige/volgende bedieningselementen en indicatoren ondersteunen, zijn ze niet expliciet vereist. Voeg toe en pas aan zoals je wilt.
De .active
klasse moet worden toegevoegd aan een van de dia's , anders is de carrousel niet zichtbaar. Zorg er ook voor dat u een uniek id
instelt .carousel
voor optionele bedieningselementen, vooral als u meerdere carrousels op één pagina gebruikt. Controle- en indicatorelementen moeten een data-target
attribuut (of href
voor links) hebben dat overeenkomt id
met het .carousel
element.
Alleen dia's
Hier is een carrousel met alleen dia's. Let op de aanwezigheid van de .d-block
en .w-100
op carrouselafbeeldingen om te voorkomen dat de standaardafbeelding van de browser wordt uitgelijnd.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-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>
Met bediening
Toevoegen van de vorige en volgende besturingselementen. We raden aan om <button>
elementen te gebruiken, maar je kunt ook <a>
elementen gebruiken met role="button"
.
<div id="carouselExampleControls" class="carousel slide" data-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Met indicatoren
U kunt naast de bedieningselementen ook de indicatoren aan de carrousel toevoegen.
<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 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-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Met bijschriften
Voeg eenvoudig bijschriften toe aan uw dia's met het .carousel-caption
element in een .carousel-item
. Ze kunnen gemakkelijk worden verborgen op kleinere viewports, zoals hieronder weergegeven, met optionele weergavehulpprogramma's . We verbergen ze in eerste instantie met .d-none
en brengen ze terug op middelgrote apparaten met .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Crossfade
Voeg toe .carousel-fade
aan je carrousel om dia's te animeren met een fade-overgang in plaats van een dia. Afhankelijk van de inhoud van je carrousel (bijv. dia's met alleen tekst), wil je misschien .bg-body
wat aangepaste CSS toevoegen aan de .carousel-item
s voor een goede crossfading.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Individueel .carousel-item
interval
Toevoegen data-interval=""
aan a .carousel-item
om de vertragingstijd tussen het automatisch doorlopen naar het volgende item te wijzigen.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Aanraakvegen uitschakelen
Carrousels ondersteunen het naar links/rechts vegen op apparaten met touchscreen om tussen dia's te schakelen. Dit kan worden uitgeschakeld met behulp van het data-touch
attribuut. Het onderstaande voorbeeld bevat het data-ride
attribuut ook niet en wordt data-interval="false"
dus niet automatisch afgespeeld.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Gebruik
Via gegevensattributen
Gebruik gegevensattributen om de positie van de carrousel eenvoudig te regelen. data-slide
accepteert de trefwoorden prev
of next
, die de positie van de dia verandert ten opzichte van de huidige positie. U kunt ook gebruiken data-slide-to
om een onbewerkte dia-index door te geven aan de carrousel data-slide-to="2"
, die de diapositie verschuift naar een bepaalde index die begint met 0
.
Het data-ride="carousel"
attribuut wordt gebruikt om een carrousel te markeren als animerend vanaf het laden van de pagina. Als u uw carrousel niet gebruikt data-ride="carousel"
om te initialiseren, moet u deze zelf initialiseren. Het kan niet worden gebruikt in combinatie met (redundante en onnodige) expliciete JavaScript-initialisatie van dezelfde carrousel.
Via JavaScript
Carrousel handmatig bellen met:
$('.carousel').carousel()
Opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-
, zoals in data-interval=""
.
Naam | Type | Standaard | Beschrijving |
---|---|---|---|
interval | nummer | 5000 | De hoeveelheid tijd die verstrijkt tussen het automatisch wisselen van een item. Indien false , zal de carrousel niet automatisch draaien. |
toetsenbord | booleaans | WAAR | Of de carrousel moet reageren op toetsenbordgebeurtenissen. |
pauze | tekenreeks | booleaans | 'zweven' | Indien ingesteld op Op apparaten met aanraakbediening, indien ingesteld op |
rijden | snaar | vals | Speelt de carrousel automatisch af nadat de gebruiker het eerste item handmatig heeft doorlopen. Indien ingesteld op 'carousel' , wordt de carrousel automatisch afgespeeld bij laden. |
wrap | booleaans | WAAR | Of de carrousel continu moet fietsen of harde stops moet hebben. |
aanraken | booleaans | WAAR | Of de carrousel links/rechts swipe-interacties op touchscreen-apparaten moet ondersteunen. |
Methoden:
Asynchrone methoden en overgangen
Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .
.carousel(options)
Initialiseert de carrousel met optionele opties object
en begint door items te bladeren.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Doorloopt de carrouselitems van links naar rechts.
.carousel('pause')
Voorkomt dat de carrousel door items fietst.
.carousel(number)
Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array). Keert terug naar de beller voordat het doelitem is getoond (dwz voordat de slid.bs.carousel
gebeurtenis plaatsvindt).
.carousel('prev')
Hiermee gaat u naar het vorige item. Keert terug naar de beller voordat het vorige item is getoond (dwz voordat de slid.bs.carousel
gebeurtenis plaatsvindt).
.carousel('next')
Gaat naar het volgende item. Keert terug naar de beller voordat het volgende item is getoond (dwz voordat de slid.bs.carousel
gebeurtenis plaatsvindt).
.carousel('dispose')
Vernietigt de carrousel van een element.
.carousel('nextWhenVisible')
Verplaats de carrousel niet naar de volgende wanneer de pagina niet zichtbaar is of de carrousel of het bovenliggende element niet zichtbaar is. Keert terug naar de beller voordat het volgende item is getoond (dwz voordat de slid.bs.carousel
gebeurtenis plaatsvindt).
.carousel('to')
Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array). Keert terug naar de beller voordat het volgende item is getoond (dwz voordat de slid.bs.carousel
gebeurtenis plaatsvindt).
Evenementen
De carrouselklasse van Bootstrap onthult twee gebeurtenissen voor het aansluiten op carrouselfunctionaliteit. Beide evenementen hebben de volgende extra eigenschappen:
direction
: De richting waarin de carrousel schuift ("left"
of"right"
).relatedTarget
: Het DOM-element dat op zijn plaats wordt geschoven als het actieve item.from
: De index van het huidige itemto
: De index van het volgende item
Alle carrouselgebeurtenissen worden afgevuurd op de carrousel zelf (dwz op de <div class="carousel">
).
Evenementtype | Beschrijving |
---|---|
dia.bs.carrousel | Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de slide instantiemethode wordt aangeroepen. |
slid.bs.carrousel | Deze gebeurtenis wordt geactiveerd wanneer de carrousel de dia-overgang heeft voltooid. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Overgangsduur wijzigen
De overgangsduur van .carousel-item
kan worden gewijzigd met de $carousel-transition
Sass-variabele vóór het compileren of aangepaste stijlen als u de gecompileerde CSS gebruikt. Als er meerdere overgangen worden toegepast, zorg er dan voor dat eerst de transformatieovergang is gedefinieerd (bijv. transition: transform 2s ease, opacity .5s ease-out
).