Basic Pure CSS Slideshow / Carousel

Preview:

Description:

CSS Carousal is a pure HTML/CSS slideshow which is animated without using Javascript. It uses radio buttons and labels to trigger the slideshow.

How to use it:

Create a list of images for the carousel.

<ul>
  <li class="slide1">
    <img src="1.jpg">
    <h2>Image 1</h2>
  </li>
  <li class="slide1">
    <img src="2.jpeg">
    <h2>Image 2</h2>
  </li>
  <li class="slide1">
    <img src="3.jpg">
    <h2>Image 3</h2>
  </li>
  ...
</ul>

Create radio inputs and labels which will be used to switch between images. The whole markup structure should be like this:

<ul>
  <input type="radio" name="slider" id="1" class="slider" checked>
  <input type="radio" name="slider" id="2" class="slider">
  <input type="radio" name="slider" id="3" class="slider">
  <li class="slide1">
    <img src="1.jpg">
    <h2>Image 1</h2>
  </li>
  <li class="slide1">
    <img src="2.jpeg">
    <h2>Image 2</h2>
  </li>
  <li class="slide1">
    <img src="3.jpg">
    <h2>Image 3</h2>
  </li>
</ul>

<div class="selector">
  <label for="1"></label>
  <label for="2"></label>
  <label for="3"></label>
</div>

The main CSS styles.

.slider:nth-of-type(1):checked ~ .slide1:nth-of-type(1),
.slider:nth-of-type(2):checked ~ .slide1:nth-of-type(2),
.slider:nth-of-type(3):checked ~ .slide1:nth-of-type(3),
.slider:nth-of-type(4):checked ~ .slide1:nth-of-type(4),
.slider:nth-of-type(5):checked ~ .slide1:nth-of-type(5),
.slider:nth-of-type(6):checked ~ .slide1:nth-of-type(6) {
  display: inline-block;
}

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

ul { text-align: center; }

li {
  border: 3px solid #333;
  list-style: none;
  display: none;
}

img {
  width: 800px;
  height: 600px;
  position: relative;
}

h2 {
  position: absolute;
  top: 250px;
  color: #fff;
  padding: 20px;
  background-color: #000;
}

p {
  font-size: x-large;
  padding-left: 15%;
}

label {
  background: black;
  padding: 10px;
  border-radius: 50%;
  display: inline-block;
}

.selector { text-align: center; }