Website yang menyajikan banyak image sering disajikan dalam format image slide show, bergerak secara bergantian. Penyajian image slideshow awal-awalnya sering digunakan dalam image gallery. Namun saat ini, dengan menambahkan caption, image slideshow dapat menjadi sebuah penyajian sebagai headline news yang menampilkan judul dan sebagian cuplikan berita. Nah, pada bootstrap sudah terdapat fasilitas untuk membuatnya, dikenal dengan nama Boostrap Carousel.
Berikut ini adalah output atau hasil akhir yang akan kita kerjakan dalam tutorial ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Langkah-Langkah Membuat Bootstrap Carousel
1. Create file carousel.config.css
File ini bertujuan untuk mengatur caption yang nantinya akan kita tambahkan pada setiap gambar. Disamping itu, dalam file ini setiap gambar diset dengan ukuran 555x353, sehingga akan didapatkan ukuran gambar yang seragam walaupun file gambar berbeda ukurannya. Kita juga mengatur posisi dari
caraousel-control dan caraousel-indicator..carousel-inner>.item>img, .carousel-inner>.item>a>img {
height: 353px;
width: 555px;
}
.carousel-control {
position: absolute;
top: 40%;
left: 15px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.carousel-control.right {
right: 15px;
left: auto;
}
.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 5px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
}
.carousel-caption p {
margin-bottom: 0;
}
.carousel-indicators{
top:0px;
}
2. Create file index_carousel.html
File ini adalah file utama dalam menampilkan image slideshow yang disertai dengan : judul berita, ringkasan berita dan link untuk membaca selengkapnya. Dalam file ini terdapat pemanggilan file informatika.css yang merupakan librari untuk navigasi bar (bukan bagian dari pembuatan carousel).
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Menghitung Selisih Hari</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/informatika.css">
<link rel="stylesheet" href="assets/css/carousel.config.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Dunia Informatika</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Bootstrap</a></li>
<li class="clr3"><a href="">MySQL</a></li>
<li class="clr4"><a href="">C Language</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<div class="container">
<div class ="row">
<div class="col-md-6 ">
<div id="myCarousel" class='carousel slide' data-ride='carousel'>
<ol class='carousel-indicators'>
<li data-target='#myCarousel' data-slide-to='0'></li>
<li data-target='#myCarousel' data-slide-to='1'></li>
<li data-target='#myCarousel' data-slide-to='2'></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="">
<img src="image/2.jpg">
</a>
<div class="container">
<div class="carousel-caption left-caption style="background-color:#EE0930">
<a href=""> <font color=#ffffffff style="font-family: Verdana,Arial,Helvetica,Georgia; font-size: 13px;">
<h5 class="text-left">Dunia Flora dan Fauna</h5></font>
</a>
<br>
<p style="font-family: Verdana,Arial,Helvetica,Georgia; font-size: 10px; text-align: justify;">Saat ini para ilmuwan sedang meneliti hasil ekstrak klorofil unuk pembuatan pakan ternak. Seperti yang kita ketahui fungsi klorofil dalam tanaman adalah untuk menyerap cahaya dan mentransfernya melalui tanaman selama fotosintesis.</p>
<br>
<p><a href="">
<h6 class="text-left">Selengkapnya</b></h6>
</p>
</div>
</div>
</div>
<div class="item">
<a href="#">
<img src="image/3.jpg">
</a>
<div class="container">
<div class="carousel-caption left-caption style="background-color:#EE0930">
<a href="#"> <font color=#ffffffff style="font-family: Verdana,Arial,Helvetica,Georgia; font-size: 13px;"><h5 class="text-left">Keindahan Pantai Warna-warni</h5></font>
</a>
<br>
<p style="font-family: Verdana,Arial,Helvetica,Georgia; font-size: 10px; text-align: justify;">Tidak bisa dipungkiri, pesona laut banyak membuat semua orang menghabiskan waktu liburannya dengan mendatangi laut-laut sekitar lokasi tempat tinggal mereka. Bahkan saat ini, banyak turis asing yang berkunjung dari satu pantai ke pantai lainnya.</p>
<br>
<p><a href="#"> <h6 class="text-left">Selengkapnya</b> </h6></p>
</div>
</div>
</div>
<div class="item">
<a href="#">
<img src="image/4.jpg">
</a>
<div class="container">
<div class="carousel-caption left-caption style="background-color:#EE0930">
<a href="#"> <font color=#ffffffff style="font-family: Verdana,Arial,Helvetica,Georgia; font-size: 13px;"><h5 class="text-left">Mengapa daun berjatuhan pada musim gugur ?</h5></font>
</a>
<br>
<p style="font-family: Verdana,Arial,Helvetica,Georgia; font-size: 10px; text-align: justify;">Bagi negara yang mengenal empat musim, ada satu musim yang membuat para penduduk untuk lebih rajin lagi membersihkan daun-daun yang berjatuhan pada musim gugur. Bagaiman fenomena musim gugur dapat menyebabkan daun-daun dari pepohonan berjatuhan ?</p>
<br>
<p><a href="#"> <h6 class="text-left">Selengkapnya</b> </h6></p>
</div>
</div>
</div>
</div>
</div>
<a class='left carousel-control' href='#myCarousel' data-slide='prev'>‹</a>
<a class='right carousel-control' href='#myCarousel' data-slide='next'>›</a>
</div>
</div>
</div>
</body>
</html>
Bagian yang menyatakan carousel-indicator (muncul tanda bulat) ditunjukkan oleh potongan kode berikut :
<ol class='carousel-indicators'>
<li data-target='#myCarousel' data-slide-to='0'></li>
<li data-target='#myCarousel' data-slide-to='1'></li>
<li data-target='#myCarousel' data-slide-to='2'></li>
</ol>Dalam tutorial ini, kita menggunakan tiga buah image, sehingga diperlukan
carousel-indicator sebanyak tiga buah dimulai dari data-slide-to='0' sampai dengan data-slide-to='2'. Jika anda menggunakan gambar lebih dari tiga, dibagian data-slide-to='nilai_berikutnya' juga harus disesuaikan.Bagian yang menunjukkan
carousel-control (muncul tanda < dan >) ditunjukkan oleh kode berikut:<a class='left carousel-control' href='#myCarousel' data-slide='prev'>‹</a>
<a class='right carousel-control' href='#myCarousel' data-slide='next'>›</a>