skip to content

CSS: Upgraded fading slideshow

 Tweet0 Tweets

This is a rewrite of our previous Fading slideshow with a touch of JavaScript script making it easier to use and taking advantage of new JavaScript ES6 syntax.

The new version allows for any HTML elements to be used within each slide and the layout will not break if they have different dimensions.

Demonstration

Here you can see a working version of the slideshow rotating through a stack of eight photos as before, with a couple of minor changes:

The foremost slide undergoes a fading transition, after which it's moved to the bottom of the stack, and the process repeats. This time we've shrunk a couple of the photos and they will display centred in the frame.

HTML source code

The difference here is that the slideshow is now marked up as an unordered list with each slide contained by a list item.

<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="180" height="135"></a></li> <li><a href="3.jpg"><img src="3.jpg" width="270" height="200"></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>

This means that we don't have to alter the JavaScript if we add or remove links around the images, and can even use other HTML elements and constructs as slides, because HTML5 allows DIV and other elements to be children of list items.

CSS styles

The CSS has a few changes from the previous example. Each slide is now a list item, and we are setting them to position: absolute, with overflow: hidden, and using Flexbox to center the contents horizontally and vertically:

<style> @keyframes fader { from { opacity: 1.0; } to { opacity: 0.0; } } .fading-slideshow { position: relative; margin: 1em auto; padding: 0; list-style-type: none; width: 360px; height: 270px; } .fading-slideshow > li { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; display: flex; justify-content: center; align-items: center; } /* current slide */ .fading-slideshow > li:first-of-type { animation-name: fader; animation-delay: 2s; 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>

There is also a white background on the slide list items to prevent the lower slides becoming visible if the foremost is smaller in size.

JavaScript code

In the JavaScript code we've taken advantage of the new querySelector and querySelectorAll methods, which can be combined with NodeList.forEach to great effect. On top of that we've also used the ES6 arrow notation for functions:

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

That's right, you didn't miss it. That's the entire code. Our slideshow can be powered by a single line of JavaScript, with no variables!

The end result is as before, whenever a slide completes its fader transition, the animationend event handler rotates it to the bottom of the stack.

This version of the code will not work in Internet Explorer or older browsers, but could be rewritten using polyfills if such support was required.

Multiple slideshows on a page

Actually, we don't need to do any more. We're already there. Without any changes, we can create more slideshows on the page by simply adding a new list with the fading-slideshow class.

Here is an example, this time using a combination of text and images:

The same single line of JavaScript and some CSS styling is all that you need.

Feel free to use this code in your projects and let us know if you have any comments or questions using the feedback option below.

< JavaScript

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