Karuzela Plugin
Wtyczka Karuzela jest komponentem do przechodzenia między elementami, jak karuzela (Pokaz slajdów).
Wskazówka: Wtyczki mogą być użyte pojedynczo (stosując Bootstrap's poszczególne "carousel.js" pliku) lub wszystkie na raz (za pomocą "bootstrap.js" lub "bootstrap.min.js" ).
karuzela Przykład
Chania
Atmosfera w Chanii ma dotyk Florencji i Wenecji.
Chania
Atmosfera w Chanii ma dotyk Florencji i Wenecji.
Kwiaty
Sród kwiaty w Kolymbari, Kreta.
Kwiaty
Sród kwiaty w Kolymbari, Kreta.
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).
Jak utworzyć karuzeli
Poniższy przykład pokazuje, jak utworzyć podstawowy karuzeli:
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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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 " Przykład Poradnik
Najbardziej zewnętrzna <div> :
Karuzele wymagają użycia identyfikatorze (w tym przypadku id="myCarousel" ) w przypadku kontroli karuzela, aby funkcjonować poprawnie.
class="carousel" określa, że <div> zawiera karuzelę.
.slide Klasy dodaje efekt przejścia CSS i animacji, które sprawia, że przedmioty ślizgać podczas pokazywania nowego elementu. Pominięcie tej klasy, jeśli nie chcesz tego efektu.
data-ride="carousel" atrybut mówi Bootstrap rozpocząć natychmiast po animowanie karuzelę wczytywania strony.
W "Wskaźniki" część:
Wskaźniki są małe kropki na dole każdego slajdu (który wskazuje, ile slajdy istnieje w karuzeli, a która przesuń użytkownik aktualnie przegląda).
Wskaźniki te są określone w uporządkowanej listy z klasy .carousel-indicators .
data-target atrybutu wskazuje na id karuzeli.
data-slide-to określa, które ślizgają się udać, po kliknięciu konkretnego punktu atrybutów.
W "wrapper dla slajdów" części:
Szkiełka są określone w sposób <div> z klasą .carousel-inner .
Zawartość każdego slajdu jest definiowany w sposób <div> z klasą .item . Może to być tekst lub obrazy.
.active Musi być dodane do jednego z suwaków klasy. W przeciwnym razie, karuzela nie będzie widoczny.
"Left i prawy sterowanie" część:
Ten kod dodaje "prawo" przyciski, które pozwala użytkownikowi tam iz powrotem pomiędzy slajdami ręcznie "w lewo" i.
data-slide atrybut przyjmuje słowa kluczowe "prev" lub "next" , który zmienia slajdów położenie względem aktualnej pozycji.
Dodaj 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 " Wypełnij Bootstrap Carousel Reference
Pełną odniesienia wszystkich karuzeli opcji, metod i zdarzeń, przejdź do naszej Bootstrap JS Carousel Reference .