Membuat Slideshow Banner Dengan Carousel Bootstrap
Membuat slideshow banner dengan carousel bootstrap. Pada catatan ini saya menggunakan bootstrap versi 3.0.2. Kenapa saya buat banner versi slideshow nya? karena supaya bisa memuat beberapa banner iklan nya dalam satu tempat saja. Jadi tidak memakan tempat.
Hal pertama tentu harus mendownload bootstrap karena memang saya menggunakan bootstrap sebagai framework css nya dan sekaligus disediakan fasilitas script jquery yang mendukung nya. Dalam hal ini saya menggunakan carousel bawaan bootstrap sebagai slideshow nya.
Seperti ini kira-kira scriptnya
<div id="idbannernyaterserah" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#idbannernyaterserah" data-slide-to="0" class="active"></li>
<li data-target="#idbannernyaterserah" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="linknyataroksini" target="_blank"><img src="urlgambarnya"></a>
</div>
<div class="item">
<a href="linknyataroksini" target="_blank"><img src="urlgambarnya"></a>
</div>
</div>
</div>
Selengkapnya seperti ini
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<div id="idbannernyaterserah" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#idbannernyaterserah" data-slide-to="0" class="active"></li>
<li data-target="#idbannernyaterserah" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="linknyataroksini" target="_blank"><img src="urlgambarnya"></a>
</div>
<div class="item">
<a href="linknyataroksini" target="_blank"><img src="urlgambarnya"></a>
</div>
</div>
</div>
</body>
</html>
Contohnya lihat saja banner slide disamping kanan atas pada blog ini. Mungkin kurang lebihnya begitu catatan ini. Dari contoh diatas itu untuk 2 slide gambar dari banner nya.
Facebook 
Twitter
Google PlusKomentar untuk "Membuat Slideshow Banner Dengan Carousel Bootstrap"
Fauzi
bootstrap itu buat apaan sih, Bang?
BalasDanni Moring
bootstrap itu framework css zart, jd dia udah nyediain semuanya..misalnya untuk menu bar, nah tinggal kita nyusun menjadi suatu bentuk desain web yang diinginkan..lebih memudahkan gitu.
BalasDanni Moring
iya..dia udah nyediain css nya..tinggal make aja sesuai aturannya..
BalasDanni Moring
ayo zart..coba aja hehehe...coba aja dulu nanti diupload hosting gratis 
rijal
klo untuk nambahin button prev dan next dibagian kiri dan kanannya bagaimana?
BalasDanni Moring
sebenarnya di contoh dihalaman getbootstrapnya (http://getbootstrap.com/javascript/#carousel) udah ada contohnya mas, nah tambahkan saja seperti ini
<!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
Mau dapat tambahan dollar dengan kemampuan desainmu ? ayo salurkan bakat desainmu dengan mengupload desain yang kamu buat dan bisa menghasilkan pendapatanmu jika desain kamu laku terjual di produk teepublic. Klik disini untuk register. Semoga sukses ya
