JS Carousel (carousel.js)
Karusel eklenti bir döner gibi, elemanlar arasında geçiş yapma için bir bileşenidir (slideshow) .
Carousels hakkında bir eğitim için bizim okumak Bootstrap Carousel Eğitimi .
Not: Atlı Karıncalar önceki Internet Explorer 9'da düzgün desteklenmez ve (because they use CSS3 transitions and animations to achieve the slide effect) .
Carousel Eklenti Sınıflar
| Sınıf | Açıklama |
|---|---|
| .carousel | Bir atlıkarınca oluşturur |
| .slide | bir öğeden sonraki kaydırırken CSS geçiş ve animasyon etkisi ekler. Bu efekti istemiyorsanız bu sınıfı kaldır |
| .carousel-indicators | atlıkarınca için göstergeler ekler. Bunlar her slayt altındaki küçük noktalar şunlardır (atlıkarınca var kaç slayt gösterir ve hangi kullanıcı şu anda incelemekte slayt) |
| .carousel-inner | atlıkarınca slaytları ekler |
| .item | Her bir slayt içeriğini belirler |
| .left carousel-control | kullanıcı slaytlar arasında geri dönmek için izin verir atlıkarınca bir sol düğmesi ekler |
| .right carousel-control | kullanıcı slaytlar arasında ileri gitmek için izin veren atlıkarınca doğru bir düğmeye, ekler |
| .carousel-caption | atlıkarınca için başlık belirtir |
Via data-* Özellikler
data-ride="carousel" nitelik atlıkarınca devreye sokar.
data-slide ve data-slide-to gitmek slayt belirliyorsa bağlıyor.
data-slide ederken, prev veya bir sonraki: nitelik iki değerlerini kabul data-slide-to numaralarını kabul.
Örnek
<!--
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">
Kendin dene " JavaScript aracılığıyla
el ile etkinleştirme:
Örnek
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Kendin dene " Carousel Seçenekler
Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. veri özelliklerini için, = "" veri aralığının olduğu gibi, veriye seçeneği adını ekleyin.
| isim | tip | Varsayılan | Açıklama | Dene |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Gecikmeyi belirtir (in milliseconds) slaytlar arasında. Not: false olarak ayarlayın aralığı otomatik kayar öğeleri durdurmak için | JS kullanma kullanma verileri |
| pause | string, or the boolean false | "hover" | fare işaretçisi atlıkarınca giren bir sonraki slayt yaşıyor tamburla ara verir ve fare işaretçisi atlıkarınca ayrıldığında kayar devam Not: false olarak ayarlayın duraklama vurgulu duraklar yeteneği durdurmak için | JS kullanma kullanma verileri |
| wrap | boolean | true | atlıkarınca sürekli tüm slaytlar geçmesi veya son slayt durdurmak belirtir
| JS kullanma kullanma verileri |
Carousel Yöntemler
Aşağıdaki tabloda mevcut tüm atlıkarınca yöntemlerini listeler.
| Yöntem | Açıklama | Dene |
|---|---|---|
| . carousel( options ) | Bir seçenek karosele etkinleştirir. Geçerli değerler için yukarıdaki seçeneklere bakın | Dene |
| . carousel("cycle") | Soldan sağa doğru atlıkarınca öğeler arasında Goes | Dene |
| . carousel("pause") | öğeler arasında gitmekten atlıkarınca durdurur | Dene |
| . carousel(number) | Belirli bir nesneye gider (sıfır göre ilk madde, 0, ikinci öğe vb 1, ..) | Dene |
| . carousel("prev") | Önceki öğeye gider | Dene |
| . carousel("next") | Sonraki öğeye gider | Dene |
Carousel Olaylar
Aşağıdaki tabloda mevcut tüm atlıkarınca olaylarını listeler.
| Olay | Açıklama | Dene |
|---|---|---|
| slide.bs.carousel | atlıkarınca bir öğeden diğerine kaydırarak üzereyken meydana gelir | Dene |
| slid.bs.carousel | atlıkarınca bir öğeden diğerine kayma tamamladığında gerçekleşir | Dene |
Örnekler
Slaytlar Başlıklar
Ekle <div class="carousel-caption"> Her dahilinde <div class="item"> her slayt için başlık oluşturmak için:
Örnek
<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>
Kendin dene "