truenial-slideshow

truenial-slideshow, is a non bloated slideshow for web pages, written from scratch in 2023. It is non interactive. It will just cycle trough a set of images.

I wanted a small slideshow, without 17 different transaction available when I only needed a simple fade between images. Also, most of the other slideshow components out there have been around since the first browser war, and they have a lot of code for handling all kinds of oddities in the browsers back then, which is not applicable today.

The name comes from the 19th century invention Triunial magic latern, which was a projector that could fade between three different pictures. However, this one do not have a limit on three images. It is built in a somewhat logical programming language. Hence, I thought the name "True-nial" would work, for a simple slideshow program, which can fade between any number of images.

I did try implementing it in CSS animations only, but, as of early 2023, I think this is only possible if the number of images are fixed. I have looked into counters and variables, and various techniques, but I have come to the conclusion that it is not possible to have a generic solution for any number of slides.

Instead it is written in Javascript. But contrary to many other Javascript slideshow components, this one will not scale images and setup everything for you. But that is for a reason. I think a webpage should work without Javascript. Javascript should only be used to enhance the experience. There should at least be some basic functionality, even when JavaScript is not running, or when printing a page on paper, etc.

Therefor you have to:

• Set up a container for the slideshow.
• Stack the images in the container.
• Make sure that all images are scaled.
• Hide all images, by using opacity, expect the first one.

When doing it like this, it will look perfectly fine even without Javascript.

Sample HTML:

<script src="slideshow.js"></script>
<div class="slideshow">
  <img src="vangogh.jpg" alt="">
  <img src="selfie.jpg" alt="">
  <img src="lenashat.jpg" alt="">
  <img src="cat.jpg" alt="">
</div>

Sample CSS:

.slideshow
  {
  position: relative;
  width: 330px;
  height: 220px;
  --slideshow-interval: 6s;
  --slideshow-fade: 1.5s;
  --slideshow-curve: 5;
  }

.slideshow img
  {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.0;
  }

.slideshow img:first-child
  {
  opacity: 1.0;
  }

Yes, it is possible to adjust the interval between changing image, in seconds, by using --slideshow-interval as shown above. The time a transition takes can be adjusted, in seconds, with --slideshow-fade. And finally, the transition can be linear or S-shaped, by adjusting --slideshow-curve . A value of 0, will give a linear transformation. A higher value will give more of an S-shape. Values between 0 and 10 is recommended. Note that a very S-shaped transformation can make the transformation time seems short.

In theory, it should be possible to use other element than img for the slides, like svg-images, divs with text, or just colored divs.

The Javacript:

truenial-slideshow.js