Cara Membuat Carousel atau Slider Menggunakan Bootstrap

Cara Membuat Carousel atau Slider Menggunakan Bootstrap

Carousel atau biasa dikenal juga sebagai Slider pada sebuah website akan menjadi nilai tambah. Dengan adanya Carousel atau Slider ini, website akan terlihat lebih dinamis. 360 Dental Care adalah halaman yang terlihat bagus.

Tidak terlalu sulit, membuat Carousel atau Slider bisa dilakukan dengan menggunakan Bootstrap. Sejak keluaran (versi) pertamanya, Bootstrap sudah menyediakan CSS untuk Carousel.

Pada kesempatan kali ini, kita akan mencoba bagaimana Cara Membuat Slider dengan Bootstrap.

Membuat Carousel atau Slider dengan Bootsrap, hanya tinggal memanggil perintahnya saja.

Nantinya, Carousel atau Slider ini sudah bisa digunakan untuk halaman responsive, sehingga dapat menyesuaikan tampilan dari device apa website tersebut diakses.

Baca Juga: Aplikasi Website Portal Berita dengan PHP dan MySql

Berikut adalah contoh penggunaan Carousel yang terdapat pada Bootstrap.

1. Carousel Dengan Caption Text :

Cara Membuat Carousel atau Slider Menggunakan Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel .item{
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
    max-height: 280px;
    width:100%;
}
.bs-example{
    margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class='col-md-6'>
<div align='center'><h2>Carousel Bootstrap</h2></div>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 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>
        </ol>   
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/slide1.jpg" alt="First Slide">
                  <div class="carousel-caption">
                  <h3>First slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <img src="images/slide2.jpg" alt="Second Slide">
                <div class="carousel-caption">
                  <h3>Second slide label</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
              <div class="item">
                <img src="images/slide3.jpg" alt="Third Slide">
                <div class="carousel-caption">
                  <h3>Third slide label</h3>
                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</div>
</body></html>

Baca Juga: Tutorial Dasar PHP: Upload Data

2. Carousel Tanpa Caption Text:

Cara Membuat Carousel atau Slider Menggunakan Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Carousel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel{
    background: #2f4357;
    margin-top: 20px;
}
.carousel .item{
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
}
.carousel .item img{
    margin: 0 auto; /* Align slide image horizontally center */
    max-height: 280px;
    width:100%;
}
.bs-example{
    margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class='col-md-6'>
<div align='center'><h2>Carousel Bootstrap</h2></div>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 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>
        </ol>   
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/slide1.jpg" alt="First Slide">
            </div>
            <div class="item">
                <img src="images/slide2.jpg" alt="Second Slide">
            </div>
              <div class="item">
                <img src="images/slide3.jpg" alt="Third Slide">
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
</div>
</body>
</html>

Caranya, copy source kode diatas, kemudian praktekkan sendiri di localhost.

Jangan lupa, buat sebuah folder dengan nama ‘images’ dan lengkapi gambar pada folder images tersebut dengan nama: slide1.jpg, slide2.jpg dan slide3.jpg.

Demikian, semoga tutorial kali ini tentang bagaimana Cara Membuat Carousel atau Slider menggunakan Bootstrap, bisa memberikan manfaat. (*)

Berita Terkait