Pure HTML / CSS Card Slider

A pure HTML / CSS card sliding which allows you to click through a group of content sections using radio buttons and :checked pseudo-class.

How to use it:

Include the Font Awesome 4 for navigation arrows.

<link rel="stylesheet" href="font-awesome.min.css">

The markup structure for the card slider.

<div class="container">
  <input id="rad1" type="radio" name="rad" checked>
  <section style="background: #449DF5">
    <h1>Card 1</h1>
    <p>Description 1</p>
    <label for="rad3"><i class="fa fa-chevron-left"></i></label>
    <label for="rad2"><i class="fa fa-chevron-right"></i></label>
  </section>
  <input id="rad2" type="radio" name="rad">
  <section style="background: #40CCB5">
    <h1>Card 2</h1>
    <p>Description 2</p>
    <label for="rad1"><i class="fa fa-chevron-left"></i></label>
    <label for="rad3"><i class="fa fa-chevron-right"></i></label>
  </section>
  <input id="rad3" type="radio" name="rad">
  <section style="background: #FFC765">
    <h1>Card 3</h1>
    <p>Description 3</p>
    <label for="rad2"><i class="fa fa-chevron-left"></i></label>
    <label for="rad4"><i class="fa fa-chevron-right"></i></label>
  </section>
  <input id="rad4" type="radio" name="rad">
  <section style="background: #ED5565">
    <h1>Card 4</h1>
    <p>Description 4</p>
    <label for="rad3"><i class="fa fa-chevron-left"></i></label>
    <label for="rad1"><i class="fa fa-chevron-right"></i></label>
  </section>
</div>

The CSS rules for the card slider.

input[type="radio"] { display: none; }
input[type="radio"]:checked + section { display: block; }
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}
.container {
  position: absolute;
  left: 50%;
  margin-left: -200px;
  top: 50%;
  margin-top: -225px;
  width: 400px;
  height: 450px;
}
.container section {
  display: none;
  height: 100%;
  padding: 15px;
  background: #449df5;
  color: #fff;
  text-align: center;
}
.container section h1 {
  margin-bottom: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: lighter;
  font-size: 2em;
}
.container section p {
  width: 75%;
  margin: 0 auto;
  padding: 10px;
}
.container section label {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  font-size: 1.5em;
  bottom: 0;
}
.container section label:nth-child(odd) { right: 120px; }
.container section label:nth-child(even) { left: 120px; }
.container section > i {
  font-size: 6em !important;
  margin-top: 50px;
  margin-bottom: 25px;
}