jendelablog.wordpress.com

budiscyan weblog area's

Trik Membuat Auto Slider Image

Di sini kita akan mencoba membuat slide gambar sederhana dengan menggunakan HTML dan CSS level 3. jika anda masih bingung bisa di lihat untuk DEMO nya.

Trik ini hampir sama dengan journal saya yang sebelumnya, hanya saja di sini ada penambahan sedikit properti. Setelah blogwalking ke beberapa tempat dan melakukan tes di beberapa browser akhirnya saya menuliskannya ke dalam journal ini.

Hasilnya memang variatif, ada yang menerjemahkan kode ini dengan baik tapi ada juga yang kurang maksimal. Journal ini saya tulis sekaligus untuk memenuhi janji saya untuk Vioalecouture yang beberapa waktu lalu menanyakan lewat guestbook.

Perhatikan kode di bawah ini :

CSS.slider_box{
background:#333 url() bottom left repeat-x;
padding:6px;
border:2px solid #555;
float:left;
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
box-shadow:4px 6px 4px #888;
-moz-box-shadow:4px 6px 4px #888;
-webkit-box-shadow:4px 6px 4px #888;
}
#slider {
width: 530px;
height: 220px;
overflow: hidden;
position: relative;
margin:0 0 10px 0;
}
#slider img {
border:8px solid white;
padding:3px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width: 500px;
height: 200px;
position: absolute;
top: 0;
left: -150px;
z-index: 1;
opacity: 0;
transition: 1.5s;
-o-transition: 1.5s;
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
}
#slider img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#slider img:first-child {
left: 0;
opacity: 1.0;
}
#tab{
background:#ddd url() top center repeat-x;
border:1px solid #777;
margin:-3px 0px 4px;
padding:5px 0px;
opacity: 1.0;
-moz-opacity:1.0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#tab a {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity: 0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
text-decoration: none;
background:#ddd;
border: 2px solid #666633;
padding: 0px 10px;
color: #222;
}
#tab a:hover {
background: #00CC33;
opacity: 1.0;
}

Keterangan :

  • Text yang berwarna Hijau berfungsi untuk mengatur durasi pergantian gambar
  • Text warna merah berfungsi untuk menyamarkan gambar yang pertama kali. kenapa di samarkan? karena salah satu kelemahan dari trik ini adalah ‘gambar pertama akan menjadi background untuk gambar-gambar berikutnya’.

HTML<div align=”center”>
<div class=”slider_box”>
<div id=”slider”>

<img id=”slider1″ src=”http://t1.gstatic.com/images?q=tbn:ANd9GcTr1aZ_JA39_7LPrhCdjaW1ze_mlTRNtyPD2EnVtbGAPzbiIatE0smvIn7dSw“>

<img id=”slider2″ src=”http://1.bp.blogspot.com/-nB1cKvZMbd0/Td3YAlMQUUI/AAAAAAAAAL4/RMM3EZZaeGQ/s1600/xenon.jpg“>

<img id=”slider3″ src=”http://www.carenthusiast.co.uk/caterham/caterham__r400_superlight__2010__011_530.jpg“>

<img id=”slider4″ src=”http://www.carenthusiast.co.uk/bmw/bmw__520d__2012__026_530.jpg“>

<img id=”slider5″ src=”http://images01.olx.co.id/ui/3/38/39/54162939_4.jpg“>

<img id=”slider6″ src=”http://www.worldtimeattack.com/wp-content/uploads/2011/06/xs-engineering-R32.jpg“>
</div>

<div id=”tab”>
<a href=”#slider1″>1</a>
<a href=”#slider2″>2</a>
<a href=”#slider3″>3</a>
<a href=”#slider4″>4</a>
<a href=”#slider5″>5</a>
<a href=”#slider6″>6</a>
</div>
</div></div>

Keterangan:

  • Yang berwarna Biru adalah url gambar yang akan di tampilkan ke dalam slide.

Cara pemasangan :

  • Untuk kode CSSnya di masukkan ke Custom CSS dan HTML-nya di masukkan ke welcomebox atau journal.
  • Jika menghendaki slide image dipasang di sidebar, silakan ubah nominal pada properti width dan height ( text warna ungu )

*Trik ini belu sempurna, untuk variasi lain silakan dikembangkan sesuai dengan kreatifitasnya masing-masing.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 12 Februari 2012 by in artikel.

Kategori

Blog Statistic

  • 21,290 hits

Contact

%d blogger menyukai ini: