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…
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 slideshows 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.
conditional
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 considerations 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 
Hageland 23.jun.2015
17.sep.2016 - minor revision to reflect slight CSS changes.
07.oct.2016 - updated HTML/CSS for keyboard tabbing.
last rev: 07.oct.2016