Cross-fading Carousel In Pure CSS

A pure CSS carousel that fades through a series of web contents (images, div elements, etc) using CSS3 animations.

How to use it:

Add your own slide elements to the carousel.

<div class="carousel">
  <img src="1.jpg">
  <div style="background:url(2.jpg)">
    ...
  </div>
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
</div>

Download and insert the style sheet ‘carousel.css’ in the document’s head section.

<link rel="stylesheet" href="carousel.css">

Apply your own CSS styles to the carousel.

.carousel {
  margin: auto;
  max-width: 800px;
  height: 450px;
  box-shadow: 0 1em 5em black;
}