JS-free radio-based slideshow /

by asdf

HTML

<div class="slideshow">
  <input type="radio" name="slide" id="radio-1" checked />
  <div>
    <h1>Image description goes here. -1</h1>
    <img src="images/0.png" width="200px" height="200px" alt="" />
    <label for="radio-2">Next</label>
  </div>
  <input type="radio" name="slide" id="radio-2" />
  <div>
    <h1>Image description goes here. -2</h1>
    <img src="images/0.png" width="200px" height="200px" alt="" />
    <label for="radio-3">Next</label>
  </div>
  <input type="radio" name="slide" id="radio-3" />
  <div>
    <h1>Image description goes here. -3</h1>
    <img src="images/0.png" width="200px" height="200px" alt="" />
    <label for="radio-4">Next</label>
  </div>
  <input type="radio" name="slide" id="radio-4" />
  <div>
    <h1>Image description goes here. -4</h1>
    <img src="images/0.png" width="200px" height="200px" alt="" />
    <label for="radio-5">Next</label>
  </div>
  <input type="radio" name="slide" id="radio-5" />
  <div>
    <h1>Image description goes here. -5</h1>
    <img src="images/0.png" width="200px" height="200px" alt="" />
    <label for="radio-1">Next</label>
  </div>
</div>

CSS

.slideshow {
  list-style-type: none;
}

.slideshow h1{
  font-size: 1.3em;
}

.slideshow input[type="radio"] {
  display: none;
}

.slideshow div {
  display: none;
}

.slideshow input[type="radio"]:checked + div {
  display: block;
}