Cara Membuat Slider dengan CSS3 Murni (Tanpa Javascript) – Part 2

Senin lalu, saya membahas tentang cara atau teknik baru membuat Slider dengan hanya menggunakan CSS3 murni. Pada posting tersebut, tutorial yang dibahas adalah tutorial yang paling sederhana dari CSS slider. Nah, kali ini saya akan membahas lagi seperti janji saya pada posting sebelumnya. Kali ini CSS slider yang dibuat akan diintegrasikan dengan “animate.css”.

CSS slider dengan animate.css

Jika anda belum mengenal apa itu animate.css, silahkan kenalan dulu di posting ini : Cara membuat animasi dengan animate.css.

Dengan mengintegrasikan CSS slider dengan efek animasi yang terdapat pada animate.css, slider yang dihasilkan akan semakin interaktif. Bahkan, bisa lebih keren daripada menggunakan library jquery/js. Pada tutorial ini, saya membuat 2 slider yang diintegrasikan dengan efek animasi di animate.css. Pada slider pertama, saya hanya menggunakan 1 efek animasi yang sama untuk tiap slide, yaitu efek fadeIn dan fadeOut. Sedangkan, pada slider kedua saya menggunakan efek yang berbeda-beda untuk tiap slide. Sehingga ada 3 jenis efek pada slider kedua ini.

Yap, langsung saja, berikut ini adalah kode HTML dan CSS-nya. Silahkan simak dan pahami.

<div class=”container”>

<input type=”radio” name=”slide” class=”radio-nav” id=”nav-1″ checked/>
<input type=”radio” name=”slide” class=”radio-nav” id=”nav-2″/>
<input type=”radio” name=”slide” class=”radio-nav” id=”nav-3″/>

<ul class=”slide”>
<li class=”slide-1″>
<img src=”images/1.jpg”/>
<div class=”caption”>Lorem Ipsum Dolor Sit Amet 1</div>
</li>
<li class=”slide-2″>
<img src=”images/2.jpg”/>
<div class=”caption”>Lorem Ipsum Dolor Sit Amet 2</div>
</li>
<li class=”slide-3″>
<img src=”images/3.jpg”/>
<div class=”caption”>Lorem Ipsum Dolor Sit Amet 3</div>
</li>
</ul>

<div class=”nav-arrow nav-next”>
<label class=”nav-1″ for=”nav-1″>></label>
<label class=”nav-2″ for=”nav-2″>></label>
<label class=”nav-3″ for=”nav-3″>></label>
</div>
<div class=”nav-arrow nav-prev”>
<label class=”nav-1″ for=”nav-1″><</label>
<label class=”nav-2″ for=”nav-2″><</label>
<label class=”nav-3″ for=”nav-3″><</label>
</div>

</div>

