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

Simple image slider with navigation using only CSS3

Simple image slider with navigation using only CSS3
 
Simple image slider with navigation 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 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:

  1. Creating an image slider using only CSS3.
  2. 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">&larr;</a>
<a class="next" href="#slide3">&rarr;</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">&rarr;</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">&larr;</a>
  <a class="next" href="#slide3">&rarr;</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">&larr;</a>
  <a class="next" href="#slide4">&rarr;</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">&larr;</a>
  <a class="next" href="#slide5">&rarr;</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">&larr;</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">&rarr;</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;
}

Live demo


 

Read also

Creating an image slider using only CSS3

Creating an image slider using only CSS3

CSS3: multiple backgrounds

CSS3: multiple backgrounds

Discussion (total 4 comments)

Anselmo Gabriel
March 19, 2015 at 12:04 am
Will this work even if not connected to a localhost?
Anselmo Gabriel
March 19, 2015 at 12:22 am
Would you recommend to use this in a live site?
Administrator User
Administrator User
March 31, 2015 at 08:03 am
Hello Anselmo Gabriel!
Yes, it should work!
And for live website, it would recommend this one: http://basicuse.net/articles/pl/textile/html_css/simple_image_slider_with_a_responsive_design_using_only_css3
Valeirja Miloo
November 24, 2016 at 02:33 pm
Gallery not working in Crome, why?

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation