Ever since I found it probably close to a year ago, I’ve been a big fan of the simple auto-playing slideshow on CSS-Tricks (though perhaps surprisingly I have yet to apply it to a Media Library Assistant-generated WordPress gallery). I’ve tweaked it multiple times to serve different purposes, and thought I’d share two.
The first tweak is more of a wrapper than a modification. It has two features: it loads the slideshow content via AJAX, and it has a small change to the CSS to smooth the beginning of the slideshow.
I wanted to load the slideshow dynamically so I could turn it off entirely on mobile, without a Very Helpful Browser loading the images in case they were used later, slowing down the site. The page itself had the slideshow as a banner header, and it was collapsed at small sizes, so I used its height as the test in the JavaScript. There was a #slideshow div which had a background image set in CSS (via a class JavaScript removed) in case someone’s JavaScript was disabled, and the slideshow images were in a separate file as naked HTML (though the file was .php for no particular reason) to be pulled in with jQuery.load().
As for the CSS, I found that trying to hide all but one image via CSS and have the JavaScript take over from there gave me a herky-jerky first transition. Instead, I hid everything in the CSS and used JavaScript to show the first image just as soon as the images were loaded up.
AJAXified slideshow JavaScript:
This and the JavaScript below need to be wrapped in a $(document).ready(function () { … }); to operate most smoothly.
CSS:
The second tweak makes it a double slideshow: question and answer. In situ it uses WordPress text widgets, the title for the question and the content for its answer, but you can do it with any paired elements. The code below assumes a div with both class and id slideshow-wrapper, holding divs with class slideshow-item, each holding a pair of divs: .question and .answer. There are two different timeframes. The loop moves from pair to pair, and within it the question appears first, then the answer, they stay put for a while for reading, and then both fade away.
The other change to this one is that there’s a lone single animation outside the setInterval loop. Your choices without this separate bit are to have both the question and the answer in view immediately upon loading the page, or to wait with blank space for the entire first interval.
Q&A slideshow JavaScript:
CSS:
Slide projector image by Jean-Jacques Milan via Wikimedia Commons
