My Css3 Slider System

Hemmmm kali ini saya mau berbagi hasil kreasiQ yang aku beri nama Css3 Slider System karena slider ini aku buat dari banyak kode CSS3. Setelah aku membaca cara kerja Slider Tanpa Loncatan Hompimpa walau mengertinya sedikit belum banyak akhirnya saya buat Css3 Slider System ini, namun yang saya buat ini sedikit berbeda karena gak mungkin kita berkreasi dengan ide yang sama, nah pada Css3 Slider System ini saya membuat 7 efek:

1. Default ( yaitu efek opacity )
2. gerak-kiri
3. gerak-kanan
4. gerak-atas
5. gerak-bawah
6. muter
7. miring

Css3 Slider System ini akan sempurna anda lihat jika browser anda mendukung efek transition jika browser anda tidak mendukung efek transition maka slider ini tidak akan terlihat sempurna, karena perpindahan gambarnya menggunakan efek transition. tapi slider ini tetep bekerja di browser yang tidak support transition cuman efeknya saja yang tidak ada hehehe. langsung saja deh cek demonya :P

DEMO

Setelah anda lihat demonya klik Deh tuh Navigasinya untuk melihat efeknya, dekripsinya juga aku kasi efek muncul dari bawah biar lebih gimana gitu. emm dan di bawah ini source kodenya.

1. Masukan css di bawah ini di atas kode ]]></b:skin>

/* Name: Css3 Slider System
   BY  : System of blog ( ZTO )
   URL : http://zhinto.blogspot.com/
*/
#slider-system {
 padding:0;
 width:550px;
 height:300px;
 margin:0 auto;
 background:#98d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2lREUf0OjFaNdu-L4BCirBWqwC4odWWHqumnZZJDwGSFE0LzVVtJ5PSe0_rg8_2sUG6mw8u8ltnU7itM4Jwa5SKuTDSr3ecnD_QKGvQCKUQqHAVNBH-0aTAP3ySXdKL248ykQyklDflw/s1600/bg.jpg)no-repeat center;
 position:relative;
 border:4px solid #76C017;
 overflow:hidden;
}
#slider-system .gambar {
 padding:0;
 margin:0 auto;
}
#slider-system .gambar input {
 display:none;
}
#slider-system .gambar li {
 list-style-type:none;
 margin:0;
 padding:0;
}
#slider-system .gambar img {
 width:100%;
 height:100%;
 position:absolute;
 -moz-transition:all 900ms linear;
 -o-transition:all 900ms linear;
 -webkit-transition:all 900ms linear;
 transition:all 900ms linear;
 opacity:0;
 visibility:hidden;
}
#slider-system input:checked ~ img,
#slider-system input:checked ~ img#gerak-kiri,
#slider-system input:checked ~ img#gerak-bawah,
#slider-system input:checked ~ img#gerak-atas,
#slider-system input:checked ~ img#muter,
#slider-system input:checked ~ img#gerak-kanan,
#slider-system input:checked ~ img#miring {
 -moz-transform:rotate(0deg) scale(1);
 -ms-transform:rotate(0deg) scale(1);
 -o-transform:rotate(0deg) scale(1);
 -webkit-transform:rotate(0deg) scale(1);
 transform:rotate(0deg) scale(1);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 top:0 !important;
 left:0;
 right:0;
 visibility:visible;
}
#slider-system .nav {
 padding:2px;
 background:rgba(0,0,0,0.5);
 color:#09f;
 text-decoration:none;
 margin:0;
 position:absolute;
 top:0;
 left:0;
 right:0;
}
#slider-system label {
 padding:1px 10px;
 background:#8DBB15;
 color:#FFF;
 font:bold 12px/20px Arial,sans-serif;
 text-decoration:none;
 margin:1px 4px 1px 0;
 display:inline-block;
 cursor:pointer;
 position:relative;
}
#slider-system .gambar li .deskripsi {
 position:absolute;
 padding:5px;
 background:rgba(0,0,0,0.8);
 color:#88F325;
 left:0;
 right:0;
 bottom:-1000px;
 font:normal 13px/20px Arial,sans-serif;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
 opacity:0;
 -moz-transition:all 1s ease-in-out;
 -o-transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
 transition:all 1s ease-in-out;
}
#slider-system input:checked ~ .deskripsi {
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 bottom:0;
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider-system .gambar li .deskripsi a,
#slider-system .gambar li .deskripsi a:visited {
 color:#ff0;
 text-decoration:none;
}
#slider-system .gambar img#gerak-kiri,
#slider-system .gambar img#gerak-kanan,
#slider-system .gambar img#gerak-bawah,
#slider-system .gambar img#gerak-atas,
#slider-system .gambar img#muter,
#slider-system .gambar img#miring {
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider-system .gambar img#gerak-kiri {
 left:-100%;
}
#slider-system .gambar img#gerak-kanan {
 left:100%;
}
#slider-system .gambar img#gerak-bawah {
 top:100%
}
#slider-system .gambar img#gerak-atas {
 top:-100%
}
#slider-system .gambar img#muter {
 -moz-transform:rotate(1230deg) scale(0);
 -ms-transform:rotate(1230deg) scale(0);
 -o-transform:rotate(1230deg) scale(0);
 -webkit-transform:rotate(1230deg) scale(0);
 transform:rotate(1230deg) scale(0);
}
#slider-system .gambar img#miring {
 opacity:0;
 -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
}

2. Masukan kode HTML nya di bawah ini didalam Gadget HTML/Javascript

<div id="slider-system">
<div class="gambar">
<li><input checked="true" id="a" name="system" type="radio" />
<img id="gerak-kiri" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="gerak-kanan" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 2</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="gerak-atas" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 3</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="gerak-bawah" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 4</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="muter" src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 5</div>
</li>
<li><input id="f" name="system" type="radio" />
<img id="miring" src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 6</div>
</li>
<li><input id="g" name="system" type="radio" />
<img src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 7</div>
</li>
</div><!--Penutup .gambar-->
<div class='nav'>
<label for='a'>1</label>
<label for='b'>2</label>
<label for='c'>3</label>
<label for='d'>4</label>
<label for='e'>5</label>
<label for='f'>6</label>
<label for='g'>7</label>
</div><!--Penutup .nav-->
</div><!--Penutup #slider-system-->

Jika anda ingin menambah jumlah gambarnya anda tinggal menambah kode seperti ini

<li><input id="a" name="num" type="radio" />
<img id="gerak-kiri" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>

Tapi harus anda rubah nilai a pada id="a" agar tak ada kesamaan id jangan lupa juga untuk menambahkan html navigasinya yaitu label yang seperti ini.

<label for='a'>1</label>

Perhatikan nilai a pada for='a' nilai a harus sama dengan id yang ada pada pada html input jadi setiap anda menambah gambarnya anda harus perhatikan nilai kode - kode tersebut. sekarang perhatikan pada id="gerak-kiri" dst.. pada kode HTML itu adalah efeknya jadi jika anda ingin menambahkan gambar lalu ingin memberi efek miring maka anda tinggal tambah kode htmlnya seperti saya jelaskan di atas dan ganti nilai id nya dengan nilai miring anda bisa lihat kodenya di Daftar Efek jika anda ingin gunakan efek default yaitu opacity anda tidak perlu menambahkan id pada kode HTML gambarnya jadi kodenya seperti biasa saja contohnya begini.

<li><input id="a" name="num" type="radio" />
<img src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>

Begitu kodenya jadi tidak ada id didalamnya, slider ini juga gak loncat-loncat kayak kodok :D. jika anda bingung langsung saja bertanya.