Carousel Eklentisi
Karusel eklenti bir döner gibi, elemanlar arasında geçiş yapma için bir bileşenidir (slideshow) .
İpucu: Eklentiler bireysel olarak dahil edilebilir (using Bootstrap's individual "carousel.js" file) (kullanarak, veya hepsini birden "bootstrap.js" veya "bootstrap.min.js" ).
Karusel Örnek
Hanya
Hanya atmosfer Floransa ve Venedik bir dokunuş vardır.
Hanya
Hanya atmosfer Floransa ve Venedik bir dokunuş vardır.
Çiçekler
Kolymbari, Girit'te Güzel çiçekler.
Çiçekler
Kolymbari, Girit'te Güzel çiçekler.
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) .
Nasıl Carousel Oluşturma
Aşağıdaki örnek, bir temel atlıkarınca nasıl oluşturulacağını gösterir:
Ö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>
<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>
Kendin dene " Örnek Açıklaması
En dıştaki <div> :
Atlı Karıncalar bir kimlik kullanımını gerektiren (in this case id="myCarousel" ) atlıkarınca kontrolleri düzgün çalışması için.
class="carousel" Bu belirtir <div> bir atlıkarınca içeriyor.
.slide sınıf yeni bir öğe gösterirken ürün slayt kılan bir CSS geçiş ve animasyon efekti ekler. Bu efekti istemiyorsanız bu sınıfı dahil etmeyin.
data-ride="carousel" nitelik derhal Sayfa yüklendiğinde atlıkarınca animasyon başlamak için Bootstrap söyler.
"Indicators" kısmı:
göstergeler (atlıkarınca var kaç slayt gösterir ve kullanıcıyı anda görüntülediğiniz slayt) her slayt altındaki küçük noktalar vardır.
Göstergeler sınıf ile sıralı bir listede belirtilen .carousel-indicators .
data-target niteliği atlıkarınca ait id işaret ediyor.
data-slide-to özgü nokta tıklandığında, gitmek slayt belirliyorsa bağlıyor.
"Wrapper for slides" parçası:
Slaytları belirtilen <div> class ile .carousel-inner .
Her bir slayt içeriği tanımlanır <div> class ile .item . Bu metin veya görüntü olabilir.
.active sınıf slaytlar birine ilave edilmesi gerekmektedir. Aksi takdirde, atlıkarınca görünür olmayacaktır.
"Left and right controls" bölümü:
Bu kod ekler "left" ve "right" kullanıcı el slaytlar arasında ileri ve geri gitmek için izin verir düğmeleri.
data-slide nitelik anahtar kelimeler kabul "prev" veya "next" bugünkü konuma slayt konumunu değiştirir.
Slaytlar Yazılar ekleyin
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 " Tamamlayın Bootstrap Carousel Referansı
Tüm atlıkarınca seçenekleri, yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Carousel Referans .