Image Slider With CSS3

Sebagian besar slider diciptakan dengan menggunakan Javascript. Tapi dengan kekuatan CSS3, kita dapat menerapkan slider transisi animasi ini yang murni hanya menggunakan CSS. Idenya cukup sederhana tapi masalahnya slider ini tidak bekerja di semua versi browser.

Demo Image Slider With CSS3

123456

The HTML Markup

The HTML markup for image slider is so simple like this:

<div id="images">
 <img id="image1" src="URL_1.jpg"/>
 <img id="image2" src="URL_2.jpg"/>
 <img id="image3" src="URL_3.jpg"/>
 <img id="image4" src="URL_4.jpg"/>
 <img id="image5" src="URL_5.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>

The CSS Code

The complete CSS for the image slider is:

<style>
 #images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
    }
 #images img {
    width: 400px;
    height: 250px;
    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;
    }
 #slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
    }
 #slider a:hover {
    background: #C6E4F2;
    }
</style>

Sumber: http://www.deluxeblogtips.com/