…are built with our regular components, but there are some special requirements due to their multi-layered nature. For the images we can use the same multiple aspect-ratio picture/srcset setup, and we can overlay text and interaction with .imgteaser-content. Just plain images are fine, too.
The only requirement is that these images have to match the aspect ratios of the #slides container, because the whole thing uses absolute positioning. 16:9 for desktop, 1:1 for tablet and 2:3 for mobile. It can be changed in res/scss/_slideshow.scss
This section also can be moved underneath the header bar by adding the .intro class to the outer #slides container like here. The left/right controls can be switched off by changing controls[i].style.display = 'inline-flex'; to 'none' in line 3 of the script.
Missing or DIY: more positioning options for content inside the slides, which is potentially endless as are any contrast-aware features for text on picture backgrounds. These should be adjusted to the real environment where they appear.
Slideshow structure as shown above
<section class="intro" id="slides">
<div class="co-1 img-fill slide showing">
<picture> … </picture>
<div class="imgteaser-content col top"> … </div>
</div>
<div class="co-1 img-fill slide">
<picture> … </picture>
<div class="imgteaser-content col top"> … </div>
</div>
…
<buttons> etc. as play/pause controls go here
</section>
<footer> </footer>
<script> should be placed at the end
I‘m not quite sure where the script originally came from, and how much of it has been changed. Maybe from sitepoint.com, but I guess from an even older, simpler version. If you plan to make it more accessible and production-ready you should absolutely read the whole article from 2016.
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history