Cara Membuat Slider Menggunakan Bootstrap Carousel

Salah satu komponen yang banyak digunakan dan dapat digunakan untuk banyak hal misal untuk testimonial dengan gaya slider, header slider, produk slider, dll. Dalam hal ini sering kita kenal dengan Bootstrap Carousel.

Sebagai contoh cara membuat slider menggunakan bootsrap carousel.

1. 
   
2. 
   
3. 
   
4. 
   

 

Kode HTML

<div class="carousel slide" id="wobootstrap">
    <ol class="carousel-indicators">
        <li data-target="#wobootstrap" data-slide-to="0" class="active"></li>
        <li data-target="#wobootstrap" data-slide-to="1" ></li>
        <li data-target="#wobootstrap" data-slide-to="2" ></li>
        <li data-target="#wobootstrap" data-slide-to="3" ></li>
    </ol>

    <div class="carousel-inner main-inner">
        <div class="item active">
            <img src="img/Capture.jpg">
        </div>

        <div class="item">
            <img src="img/Capture.jpg">
        </div>

        <div class="item">
            <img src="img/Capture.jpg">
        </div>

        <div class="item">
            <img src="img/Capture.jpg">
        </div>
    </div>

    <a href="#wobootstrap" class="left carousel-control" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a href="#wobootstrap" class="right carousel-control" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>
</div>

Penjelasan
class .carousel sebagai indentifikasi carousel keseluruhan, class .slide sebagai animasi carousel slide ketika slider image berjalan, kemudian id #wobootstrap sebagai controler dari seluruh carousel agar berjalan sesuai dengan id tersebut, kemudian class .carousel-indicators sebagai indikator DOT sesuai dengan jumlah foto. Untuk wrapper item carousel  menggunakan class .carousel-inner.

Pada sisi kanan dan kiri carousel terdapat dua panah dengan attribute data-slide="prev" sebagai indikator previous dan data-slide="next" untuk menuju ke foto selanjutnya.

untuk menjadikan foto diposisi tengah dari carausel tersebut apabila foto tidak sesuai dengan lebar, maka perlu ditambahkan class. Pada contoh ini ditambahkan pada elemen <div> dengan class .carousel-inner dan ditambahkan class .main-inner dengan kode jelasnya seperti dibawah ini.

CSS

.main-inner img{
    margin: 0px auto;
}

Kode diatas untuk memposisikan foto diposisi tengah....

Semoga contoh diatas dapat memberi manfaat bagi kita semua....