You have already rated this page, you can only rate it once!

This article describes how to create a simple image slider with a responsive design using only CSS3. This slider may look identical to the previous one, but now it has a new operating principle.

This image slider has all animations which were used in the previous slider: Simple image slider with navigation using only CSS3. And if we compare it with the previous one, only one thing that has changed is its operating principle. Now the slider uses pseudo-class checked and hidden radio buttons to switch between slides. Such approach allows to get rid of the problems which were present in the previous slider.

Here is a list of the advantages:

Anchor name is not present anymore in the web address. This became possible by using pseudo-class checked and hidden radio buttons to switch between slides. By not using anchor name in the web address, several sliders can be used on the one page separately without having any effect on one another. This slider has a responsive design which means it resizes its slides proportionally to any possible screen resolution.

The new operating principle is simple. Each slide has its own hidden radio button which has a unique identifier that relates this radio button to the appropriate label element. Such relation is possible when a unique identifier is set as values of id attribute for radio button and as the same value for for attribute of label element. Then when user clicks on the label element (in our case it looks as navigation button) it checks appropriate radio button related to this label element by the unique identifier. And the simplest part is using pseudo-class checked, which shows the slide which has the radio button checked.

Important notice: pseudo-class checked is only supported by IE version 9 and higher.

Here is a minimal HTML and CSS code for this slider to show how simple the slider is.

HTML code:

<div id="image-slider"> <img class="ratio" src="nature1.jpg" alt=""> <input name="slides" id="slide1" type="radio" checked > <img class="image" src="nature1.jpg" alt=""> <input name="slides" id="slide2" type="radio" > <img class="image" src="nature2.jpg" alt=""> <input name="slides" id="slide3" type="radio" > <img class="image" src="nature3.jpg" alt=""> <input name="slides" id="slide4" type="radio" > <img class="image" src="nature4.jpg" alt=""> <input name="slides" id="slide5" type="radio" > <img class="image" src="nature5.jpg" alt=""> <div class="navigation"> <label for="slide1">1</label> <label for="slide2">2</label> <label for="slide3">3</label> <label for="slide4">4</label> <label for="slide5">5</label> </div> </div>

CSS code:

#image-slider { display: inline-block; height: auto; max-width: 100%; overflow: hidden; position: relative; } #image-slider .ratio { visibility: hidden; } #image-slider .image { top: 0; position: absolute; z-index: 5; opacity: 0; left: -100%; -webkit-transition: all linear 400ms; -moz-transition: all linear 400ms; -o-transition: all linear 400ms; transition: all linear 400ms; } #image-slider .ratio, #image-slider .image { display: block; height: auto; max-width: 100%; } #image-slider input:checked + .image { z-index: 10; opacity: 1; left: 0; } #image-slider input { display: none; }

Live demo

Here is a complete HTML and CSS code with all animations and nice design.

HTML code:

<div id="image-slider"> <img class="ratio" src="nature1.jpg" alt=""> <input name="slides" id="slide1" type="radio" checked > <img class="image" src="nature1.jpg" alt=""> <div class="caption">Caption text for the first image!</div> <label class="next" for="slide2">→</label> <input name="slides" id="slide2" type="radio" > <img class="image" src="nature2.jpg" alt=""> <div class="caption">Caption text for the second image!</div> <label class="prev" for="slide1">←</label> <label class="next" for="slide3">→</label> <input name="slides" id="slide3" type="radio" > <img class="image" src="nature3.jpg" alt=""> <div class="caption">Caption text for the third image!</div> <label class="prev" for="slide2">←</label> <label class="next" for="slide4">→</label> <input name="slides" id="slide4" type="radio" > <img class="image" src="nature4.jpg" alt=""> <div class="caption">Caption text for the fourth image!</div> <label class="prev" for="slide3">←</label> <label class="next" for="slide5">→</label> <input name="slides" id="slide5" type="radio" > <img class="image" src="nature5.jpg" alt=""> <div class="caption">Caption text for the fifth image!</div> <label class="prev" for="slide4">←</label> <div class="navigation"> <label for="slide1">1</label> <label for="slide2">2</label> <label for="slide3">3</label> <label for="slide4">4</label> <label for="slide5">5</label> </div> </div>

CSS code:

#image-slider { background-color: rgb(128, 128, 128); display: inline-block; height: auto; max-width: 100%; overflow: hidden; position: relative; } #image-slider .ratio { visibility: hidden; z-index: 1; } #image-slider .image { top: 0; left: -100%; opacity: 0; position: absolute; z-index: 5; } #image-slider .caption { position: absolute; background-color: rgba(255, 255, 255, 0.8); display: none; padding: 5px; text-align: center; top: -50px; width: 100%; z-index: 15; } #image-slider .navigation { text-align: center; background-color: rgba(255, 255, 255, 0.5); bottom: -32px; padding: 5px 0; position: absolute; width: 100%; z-index: 15; } #image-slider .image, #image-slider .caption, #image-slider .navigation { -webkit-transition: all linear 400ms; -moz-transition: all linear 400ms; -o-transition: all linear 400ms; transition: all linear 400ms; } #image-slider .ratio, #image-slider .image { display: block; height: auto; max-width: 100%; } #image-slider input:checked + .image { z-index: 10; left: 0; opacity: 1; } #image-slider input { display: none; } #image-slider .navigation label, #image-slider .next, #image-slider .prev { text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid rgb(48, 48, 48); color: black; cursor: pointer; display: inline-block; line-height: 20px; text-decoration: none; width: 20px; z-index: 20; } #image-slider .next, #image-slider .prev { display: none; position: absolute; text-align: center; top: 50%; -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 label: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 input:checked + .image + .caption, #image-slider input:checked + .image + .caption + label, #image-slider input:checked + .image + .caption + label + label { display: block; }

Live demo

The following archive contains all the examples above: