Home / Bootstrap / Tutorial Bootstrap Bagian 14: Membuat Carousel Dengan Bootstrap

Tutorial Bootstrap Bagian 14: Membuat Carousel Dengan Bootstrap

Fungsi Carousel tidak jauh berbeda dengan Jumbotron yang kita bahas pada tutorial Membuat Jumbotron dengan Bootstrap. Carousel biasanya di tempatkan pada halaman utama sebuah website. Carousel berbentuk slider yang setiap itemnya akan bergeser secara otomatis berdasarkan waktu yang sudah ditentukan.

Website banyak menggunakan Carousel untuk mendukung tampilan agar lebih menarik dan interaktif. Informasi yang ditampilkan pada carousel juga akan langsung manjadi perhatian pengunjung, sebab secara tidak sengaja pergantian slide disertai keterangan singkat akan menimbulkan keingintahuan pengunjung untuk melihat keseluruhan informasi secara lebih detail. (baca: Mengatur Tampilan Gambar dengan Bootstrap)

Bootstrap juga sudah menyediakan class carousel untuk menampilkan slider content. Penggunaanya tidak jauh berbeda dengan jumbotron, bisa di tempatkan di dalam dan diluar container. Untuk membuat sebuah carousel dengan bootstrap ada beberapa class yang harus kita gunakan, yaitu class carousel, carousel-inner, carousel-item dan carousel-caption.

Untuk memulai Membuat Sebuah Carousel dengan Bootstrap, maka terlebih dahulu kita menyediakan gambar yang akan dijadikan sebagai background slide. Pada contoh ini, direktori utama website adalah folder bootstrap dan terdapat 3 file gambar yang diletakkan pada folder images. Strukturnya direktorinya seperti gambar dibawah.

Mempersiapkan gambar untuk membuat carousel dengan bootstrap

Jika gambar sudah siap, contoh penggunaan class-class carousel bootstrap untuk membuat slider seperti  berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Carousel dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">    
                  <div id="contoh-carousel" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#contoh-carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#contoh-carousel" data-slide-to="1"></li>
                            <li data-target="#contoh-carousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src="images/slide-1.jpg" alt="Gambar Pertama">
                                <div class="carousel-caption">
                                    <h1>MySql</h1>
                                    <h2>Dalam Website  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</h2>
                                    <p><a class="btn btn-info btn-lg" href="#" role="button">Daftar</a> 
                                    <a class="btn btn-danger btn-lg" href="#" role="button">Login</a></p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="images/slide-2.jpg" alt="Gambar Kedua">
                                <div class="carousel-caption">
                                    <h1>PHP</h1>
                                    <h2>Dalam Website  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</h2>
                                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Selengkapnya</a> 
                                </div>
                            </div>
                            <div class="item">
                                <img src="images/slide-3.jpg" alt="Gambar Ketiga">
                                <div class="carousel-caption">
                                <h1>Bootstrap</h1>
                                    <h2>Dalam Website  Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta</h2>
                                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Masuk</a> 
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#contoh-carousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Prev</span>
                        </a>
                        <a class="right carousel-control" href="#contoh-carousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
            </div>
        </div>
    </div>
  <script src="js/jQuery v3.2.0.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Pada contoh diatas, untuk membuat carousel dimulai dari baris 11 sampai 52. Baris 11 terlebih dahulu kita harus membuat class carousel beserta id carousel, di sini id-nya adalah contoh-carousel. Id ini nanti digunakan sebagai indikator untuk mengatur control item per slide. Lihat penggunan id carousel pada list <li data-target> baris 12 sampai 13. Untuk data-slide-to dimulai dari 0. Jadi, jika kita ingin slidernya sebanyak 3 item maka nilainya berurut dari 0-2.
  • Selanjutnya pada baris 7 terdapat class carousel-inner dengan role listbox. Class ini nantinya akan berisi item-item yang akan dijadikan slider.
  • Baris 18 sampai 26 adalah class untuk membuat item slider yang pertama. Pada baris 18, dimulai dengan membuat class item karena ini item slider yang pertama maka sertakan active dalam class item tersebut. Baris ke 19 sertakan gambar yang pertama. Gambar kita yang pertama tadi namanya slide-1.jpg dan berada dalam folder images, jadi pemanggilannya images/slide-1.jpg
  • Kemudian pada baris 20 sampai 25 membuat isi content dari slider yang pertama. Pada baris 20 terlebih dahulu dibuatkan class carousel-caption kemudian isikan contentnya. Di contoh ini judul content menggunakan font <h1> dan keterangannya dalam paragraf <p> serta terdapat dua button.
  • Baris 27 sampai 34 untuk membuat item slider yang kedua dan baris 35 sampai 42 untuk membuat item slider yang ketiga.
  • Baris 44 sampai 47 untuk membuat tombol control prev dan next pada slider. Baris 44 dan 45 untuk membuat icon Prev atau < pada tampilan desktop dan baris 46 untuk membuat tulisan prev pada tampilan smartphone. Sama halnya dengan baris 48 sampai 51 untuk membuat tombol > dan tulisan next pada smartphone.

Hasil carousel dengan bootstrap ketika ditampilkan di browser adalah seperti gambar dibawah:

Tampilan carousel denga bootstrap

Demikian tutorial Membuat Carousel dengan Bootstrap. Dengan penggunaan carousel pada halaman depan sebuah website maka tampilannya akan lebih menarik dan interaktif. Selamat Mencoba dan semoga bermanfaat.

Tutorial selanjutnya adalah Cara Membuat Modal dengan Bootstrap.

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 12: Membuat Pills dan Tabs dengan Bootstrap

Tutorial sebelumnya kita sudah membahas tentang Membuat Navigation Bar(Navbar) dan Dropdown Menu dengan Bootstrap. Kali …

Leave a Reply

Your email address will not be published. Required fields are marked *