Kostumisasi Fitur Twitter Bootstrap 3 – Episode Carousel / Slide

15 views

Seperti yang kita ketahui twitter bootstrap menyediakan beberapa fitur javascript dan user tinggal menggunakannya, akan tetapi fitur-fitur tersebut masih monoton (menurut saya). Agar tidak terlihat monoton kita dapat meng-customize fitur-fitur twitter bootstrap sesuka kita sesuai dengan selera. Tutorial kali ini aku akan mencoba meng-customize salah satu fitur javascript dari twitter bootstrap, fitur tersebut ialah Carousel atau dapat disebut Slide.

Benar dan aku oke apa yang ditulis oleh saudara Arinadi dalam tutorial nya yang berjudul  [SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 dan tentunya meng-customize fitur tersebut juga sangat gampang kalau anda tau titik / hal penting yang ada dalam fitur tersebut. Mari kita lihat contoh aba-aba dari situ getbootstrap.com untuk menciptakan slideshow di bawah ini

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <!-- Indicators -->  <ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li>  </ol>  <!-- Wrapper for slides -->  <div class="carousel-inner"><div class="item active">  <img src="..." alt="...">  <div class="carousel-caption">...  </div></div><div class="item">  <img src="..." alt="...">  <div class="carousel-caption">...  </div></div>...  </div>  <!-- Controls -->  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>  </a></div>

Atribut atau elemen yang harus dan penting ada dalam fitur carousel yang pertama yakni attribute id="...." pada line pertama, attribute data-target="..." dan data-slide-to="..." pada tag li Jika salah satu atau dua atau ketiga attribute tersebut tidak ada maka carousel tidak akan bekerja, yang kedua untuk attribute id="...." dan attribute data-target="..." harus mempunyai nama / value yang sama, misalkan kalau id="nama-target" maka untuk attribute data-target tinggal ditambah hastag (#) data-target="#nama-target">

Setelah kita tau element penting dalam fitur carousel twitter bootstrap 3 selanjutnya kita akan mulai meng-customize nya. Sebagai pola atau contoh akibatnya anda dapat lihat slide show yang ada di situs facebook disini https://developers.facebook.com/, Lihat citra slide di bawah ini

Ada 6 element yang aku tandai dalam gambar di atas, anda harus menciptakan terlebih dahulu layout nya menyerupai gambar di atas. Kemudian untuk layout nya tidak responsive.

Untuk HTML awal aku mempunyai aba-aba menyerupai ini

<div class="container"><div class="row"><div class="carousel slide" id="carousel-example-generic"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1" class=""></li><li data-target="#carousel-example-generic" data-slide-to="2" class=""></li></ol><div class="carousel-inner"><div class="item active"><img alt="First active slide" src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg" /></div><div class="item"><img alt="Second slide" src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" /></div><div class="item"><img alt="Third slide" src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg" /></div></div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">  <span class="glyphicon glyphicon-chevron-right"></span></a></div></div></div>

1. Element pertama (no.1) yaitu control/button prev dan next sebelah kiri dan kanan konten slide, anda tidak perlu menambahkan element lain untuk hal ini, anda hanya perlu mereplace atau menambahkan style biar style default bawaan bootstrap tertimpa dengan style buatan anda. Bila kita lihat class untuk control prev (left) yaitu .carousel-control.left dan untuk control next (right) yaitu .carousel-control.right (cek disini) berdasarkan class yang ada maka untuk css nya menyerupai ini.

/*! lebar awal nanti dapat berubah */.container {width: 850px;margin-right: auto;margin-left: auto;}/*! menghapus resposive alasannya yakni default nya 100% */.carousel-inner {width: 800px;margin-right: 25px;margin-left: 25px;}/*! control left dan right */.carousel-control.left {margin-left:-40px;background: #747576;background-size: 8px 8px;border: 1px solid #bbb;border-color: #747576;-webkit-border-radius: 50%;height: 50px;margin-top: -25px;position: absolute;top: 50%;width: 50px;display:none;}.carousel-control.right {margin-right:-40px;background: #747576;background-size: 8px 8px;border: 1px solid #bbb;border-color: #747576;-webkit-border-radius: 50%;height: 50px;margin-top: -25px;position: absolute;top: 50%;width: 50px;display:none;}.carousel:hover .carousel-control.left, .carousel:hover .carousel-control.right {display:block;}

 Hasilnya dapat dilihat disini Demo Part 1

2. Element yang kedua (no. 2) mempunyai 2 kolom di dalamnya, kolom kiri diisi oleh caption dan button, dan kolom kanan diisi oleh image, twitter bootstrap mempunyai grid system yang dapat anda gunakan, untuk kasus ini aku pakai 2 kolom dengan sisi yang sama yaitu .col-xs-6 , alasannya yakni .col-xs-6 mempunyai 50% width (responsive) maka kita harus mengubahnya jadi tidak responsive yaitu menggantinya dengan “px” , setengah dari width .carousel-inner yaitu 400px.

Silahkan lihat disini aba-aba html dan css nya http://jsfiddle.net/fauzi/tcwSU/1/ dan untuk Demo Part 2

Jika anda ingin menambah lebar dan mengurangi tinggi carousel hal yang harus diperhatikan adalah

  • Jika ingin menambah lebar class .carousel width ditambah 100px menjadi 950px, maka untuk width class .carousel-inner juga ditambah 100px menjadi 900px dan untuk class width .col-xs-6 setengah dari width class .carousel-inner atau 900px dibagi 2 yaitu 450px
  • Jika ingin mengurangi tinggi class .carousel-innemenjadi 340px, maka untuk .slide-1, .slide-2, .slide-3 height/ tingginya menjadi 340px.

Oya untuk element keenam (no.6) indikator slide default bootstrap terlalu ke atas, sedangkan sasaran kita indikator slide agak bawah maka kita tinggal mengurangi margin-bottom yang dimiliki class .carousel-indicators saja.

Silahkan lihat disini aba-aba html dan css nya http://jsfiddle.net/fauzi/tcwSU/2/ dan untuk Demo Part 3

3. Element yang ketiga yaitu caption dengan 2 goresan pena (besar dan kecil) dapat memakai Typography Bootstrap, element keempat yaitu button dapat memakai Button Bootstrap dan element yang kelima yaitu image. Karena tiap slide posisi konten nya berbeda-beda maka ada penambahan tag+class dan ada pembiasaan kolom tiap slide sehingga aba-aba html nya menjadi :

<div class="container"><div class="row"><div class="carousel slide" id="carousel-example-generic"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1" class=""></li><li data-target="#carousel-example-generic" data-slide-to="2" class=""></li></ol><div class="carousel-inner"><div class="item active"><div class="row slide-1"><div class="col-xs-5"><div class="slide-caption left">  <h1>Facebook Login</h1>  <h4>Control what you share</h4>  <button type="button" class="btn btn-primary btn-lg">Learn More</button></div></div><div class="col-xs-7"><img src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yi/r/rCltFePAyDy.png" alt="" width="465" height="340" /></div></div></div><div class="item"><div class="row slide-2"> <div class="col-xs-6"> <div class="slide-caption center">  <img class="img" src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yc/r/0d1OWLCitvz.png" alt="" width="340" height="73"><h4>Mobile linking made simple</h4>  <button type="button" class="btn btn-primary btn-lg">applinks.org</button>  </div> </div> <div class="col-xs-6"><img src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yj/r/_ak7IVCpaxk.png" alt="" width="381" height="340"></div></div></div><div class="item"><div class="row slide-3"> <div class="col-xs-6"> <div class="slide-caption left">  <h1>Audience Network</h1>  <h4>Monetize your app with Facebook ads</h4>  <button type="button" class="btn btn-primary btn-lg">Get Started</button>  </div> </div> <div class="col-xs-6"><img src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/ym/r/ysHuW60Y0-p.png" alt="" width="924" height="340" style="margin-left:-474px;" /></div></div></div></div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">  <span class="glyphicon glyphicon-chevron-right"></span></a></div></div></div>

dan untuk css nya :

html, body { background-color:#e9eaed;}.carousel {width: 950px;margin-right: auto;margin-left: auto;}.carousel-inner {width: 900px;height: 340px;margin-right: 25px;margin-left: 25px;}.carousel-control.left {margin-left:-40px;background: #747576;background-size: 8px 8px;border: 1px solid #bbb;border-color: #747576;-webkit-border-radius: 50%;height: 50px;margin-top: -25px;position: absolute;top: 50%;width: 50px;display:none;}.carousel-control.right {margin-right:-40px;background: #747576;background-size: 8px 8px;border: 1px solid #bbb;border-color: #747576;-webkit-border-radius: 50%;height: 50px;margin-top: -25px;position: absolute;top: 50%;width: 50px;display:none;}.carousel:hover .carousel-control.left, .carousel:hover .carousel-control.right {display:block;}.carousel-indicators {bottom: 0px;}.carousel-indicators li {background-color: #747576;opacity: .5;border:none;}.carousel-indicators .active {width: 10px;height: 10px;margin: 1px;background-color: #747576;opacity: 1;}.carousel.col-xs-5 {width:400px;}.carousel.col-xs-6 { width:450px;}.carousel.col-xs-7 {width:500px;}.slide-1 {height:340px;background: #fff;}.slide-2 {height:340px;background: #31aadc;}.slide-3 {height:340px;}.slide-caption.left{left: 32px;line-height: 32px;position: relative;top: 84px;z-index: 1;}.slide-caption.center {text-align: center;top: 60px;position: relative;}.slide-caption .btn { border-radius:3px; }

Untuk demo :

Link Demo Akhir

Selamat mencoba

Author: 
    author
    No related post!