Kostumisasi Fitur Twitter Bootstrap 3

(1)

(2)

-Episode Carousel / Slide

Oleh: Muhammad Fauzi

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

bisa meng-customize fitur-fitur twitter bootstrap sesuka kita sesuai dengan

selera. Tutorial kali ini saya akan mencoba meng-customize salah satu fitur

javascript dari twitter bootstrap, fitur tersebut ialah Carousel atau bisa

disebut Slide.

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 bisa meng-customize fitur-fitur twitter bootstrap sesuka kita sesuai dengan selera. Tutorial kali ini saya akan mencoba meng-customize salah satu fitur javascript dari twitter bootstrap, fitur tersebut ialah Carousel atau bisa disebut Slide.

Benar dan saya setuju 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 mudah kalau anda tau titik / hal penting yang ada dalam fitur tersebut. Mari kita lihat contoh kode dari situ getbootstrap.com untuk membuat slideshow di bawah ini

<div class="carousel-inner"> <div class="item active"> <img src="..." alt="...">

(3)

</div>

Atribut atau elemen yang harus dan penting ada dalam fitur carousel yang pertama adalah 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 memiliki nama / value yang sama, misalkan jika 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 acuan atau contoh hasilnya anda bisa lihat slide show yang ada di situs facebook disini https://developers.facebook.com/, Lihat gambaran slide di bawah ini

Ada 6 element yang saya tandai dalam gambar di atas, anda harus membuat terlebih dahulu layout nya seperti gambar di atas. Kemudian untuk layout nya tidak responsive.

(4)

<img alt="First active slide"

src="http://files.conceptcarz.com/img/Suzuki/suzuki-concept-kizashi-3-2008 -01-800.jpg" />

</div>

<img alt="Second slide"

src="http://www.wallsave.com/wallpapers/800x400/zl-camaro/65234/zl-camaro-chevrolet-carbon-concept-car-65234.jpg" />

</div>

<img alt="Third slide"

src="http://files.conceptcarz.com/img/Volvo/2009_Volvo_S60_Concept-Image-0 1-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 agar 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 seperti ini.

/*! lebar awal nanti bisa berubah */ .container {

(5)

width: 850px;

margin-right: auto; margin-left: auto; }

/*! menghapus resposive karena 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 bisa 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 memiliki grid system yang bisa anda

(6)

gunakan, untuk kasus ini saya pakai 2 kolom dengan sisi yang sama yaitu .col-xs-6 , karena .col-xs-6 memiliki 50% width (responsive) maka kita harus mengubahnya jadi tidak responsive yaitu menggantinya dengan "px" , setengah dari width .carousel-inner yaitu 400px.

Silahkan lihat disini kode 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 target kita indikator slide agak bawah maka kita tinggal mengurangi margin-bottom yang dimiliki class .carousel-indicators saja.

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

3. Element yang ketiga yaitu caption dengan 2 tulisan (besar dan kecil) bisa menggunakan

Typography Bootstrap, element keempat yaitu button bisa menggunakan Button Bootstrap dan element yang kelima yaitu image. Karena tiap slide posisi konten nya berbeda-beda maka ada penambahan tag+class dan ada penyesuaian kolom tiap slide sehingga kode html nya menjadi :

<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>

(7)

</div>

<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>

src="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yj/r/_ak7IVCpaxk.png" alt="" width="381" height="340"></div>

</div> </div>

<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>

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 {

(8)

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;

(9)

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

(10)

Kostumisasi Fitur Twitter Bootstrap 3 - Episode Carousel / Slide