How to Create An Image Slider With Pure CSS3: http://www.deluxeblogtips.com/2010/05/image-slider-pure-css3.html
A Pen by Tran Ngoc Tuan Anh on CodePen.
<div id="images"> | |
<img id="image1" src="http://i.imgur.com/dL3io.jpg" /> | |
<img id="image2" src="http://i.imgur.com/qASVX.jpg" /> | |
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" /> | |
<img id="image4" src="http://i.imgur.com/5Sd3Q.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> | |
</div> |
How to Create An Image Slider With Pure CSS3: http://www.deluxeblogtips.com/2010/05/image-slider-pure-css3.html
A Pen by Tran Ngoc Tuan Anh on CodePen.
body { | |
text-align: center; | |
} | |
#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; | |
opacity: 1; | |
} | |
#slider a { | |
text-decoration: none; | |
background: #E3F1FA; | |
border: 1px solid #C6E4F2; | |
padding: 4px 6px; | |
color: #222; | |
} | |
#slider a:hover { | |
background: #C6E4F2; | |
} |