JS Carusel (carousel.js)
Carousel plugin este o componentă pentru bicicleta prin elemente, cum ar fi un carusel (slideshow) .
Pentru un tutorial despre Carusel, citiți Bootstrap Carusel Tutorial .
Notă: Carusel nu sunt acceptate în mod corespunzător în Internet Explorer 9 și versiunile anterioare (because they use CSS3 transitions and animations to achieve the slide effect) pentru (because they use CSS3 transitions and animations to achieve the slide effect) de (because they use CSS3 transitions and animations to achieve the slide effect) .
Clasele Carusel Plugin
| Clasă | Descriere |
|---|---|
| .carousel | Creează un carusel |
| .slide | Adaugă o tranziție CSS și efect de animație, atunci când alunecare de la un element la altul. Eliminați această clasă, dacă nu doriți acest efect |
| .carousel-indicators | Adaugă indicatori pentru carusel. Acestea sunt cele mai mici puncte la partea de jos a fiecărui diapozitiv (care indică cât de multe slide-uri sunt în carusel, și care culisează utilizatorul vizualizați în prezent) |
| .carousel-inner | Adaugă slide-uri carusel |
| .item | Specifică conținutul fiecărui diapozitiv |
| .left carousel-control | Adaugă un buton din stânga pentru a caruselului, care permite utilizatorului să se întoarcă între slide-uri |
| .right carousel-control | Adaugă un buton dreptul la carusel, care permite utilizatorului să meargă mai departe între slide-uri |
| .carousel-caption | Specifică o legendă pentru carusel |
Via data-* Atribute
data-ride="carousel" , atributul activează carusel.
data-slide și data-slide-to atributele specifică care culisează pentru a merge la.
De data-slide atribut acceptă două valori: anterioare sau următoare, în timp ce data-slide-to accepta numere.
Exemplu
<!--
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">
Încearcă - l singur » Via JavaScript
Activați manual cu:
Exemplu
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Încearcă - l singur » Opțiuni Carousel
Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a datelor, la fel ca în date-interval = „“.
| Nume | Tip | Mod implicit | Descriere | Incearca-l |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Specifică întârzierea (in milliseconds) între fiecare diapozitiv. Notă: Setați intervalul de la false pentru a opri elementele de alunecare în mod automat | Utilizarea JS Utilizarea datelor |
| pause | string, or the boolean false | "hover" | Întrerupe caruselul de a trece prin următorul diapozitiv atunci când indicatorul mouse-ului intră în carusel, și reia culisarea atunci când indicatorul mouse-ului lasă carusel Notă: Setați pauză false pentru a opri posibilitatea de a întrerupe pe Hover | Utilizarea JS Utilizarea datelor |
| wrap | boolean | true | Specifică dacă caruselul ar trebui să treacă prin toate slide-urile în mod continuu, sau se opresc la ultimul diapozitiv
| Utilizarea JS Utilizarea datelor |
Metode Carousel
Tabelul următor listează metodele de tip carusel toate disponibile.
| Metodă | Descriere | Incearca-l |
|---|---|---|
| . carousel( options ) | Activează caruselul cu o opțiune. A se vedea optiunile de mai sus pentru valori valide | Incearca-l |
| . carousel("cycle") | Trece prin elementele carusel de la stânga la dreapta | Incearca-l |
| . carousel("pause") | Oprește caruselul de la a merge prin articole | Incearca-l |
| . carousel(number) | Se trece la un element specificat (zero-based: primul element este 0, al doilea element este 1, etc ..) | Incearca-l |
| . carousel("prev") | Merge la elementul anterior | Incearca-l |
| . carousel("next") | Merge la elementul următor | Incearca-l |
Evenimente Carousel
Tabelul următor listează evenimente de tip carusel toate disponibile.
| Eveniment | Descriere | Incearca-l |
|---|---|---|
| slide.bs.carousel | Are loc atunci când carusel este pe cale să alunece de la un element la altul | Incearca-l |
| slid.bs.carousel | Are loc atunci când caruselul a terminat de alunecare de la un element la altul | Incearca-l |
Exemple
Legende diapozitivele
Adăugați <div class="carousel-caption"> În cadrul fiecărei <div class="item"> pentru a crea o legendă pentru fiecare diapozitiv:
Exemplu
<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>
Încearcă - l singur »