slideshow revisited

circular simplicity in action.

The slideshow described hereunder has been upgraded and improved a couple of times since this page was first launched. All to make it more user friendly.
As few of the upgrades are immediately visible, a re-read followed by a run-through is recommended.

Expands following slides and makes blocked video/audio files contained herein usable.

Keeping a sharp eye on everything in the area…
…making sure nothing of importance slips by.

Sketch is a looping CSS slideshow for inserting additional content and whatnot almost anywhere in a page.
I came up with Sketch for a project, and now I am trying (very hard) to find suitable uses for it on my own site.

Sketch and its child-elements do of course pick up site‐wide styles. Thus, it is pretty easy to match everything to existing site design.
Not much CSS behind the slideshow function itself, and no script – it is a pure CSS slideshow.

Sketch does for instance work well to embed a number of videos on a page without having them take up too much screen-space.

the lighthouse tale

Tweaking video‐container's height in steps for different video width/height ratios.

No serious limitations for what can be served in Sketch.

Continuing to test Sketch to find practical uses for this form of looping CSS slide‐show.
I can think of a few things it may come handy for, so I think I'll keep it.

Could not be simpler… Approved

In all but a few details, the slideshow above is built using the same code and content as in the original simple CSS slideshow from a couple of years back. That's mainly because it can hardly be built any simpler and more efficient.

In a sense this is an anti-design presentation, as I am slowly getting tired of all the “clever” solutions I, and others, spend time on creating. In other words: I think I am mainly wasting time on trying to improve things … depressing.

Well, although the slideshow in isolation doesn't need any improvements, the site-wide design has changed enough to warrant a checkup and tuning of various additional solutions. Now it is time to give the slideshow such a checkup, and write down any changes.

slight upgrade

The slideshow stylesheet from 2013 has only been upgraded on a few points now in 2015. Older pages that rely on the same stylesheet, are, as far as I can determine, not affected negatively by these upgrades.

To accommodate a CSS slide-counter, the way present and later input was hidden oroginally, had to be changed. Using display:none means that input is taken out of the counting-sequence, so now those inputs that are not in use are positioned off screen instead where they can be counted.

When the slide-counter is called for – using an additional class, the “slide #n” is positioned on the left part of a taller padding-top. The slide-input's visual background is then moved up to compensate, so only the regular content gets pushed down by the taller padding-top.

For “all slides open at once” to appear right, any background-image on outer container has to be stretched in height, and slides has to be vertically separated. This is now done.
Note that the slideshow expands vertically and pushes following content down when fully opened. Similarly, it shrinks vertically back to one-slide height when closed up again.
See also update pr 07.oct.2016 below.

A form for “initial slide” can be added at the end of the slide-stack, to have as visual default if no slide-input is :checked. Example of this is presented in the slideshow in side-notes.

To minimize noise in screen reader / AT environments, all inputs and other irrelevant elements in the slide­shows have the aria-hidden="true" added. The slides should be read sequentially in screen readers anyway – with some limitations (see below).

(07.oct.2016) An input=checkbox (v/aria-describedby) is added to allow users to expand (open) all slides without resorting to :target. This to allow video/​audio elements to be loaded but totally blocked (removed from tab-order) when not in view, and be fully usable when in view.
This checkbox falls into the natural keyboard tab-order above (in front of) slides.


As for all web design solutions, whether everything works as intended or not in an existing design, depends on many factors. As I prefer to put solutions like the slideshow into a regular page for testing, instead of in a dedicated test environment, there is always a chance that I may have overlooked something related to style-clashes. The basics should work OK though.

Whatever superfluous markup and CSS there is in the slideshow, is there to tune it to go with the present page/site design. All but the plainest designs require some consid­erations when injecting new solutions into them, and despite its simple appearance, my design, with its multitude of style-options, is anything but plain.

The slideshow will now be stress-tested, and if necessary cleaned up and/or upgraded some more in the near future. If this kind of stuff interests you, watch this space.

sincerely  georg; sign

Hageland 23.jun.2015
last rev: 07.oct.2016

www.gunlaug.comadvice upgradeadvice upgrade navigation