– Tiap kode dengan warna yang sama, tulisannya juga harus sama.
.container, ul.slide li img{
width:500px; /* Opsional */
height: 300px; /* Opsional */
}ul.slide {
display: block;
}.caption {
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom:0;
padding:10px;
color:#fff;
left: 0;
right: 0;
}
ul.slide li {
position: absolute;
top:0;
bottom:0;
right: 0;
left: 0;
opacity: 0;
}/* Navigator */.radio-nav {
display: none;
}
.nav-arrow {
position: absolute;
top:45%;
width:50px;
height: 50px;
}
.nav-next {
right:10px;
}
.nav-prev {
left:10px;
}
.nav-arrow label {
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
background-color: rgba(0,0,0,0.3);
color: #fff;
border-radius: 50%;
display: block;
position: absolute;
padding:15px 20px;
cursor: pointer;
z-index: 1;
opacity: 0;
font-weight: bold;
line-height: 1;
}
.container:hover .nav-arrow label{
background-color: rgba(0,0,0,0.7);
}#nav-1:checked ~ .nav-prev label.nav-3,
#nav-1:checked ~ .nav-next label.nav-2,
#nav-2:checked ~ .nav-prev label.nav-1,
#nav-2:checked ~ .nav-next label.nav-3,
#nav-3:checked ~ .nav-prev label.nav-2,
#nav-3:checked ~ .nav-next label.nav-1 {
z-index: 2;
opacity: 1;
}/* Navigator */
Kode merah : Mengatur arah tombol next dan previous pada slide yang dipilih.
/* Yang membuatnya jadi slider */
ul.slide li {
-webkit-animation:fadeOut 1s; /* Efek slide keluar */
}
#nav-1:checked ~ ul.slide li.slide-1,
#nav-2:checked ~ ul.slide li.slide-2,
#nav-3:checked ~ ul.slide li.slide-3 {
-webkit-animation:fadeIn 1s; /* Efek slide masuk */
opacity: 1;
}
/* End, yang membuatnya jadi slider */
– Kode inti untuk slider dengan 1 efek
– Efek slide keluar dan efek slide masuk sebaiknya berlawanan agar terlihat lebih menarik. Anda bisa mengubah setiap efek sesuai kebutuhan anda. Daftar efek animasi ada disini : animate.css
/* Yang membuatnya jadi slider */
#nav-1:checked ~ ul.slide li.slide-1,
#nav-2:checked ~ ul.slide li.slide-2,
#nav-3:checked ~ ul.slide li.slide-3 {
opacity: 1; /* menampilkan slide yang terpilih*/
}/* Efek Slide 1 */
ul.slide li.slide-1 {
-webkit-animation:fadeOutUp 1s; /* Efek slide keluar*/
-moz-animation:fadeOutUp 1s; /* Efek slide keluar*/
animation:fadeOutUp 1s; /* Efek slide keluar*/
}
#nav-1:checked ~ ul.slide li.slide-1 {
-webkit-animation:fadeInDown 1s; /* Efek slide masuk*/
-moz-animation:fadeInDown 1s; /* Efek slide masuk*/
animation:fadeInDown 1s; /* Efek slide masuk*/
}/* Efek Slide 2 */
ul.slide li.slide-2 {
-webkit-animation:fadeOutRight 1s; /* Efek slide keluar*/
-moz-animation:fadeOutRight 1s; /* Efek slide keluar*/
animation:fadeOutRight 1s; /* Efek slide keluar*/
}
#nav-2:checked ~ ul.slide li.slide-2 {
-webkit-animation:fadeInLeft 1s; /* Efek slide masuk*/
-moz-animation:fadeInLeft 1s; /* Efek slide masuk*/
animation:fadeInLeft 1s; /* Efek slide masuk*/
}/* Efek Slide 3 */
ul.slide li.slide-3 {
-webkit-animation:fadeOutLeft 1s; /* Efek slide keluar*/
-moz-animation:fadeOutLeft 1s; /* Efek slide keluar*/
animation:fadeOutLeft 1s; /* Efek slide keluar*/
}
#nav-3:checked ~ ul.slide li.slide-3 {
-webkit-animation:fadeInRight 1s; /* Efek slide masuk*/
-moz-animation:fadeInRight 1s; /* Efek slide masuk*/
animation:fadeInRight 1s; /* Efek slide masuk*/
}/* End, yang membuatnya jadi slider */
– Kode inti untuk slider dengan berbagai efek
– Efek slide keluar dan efek slide masuk sebaiknya berlawanan agar terlihat lebih menarik. Anda bisa mengubah setiap efek sesuai keinginan anda. Daftar efek animasi ada disini : animate.css

Tertarik?

Dari trik di atas, saya -atau mungkin anda juga- menyadari bahwa dari teknik CSS slider ini bisa dikembangkan lebih jauh lagi. Apalagi, jika anda sudah melihat style-style slider dari CSSslider.com, anda pasti akan lebih tertarik lagi mengeksplorasi trik-trik untuk style slider yang lain. Di CSSslider.com, slider yang digenerate oleh softwarenya bisa menghasilkan puluhan slider dengan berbagai skin dan efek yang keren.

Sejujurnya, 2 slider yang saya buat di posting bagian 1 dan 2 ini, saya kira masih belum layak pakai karena belum terdokumentasi dan terstruktur dengan baik. 2 slider ini hanya bisa dipakai oleh orang yang benar-benar mengerti css juga. Posting ini dan posting sebelumnya hanya menjelaskan trik dasarnya saja. Selanjutnya, mungkin ada mastah yang mau membantu mengembangkannya juga? sehingga bisa menjadi library css yang bisa dipakai oleh umum dan terdokumentasi dengan baik. Amin.

Bagaimana menurut anda ? Sekian, Semoga bermanfaat.

~Muhammad Syakirurohman~

10 Comments

  1. Boleh nih sob ane praktekin di blog, tapi kalau pasang slider loading blog jadi berat ga sih?

  2. kalu gambar nya otomatis brtukar gmana cra ny mas ?

  3. wah keren gan sambil gerak..

    semoga baik lagi

  4. kalo yg auto gmn gan? ga pakai navbar?

    pemula css3 nih mau nyoba” hahaha

  5. (~) ITU selector APA ya ?

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *