Cara Membuat Slider CSS3 Murni (Tanpa Javascript)

Saya mencoba membuat slider baru dengan 3 buah gambar dari software tersebut.
Dari slider yang dihasilkan, saya mencari kode css inti yang menyebabkannya bisa menjadi
slider. Namun, karena di generate oleh sebuah software, kode css yang dihasilkan ternyata
sangat banyak (lebih dari 1000 baris). Padahal, cuma berisi 3 slide T_T. Dan itu tentu saja
membuat saya pusing.
Setelah lumayan lama mencari dan bereksperimen, dengan hati yang berbungabunga (lebay) akhirnya saya bisa mempersingkat 1000+ baris kode tersebut menjadi sekitar
100+ kode css untuk membuat sebuah slider yang berisi 3 slide. Itu pun sudah termasuk
CSS reset, styling, dan embel-embel lainnya. Kode intinya hanya sekitar 50 baris. Itupun
kebanyakan adalah looping untuk 3 slide tersebut.
Slide yang dihasilkan memang sederhana. Itu karena saya membuatnya untuk
dibagikan tutorial dan tekniknya pada posting ini. Agar mudah dipahami. Untuk style
selebihnya, anda bisa bereksperimen sendiri.
Sejujurnya, bagi anda yang terbiasa membuat slider dengan menggunakan library jquery,
teknik ini memang lebih ribet. Tidak se-otomatis pembuatan dengan jquery yang hanya
tinggal meng-konfigurasi saja. Teknik ini juga hanya work pada browser-browser modern.
Tidak support untuk browser IE 9 ke bawah. Jadi teknik ini hanya untuk digunakan pada
website-website modern yang penggunanya bukan orang-orang yang melek IT.
Namun, ada beberapa kelebihan dibalik kekurangan tersebut, terutama di sisi
developer. Silahkan baca dibawah.

1. Lebih ringan karena hanya membutuhkan tidak lebih dari 100 baris CSS. dan itu pun
kebanyakan hanya perulangan untuk tiap slide.
2. Lebih fleksibel untuk di modifikasi. Efek animasi apapun yang anda inginkan, anda bisa
membuatnya sendiri dengan mengintegrasikannya dengan CSS3 animation, atau library
animate.css. Untuk poin ini, di bagian kedua artikel ini saya akan membahas bagaimana
caranya mengintegrasikannya dengan animate.css.
3. Alternatif ketika anda dalam keadaan tidak bisa menggunakan library JS. Misalnya, untuk
siswa/mahasiswa yang mengikuti lomba/LKS, biasanya tidak diperbolehkan menggunakan
source apapun dari luar. Nah, anda bisa menggunakan teknik ini sebagai nilai tambah.

Penasaran dengan cara membuatnya? Yuuk, kita lihat kode-kode dibawah ini.

Html

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

CSS
/* CSS Resets */
*{
padding:0;
margin:0;
}
img {
max-width: 100%;
height: auto;
}
ul,ol {
list-style-type: none;
}
/* end css reset */.container { /* posisikan letak slidernya */

margin:10% auto;
position: relative;
overflow: hidden;
}
.container, ul.slide li img{
width:500px; /* Sesuaikan sendiri */
height: 300px; /* Sesuaikan sendiri */
}ul.slide {
position: absolute;
display: block;
width:300%; /* < Angka 3 Bergantung pada jumlah slide */
}.caption { /* styling untuk deskripsi setiap slide */
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom:0;
padding:10px;
color:#fff;
left: 0;
right: 0;
}/* Yang membuatnya jadi slider, alias kode intinya */
ul.slide li {
display: inline-block;
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
ox-sizing:border-box;
-webkit-transition: -webkit-transform 2000ms;
-moz-transition: -moz-transform 2000ms;
transition: -webkit-transform 2000ms, transform 2000ms;
}
ul.slide li.slide-1 {
left: 0%;
}
ul.slide li.slide-2 {
left: 100%;
}
ul.slide li.slide-3 {
left: 200%;
}
#nav-1:checked ~ ul.slide li{
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
transform: translateX(0%);
}
#nav-2:checked ~ ul.slide li{
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);

}
#nav-3:checked ~ ul.slide li {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
transform: translateX(-200%);
}
/* End, yang membuatnya jadi slider *//* Navigator */.radio-nav { /* menghilangkan radio
button */
display: none;
}/* styling untuk tombol next dan previous slide */
.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);
}
/* end styling untuk tombol next dan previous slide */
/* Ini termasuk kode inti. Setiap slide mempunya tombol prev dan next-nya masing-masing.
Nah, tampilkan tombol yang tepat dengan kode dibawah ini*/
#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;
}
/* end */
/* Navigator */

Jika anda memperhatikan kode CSS di atas. Teknik yang digunakan untuk membuat
slider ini adalah dengan memanfaatkan input bertipe radio. Saat radio dengan id tertentu di
pilih, maka akan tampil slide tertentu. Berhubung ini adalah posting yang ditujukan untuk
orang yang sudah mengerti CSS dan HTML, saya tidak akan menjelaskan konsep kodenya
secara detail. Pusing merangkai katanya hehehe. Saya yakin, untuk kode sesedikit ini, tidak
sampai setengah jam juga sudah bisa mempraktikannya, jika ada kemauan untuk
memahami.

Membuat Slideshow Dengan CSS3: File HTML

Oke, langsung saja kita buat tag <div> dan kita beri class slidercontainer, dalam
tag <div> tersebut kita buat elemen div lagi dan kita beri class css3slider. Didalam
tag <div> class css3slider, kita berikan daftar gambar yang akan dibuat sebagai slideshow,
sehingga skrip kita seperti berikut:

<div id=slidercontainer>
<div id=css3slider>
<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/squaretailed-kite.jpg" alt="Square-tailed kite">
<img
src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/whitetailed-kite.jpg" alt="White-tailed kite">
<img
src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengancss3/hawk.jpg" alt="Hawk" title="Hawk">
<img
src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengancss3/osprey.jpg" alt="Osprey">
<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/squaretailed-kite.jpg" alt="Square-tailed kite">
</div>
</div>

Yang harus diperhatikan adalah bahwa semua ukuran gambar harus sama 768px x
341px, dan nantinya kita akan mengatur ukuran container sama dengan ukuran gambar.
Karena kita akan menggunakan eksternal CSS, maka kita harus melengkapi file HTML
diatas dengan Struktur Umum Halaman HTML, jika anda belum tahu apa itu Struktur Umum
Halaman HTML, silahkan anda membaca tutorial Pengenalan HTML: Struktur Umum Part 1.
Setelah kita melengkapinya, maka skrip akhir kita menjadi seperti dibawah ini:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id=slidercontainer>
<div id=css3slider>
<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/squaretailed-kite.jpg" alt="Square-tailed kite">
<img
src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/whitetailed-kite.jpg" alt="White-tailed kite">
<img
src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengancss3/hawk.jpg" alt="Hawk" title="Hawk">
<img
src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengancss3/osprey.jpg" alt="Osprey">
<img src="http://www.nyekrip.com/demo/cara-membuat-slideshow-dengan-css3/squaretailed-kite.jpg" alt="Square-tailed kite">
</div>
</div>
</body>
</html>

Oke, simpan file HTML diatas dengan nama Index.html. Perhatikan skrip diatas,
pada tag <link> kita telah menentukan untuk menggunakan file CSS Style.css dan letak
dari file tersebut satu folder sama file Index.html. Untuk gambar anda bisa mendownload
gambar tersebut didalam tutorial ini.

Membuat Slideshow Dengan CSS3: File CSS

Sekarang saatnya untuk membuat file CSS, pertama kita buka file Style.css dan ketikkan
skrip berikut ini:

Skrip CSS
body { background: #000; }
#slidercontainer {
position: relative;
overflow: hidden;
background: #000
}
#slidercontainer {
width: 768px;
height: 341px;
}
#css3slider img {
width: 768px;
height: 341px;
float: left;
}
#css3slider {
position: absolute;
width:3900px;
-webkit-animation-name:slider;
-webkit-animation-duration:15s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:slider;
-moz-animation-duration:15s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:infinite;
-o-animation-name:slider;
-o-animation-duration:15s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count:infinite;
animation-name:slider;
animation-duration:15s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}
Pada skrip CSS diatas, baris body untuk mengatur agar halaman web memiliki
background bewarna hitam.

Pada baris selanjutnya, yaitu baris #slidercontainer digunakan untuk mengatur agar
gambar tidak tampil semuanya secara horizontal, dan sekaligus untuk mengatur lebar dan
tinggi dari kontainer gambar. Perhatikan ukuran yang dibuat untuk kontainer, ukuran
tersebut persis dengan ukuran gambar yang akan dibuat slideshow.
Untuk baris selanjutnya, baris pada #css3slider berfungsi sebagai pengatur ukuran
lebar, kita tentukan nilai dari lebar menjadi 3900px, karena ukuran tersebut dapat
menampung seluruh ukuran lebar gambar. Pada baris tersebut, kita juga menentukan segala
atribut dan nilai dari animation, dalam animation tersebut nantinya kita akan atur agar
gambar kita dimunculkan secara bergantian. Teknik yang digunakan adalah teknik CSS3
keyframed animation.

Membuat CSS3 keyframed animation

Saatnya kita untuk membuat CSS3 keyframed animation, ketikkan skrip berikut ini
untuk menjalankan animation:

Skrip CSS
@-webkit-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}
@-moz-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }

24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0;}
100% { left: 0; opacity: 0; }
}
@-o-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
@keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -768px; opacity: 1; }
45% { left: -768px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -1536px; opacity: 1; }
70% { left: -1536px; opacity: 1; }
72% { opacity: 0; }

74% { opacity: 0; }
75% { left: -2304px; opacity: 1; }
95% { left: -2304px; opacity: 1; }
97% { left: -2304px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
Skrip Fitur Pause
Untuk memberikan fitur Pause, tambahkan skrip CSS dibawah ini:

Skrip CSS
#css3slider:hover {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused; }
}
#css3slider img {
float: right;
}
#slidercontainer:after {
content: "";
font-size: 150px;
position: absolute;
z-index: 12;
color: rgba(255,255,255, 0);
left: 300px; top: 80px;
-webkit-transition: 1s all ease-in-out;
-ms-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
}
#slidercontainer:hover:after {
color: rgba(255,255,255, 0.6);
}

Pada baris #css3slider:hover, isi dari skrip tersebut terdapat value paused yang
gunanya untuk memberhentikan animation secara sementara, yang mana akan dilakukan
ketika gambar disorot/hover.

10

Pada Baris #slidercontainer:after, dalam id ini kita tambahkan simbol jeda/pause.

Demikian tutorial Cara Membuat Slideshow Dengan CSS3, semoga bisa menambah
daya kreatifitas kita dalam berkarya. Dengan hanya mengandalkan CSS3 maka loading blog
akan terasa lebih cepat dibandingkan dengan menggunakan javascript, selain loading yang
cepat web kita juga terlihat lebih manis dengan adanya slideshow.

11