Simple image slider with navigation using only CSS3

This is another improved version of the image slider which was presented in the previous articles. Now the slider has navigation elements and caption for each image. All these new elements are animated with CSS3.
Here are two previous versions of the image slider for readers who are not familiar with them:
- Creating an image slider using only CSS3.
- Creating an image slider using only CSS3 (without page scrolling).
HTML code
In this slider, the structure of HTML elements was changed a bit. Some elements were removed to make it more simple and some were added that the image slider would have new features.
All elements in the slider can be relatively divided into a couple of groups. Each group contains necessary elements for animations in the image slider, except the last one, because it's responsible for navigation.
Here is an example of a group of elements contained in the second slide:
<span id="slide2"></span> <img class="image" src="nature2.jpg" alt=""> <div class="caption">Caption text for the second image!</div> <a class="prev" href="#slide1">←</a> <a class="next" href="#slide3">→</a>
In the group above, the first element is span tag with id attribute which value is an identifier of the current slide. This identifier is used for switching between images to the current slide in the navigation. The second element is img tag which contains an image for the current slide. The third element is div tag with text for caption for the current slide. And the last two elements are a tags which are links for the previous and next slides.
Here is a complete HTML code of the slider:
<div id="image-slider"> <span id="slide1"></span> <img class="image" src="nature1.jpg" alt=""> <div class="caption">Caption text for the first image!</div> <a class="next" href="#slide2">→</a> <span id="slide2"></span> <img class="image" src="nature2.jpg" alt=""> <div class="caption">Caption text for the second image!</div> <a class="prev" href="#slide1">←</a> <a class="next" href="#slide3">→</a> <span id="slide3"></span> <img class="image" src="nature3.jpg" alt=""> <div class="caption">Caption text for the third image!</div> <a class="prev" href="#slide2">←</a> <a class="next" href="#slide4">→</a> <span id="slide4"></span> <img class="image" src="nature4.jpg" alt=""> <div class="caption">Caption text for the fourth image!</div> <a class="prev" href="#slide3">←</a> <a class="next" href="#slide5">→</a> <span id="slide5"></span> <img class="image" src="nature5.jpg" alt=""> <div class="caption">Caption text for the fifth image!</div> <a class="prev" href="#slide4">←</a> <img class="image default" src="nature1.jpg" alt=""> <div class="caption default">Caption text for the first image!</div> <a class="next" href="#slide2">→</a> <div class="navigation"> <a href="#slide1">1</a> <a href="#slide2">2</a> <a href="#slide3">3</a> <a href="#slide4">4</a> <a href="#slide5">5</a> </div> </div>
CSS code
In this slider, most of styles are similar to the old ones which were used in previous versions of the slider. But, also here are some new styles which make the navigation buttons rounded and add the animation of gradual appearing for all elements of the slider (navigation buttons, captions).
Here is a complete CSS code of the slider:
#image-slider { margin: 100px auto; width: 500px; height: 375px; overflow: hidden; position: relative; background-color: rgb(128, 128, 128); } #image-slider .image { position: absolute; top: 0; left: -500px; z-index: 1; opacity: 0; -webkit-transition: all linear 400ms; -moz-transition: all linear 400ms; -o-transition: all linear 400ms; transition: all linear 400ms; } #image-slider .caption { position: absolute; top: -50px; background-color: rgba(255, 255, 255, 0.8); width: 100%; padding: 5px; text-align: center; display: none; z-index: 10; -webkit-transition: all linear 400ms; -moz-transition: all linear 400ms; -o-transition: all linear 400ms; transition: all linear 400ms; } #image-slider .navigation { text-align: center; z-index: 8; bottom: -32px; position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 100%; padding: 5px 0; -webkit-transition: all linear 400ms; -moz-transition: all linear 400ms; -o-transition: all linear 400ms; transition: all linear 400ms; } #image-slider .navigation a, #image-slider .next, #image-slider .prev { text-decoration: none; background-color: white; color: black; display: inline-block; line-height: 20px; width: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid rgb(48, 48, 48); z-index: 10; } #image-slider .next, #image-slider .prev { display: none; position: absolute; top: 50%; text-align: center; -webkit-transition: left linear 400ms, right linear 400ms; -moz-transition: left linear 400ms, right linear 400ms; -o-transition: left linear 400ms, right linear 400ms; transition: left linear 400ms, right linear 400ms; } #image-slider .next:hover, #image-slider .prev:hover { background-color: rgb(192, 192, 192); } #image-slider .prev { left: -27px; } #image-slider .next { right: -27px; } #image-slider .navigation a:hover { background-color: rgb(192, 192, 192); } #image-slider:hover .navigation { bottom: 0; } #image-slider:hover .prev { left: 5px; } #image-slider:hover .next { right: 5px; } #image-slider:hover .caption { top: 0; } #image-slider span { display: none; position: fixed; } #image-slider span:target + .image { left: 0; z-index: 5; opacity: 1; } #image-slider span:target + .image + .caption, #image-slider span:target + .image + .caption + a, #image-slider span:target + .image + .caption + a + a, #image-slider .image.default + .caption, #image-slider .image.default + .caption + a, #image-slider .image.default + .caption + a + a { display: block; } #image-slider span:target ~ .image.default + .caption, #image-slider span:target ~ .image.default + .caption + a, #image-slider span:target ~ .image.default + .caption + a + a { display: none; } #image-slider .image.default { left: 0; z-index: 5; opacity: 1; } #image-slider span:target ~ .image.default { z-index: 1; opacity: 0; left: -500px; }