Pure HTML CSS Responsive Slideshow (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

 

 

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

 

 

 

PART 1) THE HTML

<div class="slides">
  <!-- (A) FIRST SLIDE -->
  <input id="radio1" type="radio" name="slides" checked>
  <div class="slide">
    <img src="s1.webp">
    <div class="caption">1) Girl Eating Book In Library</div>
    <label class="last" for="radio3">&lt;</label>
    <label class="next" for="radio2">&gt;</label>
  </div>
 
  <!-- (B) SECOND SLIDE -->
  <input id="radio2" type="radio" name="slides">
  <div class="slide">
    <img src="s2.webp">
    <div class="caption">2) Girl Eating Cactus For Lunch</div>
    <label class="last" for="radio1">&lt;</label>
    <label class="next" for="radio3">&gt;</label>
  </div>
 
  <!-- (C) THIRD SLIDE -->
  <input id="radio3" type="radio" name="slides">
  <div class="slide">
    <img src="s3.webp">
    <div class="caption">3) Girl Eating Ice Cream In Water</div>
    <label class="last" for="radio2">&lt;</label>
    <label class="next" for="radio1">&gt;</label>
  </div>
</div>

This looks somewhat messy at first, but keep calm and look closely.

• <div class="slides"> Container for the “slideshow widget”.
• <input type="radio" name="slides"> Insert this before every slide.
• <div class="slide"> Each individual slide.
  • <img> Well… The slide image.
  • <div class="caption"> Self-explanatory, the caption for the slide.
  • <label class="last""> <label class="next"> The last/next buttons.

 

 

PART 2) THE BASIC MECHANISM

• We hide all the slides in CSS .slide { HIDE }.
• Use the radio buttons to toggle the slides – input[type=radio]:checked + .slide { SHOW }
• In plain English – “Show the slide right next to a checked radio button”.
  • Yes, we are using a group of radio buttons to drive the slide show. All the radio buttons must share the same name.
  • Take note, the first radio button is checked to display the first slide by default.
  • All last/next <label> buttons must also be “tied” to the respective radio button (slide).

 

PART 3) DIMENSIONS & LAYERING

/* (A) DIMENSIONS + LAYERING */
/* (A1) WRAPPER & SLIDE DIMENSIONS */
.slides, .slides * { box-sizing: border-box; }
.slides, .slide, .slide img {
  width: 100%; max-width: 600px;
  height: 400px;
}
.slide img { object-fit: cover; }
 
/* (A2) SLIDES LAYERING */
.slides { position: relative; }
.slide { position: absolute; top: 0; left: 0; }

• (A1) The very first thing we do in the CSS – “Synchronize” the same dimensions for the container, slides, and slide images.
• (A2) Set .slides { position: relative } and .slide { position: absolute } to layer all slides on top of each other.

 

 

PART 4) SLIDES MECHANISM

/* (B) SLIDES MECHANISM */
/* (B1) HIDE RADIO BUTTONS */
.slides input[type=radio] { display: none; }
 
/* (B2) ONLY SHOW CHOSEN SLIDE */
.slides input[type=radio] + .slide {
  z-index: 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s;
}
.slides input[type=radio]:checked + .slide {
  z-index: 9;
  opacity: 1; visibility: visible;
}

This is pretty much what was explained in the above “basic mechanism”.

• (B1) Hide all the radio buttons. They will still work and can be triggered with a label.
• (B2) “Hide all slides by default”, and “show the slide next to a checked radio button”.

 

PART 5) CAPTION, LAST, NEXT

/* (C) CAPTION + LAST + NEXT */
/* (C1) POSITION */
.slide .last, .slide .next, .slide .caption { position: absolute; }
 
/* (C2) CAPTION */
.slide .caption {
  width: 100%;
  padding: 10px;
  bottom: 0; left: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}
 
/* (C3) LAST NEXT BUTTONS */
.slide .last { left: 0; }
.slide .next { right: 0; }
.slide .last, .slide .next {
  /* (C3-1) POSITION */
  top: 50%; transform: translateY(-50%);
 
  /* (C3-2) COSMETICS */
  padding: 10px;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
 
  /* (C3-3) HIDE BY DEFAULT */
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s;
}
 
/* (C3-4) SHOW LAST NEXT ON HOVER */
.slides:hover .last, .slides:hover .next {
  opacity: 1; visibility: visible;
}

Finally, we have a whole bunch of cosmetics to layout the caption, and the last/next buttons. Not going to go through this line-by-line, they are not really “core mechanics” of the slideshow – Feel free to study these on your own.

 

 

 

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

• Simple Responsive Slideshow With CSS JS – Code Boxx
• Responsive Text Sliders With Pure CSS – Code Boxx
• Example on CodePen – Pure CSS Slideshow