Simple Responsive Slideshow With Pure CSS (Free Download)

Welcome to a tutorial and example of a responsive slideshow with pure HTML and CSS. So you are looking for a “no fuss” slideshow for your project? Well, it’s possible to create one using just HTML and CSS – Read on for an example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Demo Slideshow Useful Bits & Links
The End

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SLIDESHOW DEMO

 

 

PURE CSS SLIDESHOW

All right, let us now get into more details on how this pure CSS slideshow works.

 

PART 1) THE HTML

slides.html
<div class="slides">
  <!-- (A) FIRST SLIDE -->
  <input type="radio" name="s" id="radio1" checked/>
  <div class="slide" id="slide1">
    <label class="last" for="radio3">&lt;</label>
    <label class="next" for="radio2">&gt;</label>
    <div class="caption">1) Landscape</div>
  </div>
 
  <!-- (B) SECOND SLIDE -->
  <input type="radio" name="s" id="radio2"/>
    <div class="slide" id="slide2">
    <label class="last" for="radio1">&lt;</label>
    <label class="next" for="radio3">&gt;</label>
    <div class="caption">2) A Pizza</div>
  </div>
 
  <!-- (C) THIRD SLIDE -->
  <input type="radio" name="s" id="radio3"/>
  <div class="slide" id="slide3">
    <label class="last" for="radio2">&lt;</label>
    <label class="next" for="radio1">&gt;</label>
    <div class="caption">3) Artistic Ape</div>
  </div>
</div>
  • <div class="slides"> The container for the “slideshow widget”.
  • <input type="radio"/> Required before every slide.
  • <div class="slide"> Each individual slide.
    • <label class="last""> <label class="next"> The last/next buttons.
    • <div class="caption"> Self-explanatory, the caption for the slide.

 

PART 2) THE BASIC IDEA

  • We will hide all the slides .slide { HIDDEN }.
  • Use the CSS sibling selector to toggle each slide when the radio button is checked – input[type=radio]:checked + .slide { SHOW }
  • Yes, we are using the radio button to drive the slides.
    • The first radio button is checked to display the first slide by default.
    • All the radio buttons must share the same name.
    • All last/next <label> must also be “tied” to the respective radio button (slide).

 

 

PART 3) DIMENSIONS & LAYERING

slides.css
/* (A) SLIDE DIMENSIONS */
.slides, .slides * { box-sizing: border-box; }
.slides, .slide {
  width: 100%;
  max-width: 600px; /* optional */
  height: 400px;
}
 
/* (B) SLIDES LAYERING */
.slides { position: relative; }
.slide {
  position: absolute;
  top: 0; left: 0;
}

  • (A) The very first thing we do in the CSS – Define the same dimensions for the container and slides.
  • (B) Set .slides { position: relative } and .slide { position: absolute } to “layer” all the slides inside the container.

 

PART 4) SET IMAGE & SLIDES MECHANISM

slides.css
/* (C) SLIDE IMAGES */
.slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#slide1 { background-image: url("s1.jpg"); }
#slide2 { background-image: url("s2.jpg"); }
#slide3 { background-image: url("s3.jpg"); }
 
/* (D) SHOW/HIDE SLIDE */
.slide {
  z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
}
.slides input[type=radio]:checked + .slide {
  z-index: 2;
  opacity: 1; visibility: visible;
}

  • (C) Captain Obvious to the rescue, set the background-image of the slides.
  • (D) Remember the hide slides by default? Show when the radio button is checked? This is the CSS magic that drives the slideshow.

 

 

PART 5) LAST & NEXT BUTTONS

slides.css
/* (E) NAVIGATION ARROWS */
/* (E1) HIDE RADIO BUTTONS */
.slides input[type=radio] { display: none; }
 
/* (E2) LAST/NEXT ARROWS */
.last, .next {
  /* (E2-1) POSITION */
  position: absolute; z-index: 3;
  top: 50%; transform: translateY(-50%);
 
  /* (E2-2) FONT */
  font-size: 40px; font-weight: 700;
 
  /* (E3-3) COLORS */
  color: #fff; background: rgba(0, 0, 0, 0.5);
 
  /* (E3-4) ETC */
  padding: 10px; cursor: pointer;
 
  /* (E3-5) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
}
.last { left: 0; }
.next { right: 0; }
 
/* (E4) SHOW ARROWS ON HOVER */
.slides:hover .last, .slides:hover .next {
  opacity: 1; visibility: visible;
}

Next, we deal with the cosmetics of the last/next buttons.

  • (E1) Hide the radio buttons – They still work when we click on the last/next labels.
  • (E2 to E4) Cosmetics. Really, just to hide the controls by default, and show them only on mouse hover.

 

PART 6) SLIDE CAPTION

slides.css
/* (F) CAPTION */
.caption {
  /* (F1) DIMENSIONS */
  width: 100%;
  padding: 10px;
 
  /* (F2) POSITION */
  position: absolute;
  z-index: 3; bottom: 0; left: 0;
 
  /* (F3) COLORS */
  color: #fff; background: rgba(0, 0, 0, 0.5);
 
  /* (F4) HIDDEN BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s;
}
 
/* (F5) SHOW CAPTION ON HOVER */
.slides:hover .caption {
  opacity: 1; visibility: visible;
}

Lastly, cosmetics and placement of the slide captions.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

HOW ABOUT AUTO-SLIDES?

It is possible to use CSS keyframes to scroll through the slides automatically, but there is a problem. Using CSS keyframes is just going to introduce more complications, it is easier with Javascript… It is not as “scary” as some may think – Check out my other Javascript slideshow tutorial, links below.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *