Tunggu Sebentar ...

Membuat Slideshow Banner Dengan Carousel Bootstrap

Ditulis oleh

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.

Ditumpuk didalam berkas : Catatan Belajar , Belajar lain-lain , Bootstrap
Yang berkomentar (8)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Membuat Slideshow Banner Dengan Carousel Bootstrap"

Fauzi
21-12-2013 09:30

bootstrap itu buat apaan sih, Bang?

Balas
Danni Moring
21-12-2013 09:39

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.

Balas
Fauzi
21-12-2013 10:41

framework... css... (?)
aduh,,,

Balas
Danni Moring
21-12-2013 11:00

iya..dia udah nyediain css nya..tinggal make aja sesuai aturannya..

Balas
Fauzi
21-12-2013 11:51

kalo makenya gampang... nanti kupelajari kalau ada waktu... (tapi kayaknya kok nggak, ya?)

Balas
Danni Moring
21-12-2013 12:04

ayo zart..coba aja hehehe...coba aja dulu nanti diupload hosting gratis

Balas
rijal
08-05-2014 02:12

klo untuk nambahin button prev dan next dibagian kiri dan kanannya bagaimana?

Balas
Danni Moring
08-05-2014 10:59

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>

Balas