Carousel Plugin
Carousel plugin este o componentă pentru bicicleta prin elemente, cum ar fi un carusel (slideshow) .
Sfat: Plugin - uri pot fi incluse în mod individual (using Bootstrap's individual "carousel.js" file) , sau dintr -o dată (folosind "bootstrap.js" sau "bootstrap.min.js" ).
Carusel Exemplu
Chania
Atmosfera din Chania are un dram de Florența și Veneția.
Chania
Atmosfera din Chania are un dram de Florența și Veneția.
Flori
flori beatiful in Kolymbari, Creta.
Flori
flori beatiful in Kolymbari, Creta.
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) .
Cum Pentru a crea un Carusel
Următorul exemplu arată cum să creați un carusel de bază:
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>
<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>
Încearcă - l singur » exemplu explicat
Ultraperiferice <div> :
Carusel necesită utilizarea unui id (in this case id="myCarousel" ) , (in this case id="myCarousel" ) pentru controalele de tip carusel pentru a funcționa corect.
class="carousel" , se specifică faptul că acest <div> conține un carusel.
.slide clasa adaugă un efect de tranziție CSS și animație, ceea ce face ca elementele alunece atunci când arată un element nou. Omiteți această clasă, dacă nu doriți acest efect.
data-ride="carousel" atribut spune Bootstrap pentru a începe animarea carusel imediat atunci când se încarcă pagina.
"Indicators" parte:
Indicatorii sunt mici puncte la partea de jos a fiecărui diapozitiv (care indică cât de multe slide-uri există în carusel, și care culisează utilizatorul vizualizați în prezent).
Indicatorii sunt specificate într - o listă ordonată cu clasa .carousel-indicators .
De data-target atribut indică id - ul caruselului.
data-slide-to atribut specifica care culisează pentru a merge la, atunci când faceți clic pe punct specific.
"Wrapper for slides" parte:
Lamelele sunt specificate într - un <div> cu class .carousel-inner .
Conținutul fiecărui diapozitiv este definit într - un <div> cu clasa .item . Acest lucru poate fi text sau imagini.
.active clasa trebuie să fie adăugat la unul dintre slide - uri. În caz contrar, caruselul nu va fi vizibil.
"Left and right controls" de "Left and right controls" parte:
Acest cod adaugă "left" și "right" butoane care permite utilizatorului să meargă înainte și înapoi între slide - uri manual.
De data-slide atributul acceptă cuvintele cheie "prev" sau "next" , care modifică poziția de diapozitive în raport cu poziția sa actuală.
Adăugați Legende la Slide-uri
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 » Finalizarea Bootstrap Carusel de referință
Pentru o referință completă a tuturor opțiunilor de tip carusel, metode și evenimente, du - te la nostru Bootstrap JS Carusel de referință .