#CSSTuts 2 : Bootstrap 3 Carousel Fade Animation

Beberapa dari kita sudah kenal dengan Bootstrap, atau dulu lebih dikenal dengan lengkap sebagai Twitter Bootstrap. Sebuah Front-end CSS Framework. Nah kita berbagi kisah cerita tentangnya, karena beberapa keunggulan yang dimiliki maka banyak dari pengembang web pake ini framework. Banyak fitur yang disediakan sama doi, mulai dari batang navigasi (baca: navigation bar) hingga ke carousel/slider.

Nah, carousel-nya bootstrap ini punya animasi sederhana pada umumnya. Yaitu sliding dari kanan ke kiri, atau bergeser, bergantian dengan slide item yang lain-nya. Beberapa orang pengen punya carousel yang animasinya random dan banyak macam, kadang hal itu bagus, tapi biasanya itu ngefek ke kinerja browser ketika halaman itu di load. Jadi berasa agak lemoot~

Tapi kita pengen ganti itu animasi, nah kita akan coba bikin animasi yang berbeda dari bawaannya bootstrap. Kita cobain buat carousel dengan animasi fading, ato memudar. Nek ga paham yang dimaksut sama kita berarti kita berhasil, karena tutor ini dibuat untuk membingungkan kalian =)) jadi kalo kalian masih kuat mental jangan terusin baca ini tutor. Ingat, jangan baca dan jangan percaya. Ini sepenuhnya fiktif belaka.

Untuk langkah awal, download Boostrap Repo dari Official Site nya di http://getbootstrap.com ato bisa langsung download di Bikin Theme Pake Bootstrap 3 itu ga Semudah Balikan Sama Mantan sekarang. Hanya download kalo kalian belom bikin theme-nya dengan bootstrap, kalo ga pake bootstrap mending di-udahin aja baca tutornya. Ini cuma buat kalian yang mbangun theme pake bootstrap dan gunain carousel-nya bootstrap.

Oke, sekarang akan kita jelasin dengan sebingung-bingungnya tahapan yang ga penting buat dilakuin untuk ngubah animasi sliding jadi fading.

Kita asumsikan kalo kalian udah bikin theme pake bootstrap, kalo belom tetep kita asumsikan kalian udah pake. Tapi kalo kalian tetep masih ngotot pengen tau caranya bangun theme dari bootstrap bisa langsung ke Bikin Theme Pake Bootstrap 3 itu ga Semudah Balikan Sama Mantan.

Cari file style.css kalian dan buka pake text editor, jangan dibuka pake photo viewer ya. Kita biasanya text editornya pake yang gratisan, kek semacam notepad++ gitu. Tapi ga jarang juga pake Sublime Text, kalo kalian belum tau Sublime Text itu apa dan seperti apa, kalian bisa baca artikel Sublime Text, Text Editor Super Bagi Pemalas. Ato bisa juga buat kalian yang orang kaya bisa coba text editor Notepad =))

Kita disini pakenya sublime, setelah kalian buka style.css nya kemudian akan kita tambahin beberapa kode css (cascading stylesheet). Nah lo, opo meneh Cascading Stylesheet itu? Udah deh, kalo kalian ga tau apa itu CSS atau Cascading Stylesheet mending jangan lanjutin, kita prihatin sama kalian. Tapi untuk sekedar info aja, kalo kalian penasaran apa itu CSS bisa langsung berkunjung ke CSS Itu Bumbu Alami Bikin Theme Beb! dan dijamin kalian tambah bingung =))

Copy dan Paste kode dibawah ini ke style.css kamu mamen lalu save.

/* CAROUSEL */
.carousel-inner .item{
    -webkit-transition: .7s ease-in-out opacity;
       -moz-transition: .7s ease-in-out opacity;
        -ms-transition: .7s ease-in-out opacity;
         -o-transition: .7s ease-in-out opacity;
            transition: .7s ease-in-out opacity;
    left: 0 !important;opacity:1;z-index:0;
}
.carousel .active.left, .carousel .active.right {opacity:0;z-index:1;}

Setelah sudah di save, kita coba ke browser. Seharusnya slider kalian jadi kaya contoh demo dibawah ini mamen 🙂 cobain ya, kalo ada yang ga bisa ato error di implementasian-nya jangan tanya ya =))

salam #CSSTuts 🙂 salam 4 sehat 5 #kode
#ksWebVolutionTuts