Advertise

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.

25 komentar:

  1. Wah ilmu baru lagi neh,kapan-kapan tak cobain.

    BalasHapus
  2. 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...!!!

    BalasHapus
  3. ghehehe, template gue yang baru make beginian. lumayan nih buat ngotakngatiknya. thx.

    BalasHapus
  4. Tapa javasript dan jsquery kok bisa ya.. Baru tahu sob.. lsg coba ah..

    BalasHapus
  5. Thanks sob sudah dicoba di indonesiatop.blogspot.com.
    BTW Kalau pakai text gimana ya

    BalasHapus
  6. indotop :: Kalau untuk text silahkan di atur paddingnya supaya tidak mepet pada bagian kotak slidenya...silahkan berekplorasi lagi.

    BalasHapus
  7. wah seep banget neh. tar kalo merapi dah tenang aku cobain deh. ijin bookmark dulu bro...

    BalasHapus
  8. info bagus kawan
    sayang aku belum begitu pahan mengenai CSS3

    salam kenal aja ya
    sekalian follow
    terima kasih sebelumnya

    BalasHapus
  9. wah mantap gan infonya
    tak simpan dulu ya

    BalasHapus
  10. dulu pernah coba pake.. hhmm.. jd pingin nyoba lagi nii :(

    BalasHapus
  11. Hasilnya keren juga sob, tapi ada sedikit pertanyaan nich, apakah dengan menggunakan widget slide image kaya gini akan memperlambat loading blog ga..??

    BalasHapus
  12. kok ga ad demonya sob, ok deh gpp tp aq coba test dulu di blog perobaan q

    BalasHapus
  13. 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...!!!

    BalasHapus
  14. Salam kenal sob, mantap ni triknya saya bookmark ya sob, kpn2 saya coba

    BalasHapus
  15. 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 ^_^

    BalasHapus
  16. salam sahabat
    mantap kawan tanpa js tentunya tdk bikin berat load

    BalasHapus
  17. 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

    BalasHapus
  18. 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.

    BalasHapus
  19. wah...mantabs ni kawan....
    saya ijin save dulu deh......
    sekalian saya pelajari dulu..he..he.....
    terimakasih banyak...

    BalasHapus
  20. CSS memang canggih . ,

    nice tutorial . ,

    BalasHapus
  21. mas, biar bisa jalan sendiri gambar nya gimana mas caranya?

    BalasHapus
  22. wahh mantap kk..
    bisa mempercepat loading nih keknya, soalnya tuh gak perlu nge load js lagi.. :D

    nice gan!!

    BalasHapus