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

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.

Zorg ervoor dat u een unieke id instelt .carouselvoor optionele bedieningselementen, vooral als u meerdere carrousels op één pagina gebruikt.

Alleen dia's

Hier is een carrousel met alleen dia's. Let op de aanwezigheid van de .d-blocken .img-fluidop 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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Met bediening

De vorige en volgende besturingselementen toevoegen:

Vorig Volgende

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Met indicatoren

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

Vorig Volgende

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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

Nulla vitae elit libero, een pharetra augue mollis interdum.

Tweede dia-label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Label derde dia

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Vorig Volgende

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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. 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="".

Methoden:

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

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})