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

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.

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

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

Label eerste dia

Enige representatieve tijdelijke inhoud voor de eerste dia.

Tweede dia-label

Enige representatieve tijdelijke inhoud voor de tweede dia.

Label derde dia

Enkele representatieve tijdelijke aanduiding-inhoud voor de derde dia.

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

<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-itemom 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-touchattribuut. Het onderstaande voorbeeld bevat het data-rideattribuut 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-slideaccepteert de trefwoorden prevof next, die de positie van de dia verandert ten opzichte van de huidige positie. U kunt ook gebruiken data-slide-toom 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 `'hover'`, pauzeert het draaien van de carrousel aan `mouseenter`en 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. Merk op dat dit een aanvulling is op het bovenstaande muisgedrag.
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 .

Zie onze JavaScript-documentatie voor meer informatie .

`.carousel(options)`

Initialiseert de carrousel met optionele opties objecten 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.carouselgebeurtenis 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.carouselgebeurtenis plaatsvindt).

`.carousel('next')`

Gaat naar het volgende item. Keert terug naar de beller voordat het volgende item is getoond (dwz voordat de slid.bs.carouselgebeurtenis 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.carouselgebeurtenis 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.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
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-itemkan worden gewijzigd met de $carousel-transitionSass-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).