skip to content

Fading Slideshow for HTML5 and ES6

 Tweet0 Tweets

Here we present an upgraded, more flexible, version of our Fading Slideshow taking advantage of HTML5's flexibility on list mark-up and new JavaScript ES6 functionality.

This will likely not work in Internet Explorer.

New HTML markup

HTML5 allows us to use <li> elements as containers for almost anything. Wheras before we were limited to inline or inline-block elements, now we can insert <div> and other block elements under each <li>:

<ul class="fading-slideshow"> <li><a href="1.jpg"><img src="1.jpg" width="360" height="270"></a></li> <li><a href="2.jpg"><img src="2.jpg" width="360" height="270"></a></li> <li><a href="3.jpg"><img src="3.jpg" width="360" height="270"></a></li> <li><a href="4.jpg"><img src="4.jpg" width="360" height="270"></a></li> <li><a href="5.jpg"><img src="5.jpg" width="360" height="270"></a></li> <li><a href="6.jpg"><img src="6.jpg" width="360" height="270"></a></li> <li><a href="7.jpg"><img src="7.jpg" width="360" height="270"></a></li> <li><a href="8.jpg"><img src="8.jpg" width="360" height="270"></a></li> </ul>

Another improvement is that we're using a class to identify the slideshow rather than an id. This allows for multiple slideshows to appear on the same page (though why anyone would want that is another question).

CSS styles

The CSS has not changed much from the earlier version. Only to remove bullet points and padding from the <ul> and to reference the class:

<style> @keyframes fader { from { opacity: 1.0; } to { opacity: 0.0; } } .fading-slideshow { margin: 1em auto; padding: 0; width: 382px; height: 292px; list-style-type: none; } .fading-slideshow > li { position: absolute; } /* current slide */ .fading-slideshow > li:nth-of-type(1) { animation-name: fader; animation-delay: 4s; animation-duration: 1s; z-index: 20; } /* next slide to display */ .fading-slideshow > li:nth-of-type(2) { z-index: 10; } /* all other slides */ .fading-slideshow > li:nth-of-type(n+3) { display: none; } </style>

As you can see, we are now animating the <li> elements rather than the <a> or <img> which should make it simpler to implement for different types of content.

Upgraded JavaScript (ES6)

ECMAScript 6 (ES6 for short) provides new tools for identifying and looping through HTML elements. Here we are adding en event listener to every slideshow <li> element that takes a 'faded out' element and moves it down to the bottom of the stack:

<script> // Original JavaScript code by Chirp Internet: chirpinternet.eu // Please acknowledge use of this code by including this header. window.addEventListener("DOMContentLoaded", function(e) { const fadeComplete = function(e) { e.target.parentNode.appendChild(e.target); }; document.querySelectorAll(".fading-slideshow > li").forEach(function(current) { current.addEventListener("animationend", fadeComplete, false); }); }, false); </script>

Believe it or not, the above code is sufficient to operate any number of slideshows on the page simultaneously, as shown below.

Working Example

And that's it! With the code in place, any <ul> on the page can be turned into an animated slideshow by just adding the appropriate class.

< CSS

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

Post your comment or question
top