Assalamualaikum Wr. Wb.

Pagi Semua, pagi-pagi gak ada kerjaan dan sambil nunggu siang untuk kulian mending saya akan membagikan ilmu kepada semuanya tentang Cara Membuat Slide dengan CSS3 System yang sumbernya dari SIN1AJA. OKe langsung saja ke tahap-tahap cara membuatnya.

Css3 Slider System ini dibuat 7 efek:

Default ( yaitu efek opacity )
gerak-kiri
gerak-kanan
gerak-atas
gerak-bawah
muter
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
URL : http://sin1aja.blogspot.com/
*/
#slider-system {
padding:0;
width:550px;
height:300px;
margin:0 auto;
background:#98d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJdjtWyIcPAY0FlNqjIR_lgW3ICAAPILfwEZgP8nw-mlW5FqkYinTqqFvSQJEqWpMXWgo__bdXreshuPCPeujS8DSkHRcpxxKOKhJWMw9Mo-_OiM4Iea4o3KYXIwcNY-RSIq-oeFnayW0/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.

Related Post