Image Slider Pure CSS3

This article will show you how to make pure css3 image slider. This is very simple example of css3 image slider. We are going to use :target selector of css3. We will use only one line JavaScript for initiating it. This Css3 slider works properly with all browsers except IE. The slider works without animation on IE.




Download | Demo

This is html part of our demo.

[html]
<div id="slider">
<div id="image-1">
<a href=""><img src="http://www.jotform.org/demo/image-slider-pure-css3/images/s1.jpeg"/></a>
<a class="slider-nav" href="#image-1"></a>
</div>
<div id="image-2">
<a href=""><img src="http://www.jotform.org/demo/image-slider-pure-css3/images/s2.jpeg"/></a>
<a class="slider-nav" href="#image-2"></a>
</div>
<div id="image-3">
<a href=""><img src="http://www.jotform.org/demo/image-slider-pure-css3/images/s3.jpeg"/></a>
<a class="slider-nav" href="#image-3"></a>
</div>
<div id="image-4">
<a href=""><img src="http://www.jotform.org/demo/image-slider-pure-css3/images/s4.jpeg"/></a>
<a class="slider-nav" href="#image-4"></a>
</div>
</div>
[/html]

And this is CSS part of our demo.

[css]
#slider {
width: 845px;
height: 200px;
position: relative;
overflow: hidden;
background: #434343;
}

#slider img {
position: absolute;
top: -200px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}

.slider-nav {
background: #333;
width: 16px;
z-index: 9999;
height: 16px;
box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4);
border-radius: 32px;
position: absolute;
bottom: 15px;
}

#image-1 .slider-nav { right: 80px; }
#image-2 .slider-nav { right: 60px; }
#image-3 .slider-nav { right: 40px; }
#image-4 .slider-nav { right: 20px; }
[/css]

This part is the most important part of our demo. In this part, you must know how :target selector works.
For example, if you click the link which is #image-2, we are targeting the div with id=”image-2″.

[css]
#slider div:target img {
top: 0;
}

#slider div:target a.slider-nav {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}
[/css]

Eventually, we need to add JavaScript part because of getting hash because of needing id,

[js]
<script type="text/javascript">window.location.hash = ‘#image-1′</script>
[/js]