Bootstrap slider ekleme

Bootstrap her konuda olduğu gibi siteye canlı bir görünüm katmamız için slider eklememizde de büyük kolaylık sağlıyor. Bootstrapın hazır slider yapılarını oluşturduğumuz divin classında çağırarak rahatlıkla kullanabiliriz. Bunun için örnek basit bir bootstrap slider kodunu ve her aşamanın açıklamasını aşağıdaki örneğimizde görebilirsiniz.

 











  /* 

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

(Bootsrapta geçerli slider classını ve id sini div içerisinde oluşturduk.)

                <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>

(Oluşturacağımız slider sayfalarını öncesinde eklediğimiz id ye göre liste içerisinde yazdık)

Not: class çağırırken “.” id çağırırken “#”kullanılır.

                 <div class="carousel-inner" role="listbox">

                    <div class="item active">

                     <img src=" EKLEMEK İSTEDİĞİNİZ RESMİN YOLUNU YAZIN ">

                        <div class="carousel-caption">

SLİDER DENEMESİ-1

                        </div>

(ilk sliderımızın resmini img src etiketi içerisine yazısını ise altına oluşturduğumuz divin içine ekledik)

                    </div>

                    <div class="item">

                              <img src="EKLEMEK İSTEDİĞİNİZ RESMİN YOLUNU YAZIN" >

                        <div class="carousel-caption">

SLİDER DENEMESİ-2

                        </div>

                    </div>

                    <div class="item">

                 <img src=" EKLEMEK İSTEDİĞİNİZ RESMİN YOLUNU YAZIN " >

                        <div class="carousel-caption">

SLİDER DENEMESİ-3

                        </div>

                    </div>

                </div>

(diğer sliderların resim ve yazılarını da aynı şekilde ekledik)

                 <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>

            </div>

*/

(sliderda bir önceki ve bir sonraki slidera geçiş için kontrolleri yerleştirdik.)

Bu aşamalardan sonra işleminiz tamamlanmış olacaktır.