Bootstrap Carousel-Slider Uygulaması

Karousel kontrollerinin düzgün bir şekilde çalışması için önce en dışa bir div id oluşturuyoruz ve bu dive carousel slider sınıfı ekliyoruz. Daha sonra  sayfa yüklendiğinde slideri başlayacak şekilde işaretlemek için data-ride-carousel özelliği eklenir.

Kodları :

div id="carousel-example-generic"class="carousel slide"data-ride="carousel">

Göstergeler (indicators) :

Her slayt için alt kısımda noktalar vardır. Göstergeler sliderin altındaki noktaları gösterir. 

Dış divin içine carousel-indicators sınıfı atanır ve sıfırdan başlayarak  <ol><li> yöntemi ile sırasız slayt adedi kadar liste oluşturulur. data-slide-to kodu ile  belirli noktada tıklandığında hangi slayta gideceği sıfırdan başlayarak numaralandırılarak belirtilir. Listelerin birine de active klası eklenir.

Kodları :

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" 
    class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Dış div içine bir kapsayıcı div açılarak klasına carousel-iner verilir. 

Bu divin içine de tekrar bir div açılarak  klasına item eklenir.Her slayt için <div class=item> kodu eklenir. Slaytların görünmesi için item' lerin birine active eklenmesi gerekir. Aksi takdirde slaytlar görünmez.

Ayrıca; her item divinin içinde img-src ile her slaytın yolu gösterilir.  

Her item divinin içine bir div daha açılarak <div class="carousel-caption"> kodu ile her slayta birer başlık ve paragraf (slaytla ilgili açıklama) eklenir. İçerik resim veya video olabilir.

Kodları:

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">

...

</div>
</div>

Sağ ve Sol Kontrol İkonları:

Slaytlar arasında ileri geri (nex veya prev) gitmek ve slayt pozisyonlarını değiştirmek için kontrol ikonları kullanılır.

Kodları : 

<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role= 
"button"data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span></a>

JavaScript Seçenekleri :

Aşağıda ki JavaScript seçenekleri ile carouselin hızı, dönüş şekli vesair gibi özelliklerini değiştirebiliriz. 

interval : Slaytlar arası gecikme süresi.

pause : Karuselin dönmesini fare üzerine geldiğinde duraklatır, çıktığında slayt                devam eder.

wrap : Karusel sürekli dönmeye devam mı edecek, yoksa duracak mı belirtir.

next : Karusel sonraki slayta döner.

prev : Karusel önceki slayta döner.

number : Karuseli belirtilen slayta döndürür.

cycle : Slaytları soldan sağa döndürür.

NOT:Ayrıca slayt alt yazı boyutu, konumu, arka plan gibi özellikleri değiştirmek için ayrı bir css style uygulayabilirsiniz.  

GÖRÜNTÜLE :

KAYNAK KODLARI İNDİR :

Bootstarpta Carousel Slider oluşturma ile ilgili anlatımı görsel olarak aşağıda ki videodan veya youtube kanalımdan izleyebilirsiniz.