Membuat slide gambar dengan CSS3

Css3 memang mantep bahkan dengan css3 kita sudah bisa membuat slider keren dan fantastis pastinya meski masih ada kekurangan namanya juga perkembangan hehehee ntar lama - lama pasti ada yang nemu lebih dari yang sekarang aku share ini, entah dari mana dulu aku dapat trik ini aku juga dah lupa soalnya halamannya gak aku Bookmark, dan slider ini juga udah aku modifikasi sedemikian rupa sehingga menjadi seperti gambar di bawah ini.

DEMO

Aku cuman edit bagian Navigasin dan juga gambarnya agar terlihat lebih rapi gitu, soalnya kalau gak di kasi gitu tampilannya kurang srek di mata, anda juga nanti bisa memodifikasinya lagi untuk warna border dan lain - lainnya. slider ini gak rumit anda cukup tambah Gadget HTML/Javascript dan simpan source kodenya di bawah ini.

<div id='box'>
<div id="images">
<img id="image1" src="URL gambar1.jpg"/>
<img id="image1" src="URL gambar2.jpg"/>
<img id="image1" src="URL gambar3.jpg"/>
<img id="image1" src="URL gambar4.jpg"/>
<img id="image1" src="URL gambar5.jpg"/>
</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>
</div>

<style>
#box {
    width: 400px;
    margin: 10px auto;
    background: #eaa;
    border: 5px solid #dd5;
    padding: 0
    }

#images {
    width: 400px;
    height: 290px;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0 auto 1px
    }

#images img {
    max-width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
    transition: all linear 500ms
    }

#images img:target {
    left: 0;
    z-index: 9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
    }

#images img:first-child {
    left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
    }

#slider {
    display: block;
    margin: 0 auto;
    text-align: center;
    background: #98c;
    overflow: hidden;
    padding: 10px 0
    }

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

#slider a:hover {
    background: #C6E4F2
    }
</style>

Jangan lupa juga Browser anda harus keren / modern untuk melihat tampilan slider ini dengan sempurna karena jika browser anda jadul gak bisa liat tampilan slider keren ini.