Pure CSS Fullscreen Slideshow With Fancy Animations

Preview:

Description:

A CSS only fullscreen slideshow with fancy slide fade or Twist Degree animations based on CSS3.

How to use it:

Include the required modernizr.js on the webpage.

<script src="js/modernizr.js"></script>

Include the style sheet v1.css (slide fade animation) or v2.css (Twist Degree animation) into the head section.

<link rel="stylesheet" href="css/v1.css">

Create an html list for the fullscreen slideshow.

<ul class="modernizr-slideshow">
  <li><span>Image 01</span><div><h4>1</h4></div></li>
  <li><span>Image 02</span><div><h4>2</h4></div></li>
  <li><span>Image 03</span><div><h4>3</h4></div></li>
  <li><span>Image 04</span><div><h4>4</h4></div></li>
  <li><span>Image 05</span><div><h4>5</h4></div></li>
</ul>

Replace the background images with yours.

.modernizr-slideshow li:nth-child(1) span { background-image: url(1.jpg) }
.modernizr-slideshow li:nth-child(2) span { background-image: url(2.jpg) }
...
.modernizr-slideshow li:nth-child(5) span { background-image: url(5.jpg) }