Pure CSS Fullscreen Slideshow With Fancy Animations

Category: CSS & CSS3 , Slideshow | September 18, 2015
Author: brifiction
Views Total: 2,847 views
Official Page: Go to website
Last Update: September 18, 2015
License: MIT

Preview:

Pure CSS Fullscreen Slideshow With Fancy Animations

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) }

You Might Be Interested In:


Leave a Reply