Home / Articles / Programming languages / Markup languages / HTML & CSS / Simple image slider with a responsive design using only CSS3

Simple image slider with a responsive design using only CSS3

Simple image slider with a responsive design using only CSS3
 
Simple image slider with a responsive design using only CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

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

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

  1. 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.
  2. 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.
  3. 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">&rarr;</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">&larr;</label>
  <label class="next" for="slide3">&rarr;</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">&larr;</label>
  <label class="next" for="slide4">&rarr;</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">&larr;</label>
  <label class="next" for="slide5">&rarr;</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">&larr;</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:


 

Read also

CSS3: media queries

CSS3: media queries

Discussion (total 4 comments)

Joshua
February 05, 2014 at 10:38 pm
If I want to use different sized images how can i adjust the css to get them to center in the slider?
Administrator User
Administrator User
February 09, 2014 at 03:56 am
It's not a problem! Just replace the following CSS code in the slider:
#image-slider .ratio,
#image-slider .image {
  display: block;
  height: auto;
  max-width: 100%;
}
With new one:
#image-slider .ratio {
  display: block;
  height: auto;
  max-width: 100%;
}

#image-slider .image img {
  height: auto;
  max-width: 100%;
}

#image-slider .image {
  width: 100%;
  text-align: center;
}
And also HTML code for each slide must be replaced from:
<img class="image" src="nature1.jpg" alt="">
To:
<div class="image"><img src="nature1.jpg" alt=""></div>
Do not forget to use images with different sizes to check it.
Dana
April 09, 2014 at 03:52 pm
Great article! I was wondering what would I need to change to make the navigation labels show the current selected slide number (by having a different style when the slide is selected)? Thanks!
Administrator User
Administrator User
April 11, 2014 at 02:54 pm
Hello! Yes, it's possible, but such way is not flexible. Just add the following styles to existing ones:
#image-slider input#slide1:checked ~ .navigation label[for=slide1],
#image-slider input#slide2:checked ~ .navigation label[for=slide2],
#image-slider input#slide3:checked ~ .navigation label[for=slide3],
#image-slider input#slide4:checked ~ .navigation label[for=slide4],
#image-slider input#slide5:checked ~ .navigation label[for=slide5],
#image-slider input#slide6:checked ~ .navigation label[for=slide6],
#image-slider input#slide7:checked ~ .navigation label[for=slide7],
#image-slider input#slide8:checked ~ .navigation label[for=slide8],
#image-slider input#slide9:checked ~ .navigation label[for=slide9] {
  background-color: rgb(192, 192, 192);
}
They will only work for current identifiers used in the current slider and amount of slides shouldn't be bigger than nine.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation