JS Karuzela (carousel.js)
Wtyczka Karuzela jest komponentem do przechodzenia między elementami, jak karuzela (Pokaz slajdów).
Samouczek o karuzele, przeczytaj naszą Bootstrap Carousel Tutorial .
Uwaga: Karuzele nie są obsługiwane poprawnie w Internet Explorer 9, a wcześniej (ponieważ używają przejścia i animacje CSS3 aby osiągnąć efekt slajdów).
Karuzeli Plugin Klasy
| Klasa | Opis |
|---|---|
| .carousel | Tworzy karuzelę |
| .slide | Dodaje przejścia CSS i efekt animacji, gdy przesuwne z jednej pozycji do drugiej. Usuń tej klasy, jeśli nie chcesz tego efektu |
| .carousel-indicators | Dodaje wskaźników karuzeli. Są to małe kropki na dole każdego slajdu (który wskazuje, ile slajdy są w karuzeli, a które przesunąć użytkownik aktualnie przegląda) |
| .carousel-inner | Dodaje slajdy na karuzeli |
| .item | Określa zawartość każdego slajdu |
| .left carousel-control | Dodaje lewy przycisk na karuzeli, która pozwala użytkownikowi na powrót między slajdami |
| .right carousel-control | Dodaje prawym przyciskiem do karuzeli, która pozwala użytkownikowi iść do przodu między slajdami |
| .carousel-caption | Określa podpis do karuzeli |
Via data-* Atrybuty
data-ride="carousel" atrybut uruchamia karuzelę.
data-slide i data-slide-to atrybuty określa, które ślizgają się udać.
data-slide atrybut przyjmuje dwie wartości: poprzednie lub następne, a data-slide-to zaakceptować liczb.
Przykład
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
Spróbuj sam " za pośrednictwem JavaScript
Włącz ręcznie za pomocą:
Przykład
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Spróbuj sam " Karuzela Opcje
Opcje mogą być przekazywane za pomocą atrybutów danych lub JavaScript. Dla atrybutów danych, nazwy opcji dołączania do teleinformatyczny, jak w danych odstępu = "".
| Nazwa | Rodzaj | Zaniedbanie | Opis | Spróbuj |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Określa opóźnienie (w milisekundach) pomiędzy każdym slajdzie. Uwaga: Ustaw interwał na false, aby zatrzymać automatyczne przesuwanie przedmiotów | Korzystanie JS Wykorzystując dane |
| pause | string, or the boolean false | "hover" | Wstrzymuje karuzelę ze przechodzi do następnego slajdu, gdy wskaźnik myszy wejdzie karuzelę, i wznawia przesuwne, gdy wskaźnik myszy opuści karuzelę Uwaga: Ustaw przerwę na false, aby zatrzymać możliwość wstrzymania przy aktywowaniu | Korzystanie JS Wykorzystując dane |
| wrap | boolean | true | Określa, czy karuzela powinna przejść przez wszystkie slajdy w sposób ciągły, lub zatrzymać się na ostatnim slajdzie
| Korzystanie JS Wykorzystując dane |
Metody Carousel
Poniższa tabela zawiera listę wszystkich dostępnych metod karuzeli.
| metoda | Opis | Spróbuj |
|---|---|---|
| .carousel( options ) | Aktywuje zmieniaczem opcja. Patrz wyżej opcje dla prawidłowych wartości | Spróbuj |
| .carousel("cycle") | Przechodzi przez elementy karuzeli od lewej do prawej | Spróbuj |
| .carousel("pause") | Zatrzymuje karuzelę od przechodzi rzeczy | Spróbuj |
| .carousel(number) | Przechodzi do określonego elementu (od zera: pierwsza pozycja to 0, druga pozycja to 1, itd ..) | Spróbuj |
| .carousel("prev") | Przechodzi do poprzedniej pozycji | Spróbuj |
| .carousel("next") | Przejście do następnego elementu | Spróbuj |
Karuzela Wydarzenia
Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń karuzeli.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| slide.bs.carousel | Występuje, gdy karuzela ma się przesuwać z jednej pozycji do drugiej | Spróbuj |
| slid.bs.carousel | Występuje, gdy karuzela zakończył przesuwane z jednej pozycji do drugiej | Spróbuj |
Przykłady
Podpisy do slajdów
Dodaj <div class="carousel-caption"> wewnątrz każdego <div class="item"> , aby utworzyć podpis do każdego slajdu:
Przykład
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Spróbuj sam "