twitter-bootstrap
Karuzele

Uwagi

Podstawowe użycie HTML

Karuzela Bootstrap to składnik Bootstrap, który tworzy pokaz slajdów, który cyklicznie przewija elementy w karuzeli.

Oto podstawowy przykład użycia HTML:

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

Podstawowe użycie i inicjalizacja Javascript

Składniki karuzeli mogą być tworzone za pomocą jQuery za pomocą funkcji $('.carousel').carousel(options) , gdzie $('.carousel') to odniesienie najwyższego poziomu do określonej karuzeli, a options to obiekt Javascript określający karuzelę domyślne atrybuty.

Obiekt options pozwala zdefiniować wiele właściwości, które będą miały wpływ na zachowanie karuzeli. Te właściwości są zdefiniowane jako takie:

• Właściwość interval akceptuje typ number Javascript, który pozwala użytkownikowi określić czas, przez który karuzela wyświetla dany slajd karuzeli. Jeśli zostanie podana wartość logiczna „ false , karuzela nie będzie cyklicznie automatycznie.
• Właściwość pause akceptuje typ string JavaScript, który przełącza zachowanie, w którym automatyczne przełączanie karuzeli jest wstrzymywane, gdy mysz użytkownika wchodzi do karuzeli. Domyślną (i jedyną) wartością jest „hover”.
• Właściwość wrap akceptuje typ boolean Javascript, który pozwala użytkownikowi określić, czy karuzela ma ciągle pracować bez zatrzymywania się na danym slajdzie.
• Właściwość keyboard akceptuje typ boolean Javascript, który pozwala użytkownikowi określić, czy karuzela ma reagować na zdarzenia klawiatury.

Oto przykład podstawowego użycia Javascript:

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

Podobnie jak w przypadku innych składników Bootstrap, opcje karuzeli można również określić w HTML za pomocą atrybutów danych.