Untuk mempercantik tampilan situs juga untuk menarik perhatian pengunjung situs dibuatlah banner. Banner bisa berisi fitur unggulan situs (produk) atau bisa juga info promo yang sedang gencar disosialisasikan. Banner biasanya statis hanya satu gambar. Apabila ada banyak banner yang ingin ditampilkan di satu tempat maka dijadikanlah slide banner.
Bagi yang menggunakan CMS misalnya Wordpress, tentu sudah teredia banyak pilihan plugin slide banner yang bisa diambil. Namun bagi yang membangun situs dengan mengkoding dari awal, fitur yang ada di Bootstrap bisa jadi salah satu soluli. Ya, Bootstrap menyediakan fitur Carousel, yang bisa dimanfaatkan untuk membuat slide banner.
Pengantar dirasa sudah cukup. Tanpa banyak ba-bi-bu berikut ini adalah skrip membuat slider banner dengan Caraosel Bootstrap. Ganti alamat image dengan yang alamat yang kamu gunakan.
Image SLider dengan Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>SlideShow Example http://dezulblog.blogspot.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Slideshow dengan Bootstrap</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarausel" data-slide-to="0" class="active"></li>
<li data-target="#myCarausel" data-slide-to="1"></li>
<li data-target="#myCarausel" data-slide-to="2"></li>
<li data-target="#myCarausel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/header-1.jpg">
</div>
<div class="item">
<img src="img/header-2.jpg">
</div>
<div class="item">
<img src="img/header-3.jpg">
</div>
<div class="item">
<img src="img/header-4.jpg">
</div>
</div>
<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>
</body>
</html>
Download Kode
EmoticonEmoticon