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

Simple image slider with navigation using only CSS3

Authors: Sergey Fedus

Currently 0 out of 5 Stars.
1
2
3
4
5

Rating: 0/5 (0 votes cast)

Jan 14th 2014 05:02 am 48912034 72876

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:

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

Tags: Programming languages Markup languages HTML & CSS CSS3 Image slider

Discussion (total 7 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

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

Mary Thomson

June 19, 2017 at 09:55 am

Trying to get images full width of page -- would appreciate any help:) thanks

Administrator User

June 20, 2017 at 01:30 am

Hello Mary Thomson!

For this purpose you need to use this slider https://basicuse.net/articles/pl/textile/html_css/simple_image_slider_with_a_responsive_design_using_only_css3

but, with some little corrections:

#image-slider {
  width: 100%;
}

#image-slider .ratio, #image-slider .image {
  width: 100%;
}

Mary Thomson

June 23, 2017 at 09:57 am

Thanks for above comment! Now I'm trying to have button with text "WELCOME TO OLD MARYLAND GRILL" centered on top of slider images. Using Flexbox. Can't get this to work.
HTML
<div id="image-slider">

<div class="mainButton">
<div class="mainText">
<h1>WELCOME TO OLD MARYLAND GRILL</h1>
</div>
</div>

<img class="ratio" src="images/oysterMan.jpg" alt="">

etc.......

CSS
.mainButton {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
margin-top: 25%;
border-radius: 15px;
background: black;
opacity: 0.5;
width: 600px;
height: 50px;
z-index: 25;
}
.mainText h1 {
font-family: "Geometos Rounded";
text-align: center;
color: white;
font-size: 2.5em;
z-index: 30;
}

Mary Thomson

June 23, 2017 at 12:40 pm

Forgot to check "notify me" at bottom