Membuat Image Slide Dengan CSS3

<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://wallpaperkomputerku.blogspot.com/2010/09/55-wallpaper-movie.html"> <img id="image1" src="http://4.bp.blogspot.com/_G4pp26RoaoU/TI8ZIn1xUFI/AAAAAAAAAJ4/5foHyMMA9GM/s400/127043_1280_1024.jpg" /></a>

<a href="http://wallpaperkomputerku.blogspot.com/2010/10/amazing-hq-wallpapers.html"> <img id="image2" src="http://3.bp.blogspot.com/_G4pp26RoaoU/TL0BbH6r4FI/AAAAAAAAAQo/i8CooeXi_ps/s400/Mix-Pack-8+%28114%29.jpg" /></a>

<a href="http://wallpaperkomputerku.blogspot.com/2010/10/bmw-wallpaper-car.html"> <img id="image3" src="http://3.bp.blogspot.com/_G4pp26RoaoU/TKw39HkTD3I/AAAAAAAAAP4/PBhZPvgFXrw/s400/bmw_3_14.jpg" /></a>

<a href="http://wallpaperkomputerku.blogspot.com/2010/08/wallpaper-art.html"> <img id="image4" src="http://1.bp.blogspot.com/_G4pp26RoaoU/THczF8_rspI/AAAAAAAAAHc/lTFFGGfTq94/s400/laba-ws.blogspot.com_Art_by_Gary_Locke_0004.jpg" /></a>

<a href="http://wallpaperkomputerku.blogspot.com/2010/10/cool-wallpapers.html"><img id="image5" src="http://2.bp.blogspot.com/_G4pp26RoaoU/TL0IOJFlVdI/AAAAAAAAAQs/WxEiqK3bmfE/s400/cool20090108_002.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>