Carrousel / Slideshow Bootstrap

Muhammad Aqshol Rifanza - Kali ini saya akan berbagi cara membuaut carrosel atau slideshow dengan menggunakan bootstrap.

Pengertian
Carousel atau sering disebut oleh kebanyakan orang slideshow merupakan sebuah proses penampilan gambar yang diberi efek slide yaitu gambar dapat berubah sesuai dengan waktu yang ditentukan atau kita dapat menggeser gambar menjadi gambar yang lain. Sangat banyak website yang menggunakan carousel atau slideshow pada website mereka untuk mempromosikan produk unggulan atau untuk tujuan lainya. Biasanya carousel diletakkan pada halaman depan seuah website dengan tampilan yang menarik agar pengunjung tertarik dan betah mengunjungi website tersebut.

Sangat susah untuk membuat carousel dengan cara manual. Dengan adanya class carousel pada Bootstrap kita dapat dengan mudah membuat carousel. Kita juga dapat menambahkan caption pada carousel kita dengan tujuan promosi atau tujuan lainya dan pastinya tampilan dari carousel tersebut mewah dan responsive.

Yang harus kita lakukan pertama kali adalah menyiapkan beberapa file gambar yang akan kita gunakan menjadi gambar yang muncul pada carousel. Disini saya sudah menyediakan 3 file gambar untuk saya jadikan gambar yang muncul pada carousel.

Siapkan gambar pada folder dengan nama images, simpan gambar pada follder images tersebut.

Kemudian Masukkan Script berikut

Carrouselnya sudah jadi, taraaa. Kemudian tambahkan class grid untuk mengatur ukuran gambar dan mengatur letak dari gambar tersebut jika sobat tidak membutuhkan class tersebut hapus saja karena grid tidak wajib diletakkan pada carousel

<div class="col-md-8 col-md-offset-2">

Lalu untuk  menambahkan indicator dari carouselnya sobat harus menambahkan class berikut

<!-- 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>
            </ol>

Sobat Bisa sobat otak atik sendiri, silahkan ganti gambarnya pada tag img-src dan masukkan nama gambar, slahkan ganti <h3> dan <p> sesuai keinginan sobat

 <div class="carousel-inner" role="listbox">
                <div class="item active">
                <img src="Images/1.jpg" alt="SCRIPT_KIDDIES">
                <div class="carousel-caption">
                <h3>SCRIPT_KIDDIES</h3>
                <p>Tutorial Pemrograman Web, Mobile dan Design</p>
                </div>
                </div>

Untuk membuat icon panah dan ketika panah tersebut kita klik maka gamar tersebut akan berubah gunakan class berikut ini

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

Dan hasilnya akan

Kesimpulan
Dengan adanya class carousel pada Bootstrap ini kita dimudahkan untuk membuat carousel / slideshow karena kita tinggal memanggil class Bootstrap dan memahami arti dari setiap class tersebut. hmm tetapi menurut saya dibandingkan dengan class Bootstrap yang lain carousel ini yang paling susah dari pada membuat class Bootstrap yang lain.

Referensi

• http://www.script-kiddies.org
• http://www.malasngoding.com
• http://www.w3school.com