Carousel → kandeefloss playground

Markup

<div class="carousel">
  <input type="radio" name="carousel" id="carousel-1" checked="checked" />
  <input type="radio" name="carousel" id="carousel-2" />
  <input type="radio" name="carousel" id="carousel-3" />
  <ul class="images">
    <li><a href="#"><img src="cat1.jpg" alt="" /></a></li>
    <li><a href="#"><img src="cat2.jpg" alt="" /></a></li>
    <li><a href="#"><img src="cat3.jpg" alt="" /></a></li>
  </ul>
  <div class="arrows">
    <label for="carousel-1"><i class="fa"></i></label>
    <label for="carousel-2"><i class="fa"></i></label>
    <label for="carousel-3"><i class="fa"></i></label>
  </div>
</div>

CSS

.carousel {
  display: inline-block;
  position: relative;
}

.carousel input {
  display: none;
}

.carousel .images {
  list-style: none;
  overflow: hidden;
  position: relative;
}

.carousel .images li {
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s linear;
}

.carousel .images li:first-child {
  position: relative;
}

.carousel input:nth-of-type(1):checked ~ .images li:nth-of-type(1),
.carousel input:nth-of-type(2):checked ~ .images li:nth-of-type(2),
.carousel input:nth-of-type(3):checked ~ .images li:nth-of-type(3) { transform: translateX(0); z-index: 5; }

.carousel input:nth-of-type(1):checked ~ .images li:nth-of-type(3),
.carousel input:nth-of-type(2):checked ~ .images li:nth-of-type(1),
.carousel input:nth-of-type(3):checked ~ .images li:nth-of-type(2) { transform: translateX(-100%); z-index: 0; }

.carousel input:nth-of-type(1):checked ~ .images li:nth-of-type(2),
.carousel input:nth-of-type(2):checked ~ .images li:nth-of-type(3),
.carousel input:nth-of-type(3):checked ~ .images li:nth-of-type(1) { transform: translateX(100%); z-index: 0; }

.carousel .arrows label {
  position: absolute;
  left: 0em;
  top: 50%;
  width: 2em;
  line-height: 2em;
  display: none;
  border-radius: 50%;
  transition: background .4s linear, color .4s linear;
  margin: -1em .5em;
  z-index: 100;
  color: #aaa;
  text-align: center;
}

.carousel .arrows label:hover {
  background: #18bc9c;
  color: #fff;
}

.carousel .arrows label .fa:before {
  content: '\f053';
}

.carousel input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
.carousel input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
.carousel input:nth-of-type(1):checked ~ .arrows label:nth-of-type(3) { left: -3em; display: block; }

.carousel input:nth-of-type(3):checked ~ .arrows label:nth-of-type(1),
.carousel input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
.carousel input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3) { left: 100%; display: block; }

.carousel input:nth-of-type(3):checked ~ .arrows label:nth-of-type(1) .fa:before,
.carousel input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2) .fa:before,
.carousel input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3) .fa:before { content: '\f054'; }

CSS-only Carousel

Markup

CSS