twitter-bootstrap
carrousels

Opmerkingen

Eenvoudig HTML-gebruik

Een Bootstrap-carrousel is een Bootstrap-component die een diavoorstelling maakt die door elementen in de carrousel loopt.

Hier is een eenvoudig HTML-gebruiksvoorbeeld:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Basis Javascript gebruik en initialisatie

Carrouselcomponenten kunnen via jQuery worden geïnstantieerd met de functie $('.carousel').carousel(options) Carrousel $('.carousel').carousel(options) Carrousel $('.carousel').carousel(options) , waarbij $('.carousel') een verwijzing op het hoogste niveau is naar de specifieke carrousel en options een JavaScript-object is dat de carrousel opgeeft standaard attributen.

De options object maakt het mogelijk om meerdere eigenschappen te definiëren die zal invloed hebben op hoe de carrousel zich gedraagt. Deze eigenschappen zijn als volgt gedefinieerd:

• Het interval geaccepteerd een Javascript number soort waarmee een gebruiker de tijd bepalen de carrousel toont een bepaalde carrousel glijbaan voor. Als de booleaanse waarde false is opgegeven, wordt de carrousel niet automatisch doorlopen.
• De pause woning accepteert een Javascript string type dat gedrag, waar automatische fietsen de carrousel wordt onderbroken wanneer de muis van de gebruiker komt de carrousel schakelt. De standaard (en enige) geaccepteerde waarde is "hover".
• De wrap eigenschap accepteert een Javascript- boolean type waarmee een gebruiker kan bepalen of hij wil dat de carrousel continu doorloopt zonder te stoppen op een bepaalde dia.
• De eigenschap keyboard accepteert een boolean type Javascript waarmee een gebruiker kan bepalen of de carrousel wel of niet op toetsenbordgebeurtenissen moet reageren.

Hier is een voorbeeld van het basisgebruik van Javascript:

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

Net als bij andere Bootstrap-componenten kunnen de opties van de carrousel ook via gegevenskenmerken in HTML worden opgegeven.