Slide Image Full CSS3 tanpa JS dan JQuery

Membuat slide image biasanya memerlukan script yang banyak dan rumit, kita juga tidak bisa menaruhnya langsung di blog kita karena akan menghambat akses blog yang lambat, jadi biasanya harus menggunakan pihak kedua untuk menyimpan file JS tersebut. Untuk kali ini saya coba membuat sebuah slide image dengan CSS3 tanpa java script dan JQuery .

Slide image CSS3 ini sangat simple dan mudah di gunakan, saya menambahkan sedikit shadow pada bagian background utamanya dan link slide mode page number untuk melihat gambar selanjutnya. sebenarnya slide image ini cara kerjanya hampir sama dengan pagination atau page number yang mengalihkan link ke page berikutnya. untuk lebih jelas silahkan lihat demo di link bawah ini.

Lihat DEMO

Untuk membuat slide image dengan css3 caranya cukup simple.
Lihat caranya di bawah ini.
Pertama tambah Widget > Pilih HTML/JavaScript di blog anda dan Copy kode di bawah ini.

<style>
#images {
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
width: 720px;
height: 400px;
overflow: hidden;
position: relative;}

#images img {
background:#ccc;
width: 720px;
height: 400px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;

transition: all linear 500ms;

-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;}

#images img:target {
left: 0;
z-index: 9;
opacity: 1;}

#images img:first-child {
left: 0;
opacity: 1;}

#slider {
widht:720px;
float:left;
text-decoration: none;
background: ;
padding: 8px 10px;
color: #222;}

#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 8px 10px;
color: #222;}

#slider a:hover {
background: #C6E4F2;}

</style>


<div id="images">
<a href="http://wallpaper4xp.blogspot.com/2010/07/3d-graphics-graffiti.html"> <img id="image1" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEl41-OaS4I/AAAAAAAAB_Y/5vUu7hu43g0/s400/3D+graphics+Graffiti.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/07/girls-field-on-bicycle.html"> <img id="image2" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEP0seDCLoI/AAAAAAAAB7Q/gL_03zLKXyM/s400/Girl+field+bicycle.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/music-box.html"> <img id="image3" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIxELRCiAZI/AAAAAAAACPI/AoL6c1jJMNk/s400/music+Box.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/glamor-rock-sensation.html"> <img id="image4" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIXotYo5PGI/AAAAAAAACM4/vJUlKZmQvfY/s400/VAIN+Glam+rock+Wallpaper.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/06/fire-custom-chopper-motorcycle.html"><img id="image5" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TCljHSoRohI/AAAAAAAAByU/qwSeFjGd8sg/s400/Black+Fire+Custom.jpg" /></a></div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
</div>


Ganti kode warna biru dengan alamat link yang ditargetkan sesuai gambar anda, ganti juga kode warna hijau dengan kode gambar milik anda.

Anda juga bisa mengcustom ukuran lebar dan tinggi yang diinginkan pada kode css diatas. cukup mudah bukan selamat mencoba.

Komentar

Belantara Indonesia mengatakan…
semoga ndak bikin berat ya brad...
Anton Wijaya mengatakan…
Wah ilmu baru lagi neh,kapan-kapan tak cobain.
Chugy mengatakan…
B.I :: Kalau slide image ini tidak memberatkan blog yang bikin berat mungkin image yg ditampilkan ukurannya besar atau tidak...!!!

Anton Wijaya :: OK silahkan di coba kapan2 sesuai mood nya. wekwekwek...!!!
ReBorn mengatakan…
ghehehe, template gue yang baru make beginian. lumayan nih buat ngotakngatiknya. thx.
fb mengatakan…
Tapa javasript dan jsquery kok bisa ya.. Baru tahu sob.. lsg coba ah..
indotop mengatakan…
Thanks sob sudah dicoba di indonesiatop.blogspot.com.
BTW Kalau pakai text gimana ya
Chugy mengatakan…
indotop :: Kalau untuk text silahkan di atur paddingnya supaya tidak mepet pada bagian kotak slidenya...silahkan berekplorasi lagi.
Rawins mengatakan…
wah seep banget neh. tar kalo merapi dah tenang aku cobain deh. ijin bookmark dulu bro...
DESY SHARE mengatakan…
info bagus kawan
sayang aku belum begitu pahan mengenai CSS3

salam kenal aja ya
sekalian follow
terima kasih sebelumnya
Tip Trik Blogger mengatakan…
wah mantap gan infonya
tak simpan dulu ya
genial mengatakan…
dulu pernah coba pake.. hhmm.. jd pingin nyoba lagi nii :(
Urang Lembur mengatakan…
Hasilnya keren juga sob, tapi ada sedikit pertanyaan nich, apakah dengan menggunakan widget slide image kaya gini akan memperlambat loading blog ga..??
Rizkyzone mengatakan…
kok ga ad demonya sob, ok deh gpp tp aq coba test dulu di blog perobaan q
Chugy mengatakan…
Urang Lembur :: Kalau slide ini tidak memberatkan SOB silahkan di tester kalau ternyata berat tinggal di hapus saa ...

Rizky2009 :: Masa ga ada BRAD saya pasang di blog Wallpaper4xp di bagian paling atas. coba klit tombol demonya...!!!
seMut mengatakan…
Salam kenal sob, mantap ni triknya saya bookmark ya sob, kpn2 saya coba
Muhammad Chandra mengatakan…
ini dia yang saya cari-cari dari kmnren di google tapi gak ketemu-ketemua . Terimkasih banyak yaa sob !!
rencananya ini mau saya gunain utk gallery foto di blog ^_^
Unknown mengatakan…
salam sahabat
mantap kawan tanpa js tentunya tdk bikin berat load
Dyla Outlet mengatakan…
Salam Kenal, saya tertarik dengan label DG,Fl,BL,IK,DW,WP..
Bila berkenan tolong ajarin dong tutornya :D
--> dylaoutlet@gmail.com
Saya psti sgt brtrma kasih. :D
Chugy mengatakan…
Dyla Outlet :: Untuk navigasi seperti disebutkan pernah saya posting, mungkin bisa dilihat pada postingan circle navigasi, prinsipnya sama saya cuma menambahkan gradient dan outline yang rada tebal.

silahkan dicoba trimakasih.
Teras Info mengatakan…
wah...mantabs ni kawan....
saya ijin save dulu deh......
sekalian saya pelajari dulu..he..he.....
terimakasih banyak...
Ladida mengatakan…
CSS memang canggih . ,

nice tutorial . ,
kickymaulana mengatakan…
mas, biar bisa jalan sendiri gambar nya gimana mas caranya?
makara mengatakan…
wahh mantap kk..
bisa mempercepat loading nih keknya, soalnya tuh gak perlu nge load js lagi.. :D

nice gan!!

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text