Tunggu Sebentar ...
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.
bootstrap itu buat apaan sih, Bang?
Balasbootstrap 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.
Balasiya..dia udah nyediain css nya..tinggal make aja sesuai aturannya..
Balas
ayo zart..coba aja hehehe...coba aja dulu nanti diupload hosting gratis
klo untuk nambahin button prev dan next dibagian kiri dan kanannya bagaimana?
Balas
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>