Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Carrousel

Een component voor een diavoorstelling waarmee u door elementen (afbeeldingen of dia's met tekst) kunt bladeren, zoals een carrousel.

Op deze pagina

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.).

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. 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.

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 .activeklasse moet worden toegevoegd aan een van de dia's , anders is de carrousel niet zichtbaar. Zorg er ook voor dat u een uniek idinstelt .carouselvoor optionele bedieningselementen, vooral als u meerdere carrousels op één pagina gebruikt. Controle- en indicatorelementen moeten een data-bs-targetattribuut (of hrefvoor links) hebben dat overeenkomt idmet het .carouselelement.

Alleen dia's

Hier is een carrousel met alleen dia's. Let op de aanwezigheid van de .d-blocken .w-100op carrouselafbeeldingen om te voorkomen dat de standaardafbeelding van de browser wordt uitgelijnd.

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>

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".

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>

Met indicatoren

U kunt naast de bedieningselementen ook de indicatoren aan de carrousel toevoegen.

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>

Met bijschriften

Voeg eenvoudig bijschriften toe aan uw dia's met het .carousel-captionelement 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-noneen brengen ze terug op middelgrote apparaten met .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

Voeg toe .carousel-fadeaan 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-bodywat aangepaste CSS toevoegen aan de .carousel-items voor een goede 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>

Toevoegen data-bs-interval=""aan a .carousel-itemom de vertragingstijd tussen het automatisch doorlopen naar het volgende item te wijzigen.

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>

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-bs-touchattribuut. Het onderstaande voorbeeld bevat het data-bs-rideattribuut ook niet, dus het wordt niet automatisch afgespeeld.

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>

Donkere variant

Voeg toe .carousel-darkaan de .carouselvoor donkerdere bedieningselementen, indicatoren en bijschriften. Besturingselementen zijn omgekeerd van hun standaard witte vulling met de filterCSS-eigenschap. colorBijschriften en besturingselementen hebben extra Sass-variabelen die de en aanpassen 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>

Aangepaste overgang

De overgangsduur van .carousel-itemkan worden gewijzigd met de $carousel-transition-durationSass-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. ).

Sass

Variabelen

Variabelen voor alle carrousels:

$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`)

Variabelen voor de donkere carrousel :

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

Gebruik

Via gegevensattributen

Gebruik gegevensattributen om de positie van de carrousel eenvoudig te regelen. data-bs-slideaccepteert de trefwoorden prevof next, die de positie van de dia verandert ten opzichte van de huidige positie. U kunt ook gebruiken data-bs-slide-toom een ​​onbewerkte dia-index door te geven aan de carrousel data-bs-slide-to="2", die de diapositie verschuift naar een bepaalde index die begint met 0.

Het data-bs-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-bs-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:

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

Opties

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Naam Type Standaard Beschrijving
interval nummer 5000 De hoeveelheid tijd die verstrijkt tussen het automatisch wisselen van een item.
keyboard booleaans true Of de carrousel moet reageren op toetsenbordgebeurtenissen.
pause string, booleaans "hover" Indien ingesteld op "hover", pauzeert het draaien van de carrousel aan mouseenteren hervat het fietsen van de carrousel aan mouseleave. Als deze is ingesteld op false, wordt deze niet gepauzeerd door de muisaanwijzer op de carrousel te plaatsen. Op apparaten met aanraakbediening, indien ingesteld op "hover", wordt het fietsen gepauzeerd touchend(zodra de gebruiker klaar is met de interactie met de carrousel) gedurende twee intervallen, voordat het automatisch wordt hervat. Dit komt bovenop het muisgedrag.
ride string, booleaans false Indien ingesteld op true, wordt de carrousel automatisch afgespeeld nadat de gebruiker het eerste item handmatig heeft doorlopen. Indien ingesteld op "carousel", wordt de carrousel automatisch afgespeeld bij laden.
touch booleaans true Of de carrousel links/rechts swipe-interacties op touchscreen-apparaten moet ondersteunen.
wrap booleaans true Of de carrousel continu moet fietsen of harde stops moet hebben.

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 .

Zie onze JavaScript-documentatie voor meer informatie .

U kunt bijvoorbeeld een carrouselinstantie maken met de carrouselconstructor om te initialiseren met extra opties en door items te bladeren:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Methode Beschrijving
cycle Doorloopt de carrouselitems van links naar rechts.
dispose Vernietigt de carrousel van een element. (Verwijdert opgeslagen gegevens op het DOM-element)
getInstance Statische methode waarmee u de carrouselinstantie kunt koppelen aan een DOM-element, u kunt deze als volgt gebruiken: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Statische methode die een carrouselinstantie retourneert die is gekoppeld aan een DOM-element of een nieuwe maakt voor het geval deze niet is geïnitialiseerd. Je kunt het als volgt gebruiken: bootstrap.Carousel.getOrCreateInstance(element).
next Gaat naar het volgende item. Keert terug naar de beller voordat het volgende item is getoond (bijvoorbeeld voordat de slid.bs.carouselgebeurtenis plaatsvindt).
nextWhenVisible Ga niet naar de volgende carrousel als de pagina niet zichtbaar is of de carrousel of het bovenliggende element niet zichtbaar is. Keert terug naar de beller voordat het doelitem is getoond .
pause Voorkomt dat de carrousel door items fietst.
prev Hiermee gaat u naar het vorige item. Keert terug naar de beller voordat het vorige item is getoond (bijv. voordat de slid.bs.carouselgebeurtenis plaatsvindt).
to Fietst de carrousel naar een bepaald frame (gebaseerd op 0, vergelijkbaar met een array). Keert terug naar de beller voordat het doelitem is getoond (bijv. voordat de slid.bs.carouselgebeurtenis 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 item
  • to: De index van het volgende item

Alle carrouselgebeurtenissen worden afgevuurd op de carrousel zelf (dwz op de <div class="carousel">).

Evenementtype Beschrijving
slid.bs.carousel Wordt geactiveerd wanneer de carrousel de dia-overgang heeft voltooid.
slide.bs.carousel Wordt onmiddellijk geactiveerd wanneer de slideinstantiemethode wordt aangeroepen. 
const myCarousel = document.getElementById('myCarousel')

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