twitter-bootstrap => karuseller

Anmärkningar

Mer information finns i den officiella dokumentationen på http://getbootstrap.com/javascript/#carousel , där de grundläggande exemplen för HTML och Javascript används och information härrör från.

Det bör noteras att karuseller inte fungerar korrekt i IE 9 och tidigare på grund av användningen av CSS3-övergångar / animationer.

Grundläggande HTML-användning

En Bootstrap-karusell är en Bootstrap-komponent som skapar ett bildspel som går igenom element i karusellen.

Här är ett grundläggande exempel på HTML-användning:

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

Grundläggande användning och initialisering av Javascript

Karusellkomponenter kan instanseras via jQuery med funktionen $('.carousel').carousel(options) , där $('.carousel') är en toppnivåreferens till den specifika karusellen och options är ett Javascript-objekt som specificerar karusellens standardattribut.

options gör det möjligt att definiera flera egenskaper som påverkar hur karusellen beter sig. Dessa egenskaper definieras som sådana:

Den interval fastighet accepterar en JavaScript number typ som tillåter en användare att definiera den mängd tid karusell visar en given karusell glid för. Om det booleska värdet false anges cyklas inte karusellen automatiskt.
Den pause Fastigheten accepterar en Javascript string typ som växlar beteende där karusellen automatiska cykel pausas när användaren mus in i karusellen. Standardvärdet (och endast) som accepteras är "sväva".
wrap egenskapen accepterar en boolean typ av Javascript som tillåter en användare att definiera om de vill att karusellen kontinuerligt ska cykla utan att stoppa på en given bild.
keyboard accepterar en boolean typ av Javascript som gör det möjligt för en användare att definiera om de vill att karusellen ska svara på tangentbordshändelser eller inte.

Här är ett exempel på den grundläggande användningen av Javascript:

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

Som med andra Bootstrap-komponenter kan karusellens alternativ också anges i HTML via dataattribut.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

twitter-bootstrap
karuseller

Sök…

Anmärkningar

Grundläggande HTML-användning

Grundläggande användning och initialisering av Javascript