format: pandoc
# A simple but effective slideshow in javascript


<div class="slideshow" style="float:right">
   <img src="YYYiZZZ/w_findent.png"   alt="findent">
   <img src="YYYiZZZ/w_software.png"  alt="software"  style="display:none">
   <img src="YYYiZZZ/w_xpenguins.png" alt="xpenguins" style="display:none">
   <img src="YYYiZZZ/w_xsnow.png"     alt="xsnow"     style="display:none">
   <img src="YYYiZZZ/w_logo.png"      alt="logo"      style="display:none">
</div>

<style>
   .slideshow
   {
      background-size: 160px 80px;
      margin: 1em;
   }
   .slideshow img
   {
      width: 160px;
      height: 80px;
   }
   .fadeout
   {
      animation:fadeout 1000ms;animation-fill-mode: forwards; }@keyframes fadeout{0%{opacity:1}100%{opacity:0};
   }
</style>

<script>
carousel("slideshow",time=3000);
</script>

<span style="visibility:hidden;word-wrap:normal;">_________________________________________</span>


## Introduction

There are many nice javascripts to generate a slideshow on your
web pages, that's for sure. So why another one?

As it turns out, I could not find a simple slideshow generator with the following
properties:

* The slideshow goes exactly to the location where an 'img' appears,
irrespective of the size, css properties 'float:left/right' and so on
* The slides must fade-in and fade-out in a eye-pleasing way

So, I decided to re-invent the wheel again.

## My slideshow program

Inspired by some articles on the Web, I created a very simple piece
of javascript which does the following:

1. Show the current picture in the background
2. When it is time, put the current picture in the foreground
3. Put the next picture in the background
4. Fade-out the current picture
5. The next picture is now the current picture
6. Goto 2 ([Be aware](YYYdZZZ/varia/Dijkstra68.pdf))

### Design decisions

* There must be a &lt;div&gt; ore something like that with an unique
class name
* Directly in this &lt;div&gt; the images are defined by &lt;img&gt; tags

For example:

    <div class="slides">
       <img src="../pics/one.jpg">
       <img src="../pics/two.jpg"   style="display:none">
       <img src="../pics/three.jpg" style="display:none">
       .....
    </div>

The slideshow is then started with:

    <script>
       carousel("slides",3000); /* 3 seconds delay between slides */
    </script>

If for some reason the script does not run, the first picture is shown,
the others are not displayed.

The script is so simple, that it should be easy to adapt it to other
requirements. 

## Limitations

Because of the chosen procedure, the pictures and corresponding backgrounds 
must have exactly the same dimensions (width and height).

## Complete example

There is a complete example [here](slideshow.html). After opening the example
in your browser, you can have a look at the source, everything you need
to try it yourself is there.

The example also shows how to take care of narrow (cell-phone) screens and shows
a trick to prevent that the browser is trying to put text in a too-narrow area.

