Membuat Carousel Menggunakan Bootstrap

lebakcyber.net – Membuat carousel menggunakan Bootstrap. Pada kesempatan kali ini kita akan membahas mengenai bagaimana cara membuat sebuah carousel pada bootstrap, silahkan disimak ya.

Carousel sering juga disebut dengan istilah slideshow yang dapat menampilkan gambar-gambar kedalam bentuk slide. Sekarang ini sudah banyak website yang memberikan fitur carousel pada web yang mereka buat untuk mempromosikan sebuah artikel terbaru ataupun untuk menampilkan produk unggulan.

Biasanya carousel diletakkan pada halaman utama dari sebuah website, carousel pada bootstrap sendiri memiliki berbagai macam desain yang bisa digunakan dan tujuannya agar bisa menarik perhatian dari para pengunjung website.

Kalau kita ingin membuat sebuah carousel dengan cara manual pasti akan sangat sulit, namun karena disini kita memakai bootstrap, kita dapat membuat sebuah carousel dengan lebih mudah karena bootstrap sudah menyertakan class yang bisa digunakan untuk membuat sebuah carousel.

Sebelum kita membuat sebuah carousel dengan memanfaatkan bootstrap, pertam kita harus menyediakan terlebih dahulu gambar-gambar yang nantinya akan kita masukan kedalam carousel tersebut.

Sekarang langsung saja kita coba untuk membuat sebuah carousel dengan memakai bootstrap. Silahkan buat sebuah file dengan nama index.html baru lalu masukan perintah dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Carousel di Bootstrap - lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
   <div class="container">		
    <center><h1>Carousel dengan Bootstrap</h1></center>
    <br/>
    <div class="col-md-8 col-md-offset-2">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- 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>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>				
            </ol>
 
            <!-- deklarasi carousel -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="lebakcyber1.jpg" alt="lebakcyber.net">
                    <div class="carousel-caption">
                        <h3>lebakcyber.net</h3>
                        <p>Situs Belajar Pemrograman Gratis</p>
                    </div>
                </div>
                <div class="item">
                    <img src="lebakcyber2.jpg" alt="lebakcyber.net">
                    <div class="carousel-caption">
                        <h3>Belajar PHP</h3>
                        <p>Belajar php bersama lebakcyber.net</p>
                    </div>
                </div>
                <div class="item">
                    <img src="lebakcyber3.jpg" alt="lebakcyber.net">
                    <div class="carousel-caption">
                        <h3>Belajar HTML</h3>
                        <p>Belajar HTML bersama lebakcyber.net</p>
                    </div>
                </div>	
                <div class="item">
                    <img src="lebakcyber4.jpg" alt="lebakcyber.net">
                    <div class="carousel-caption">
                        <h3>Belajar CSS</h3>
                        <p>Belajar css bersama lebakcyber.net</p>
                    </div>
                </div>		
                <div class="item">
                    <img src="lebakcyber5.jpg" alt="lebakcyber.net">
                    <div class="carousel-caption">
                        <h3>Belajar Javascript bersama lebakcyber.net</h3>
                        <p>Belajar Javascript bersama lebakcyber.net</p>
                    </div>
                </div>		
            </div>
 
            <!-- membuat panah next dan previous -->
            <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">Sebelumnya</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">Selanjutnya</span>
            </a>
        </div>
    </div>
   </div>
</body>
</html>

Setelah dijalankan nanti hasilnya akan seperti pada gambar dibawah ini :