====== 2.1.4. Slideshows ======

===== Purpose =====

A slideshow is a scrollable content panel that fits into a small space.

They generally include a system of pagination, navigation arrows, and/or a system for pausing or advancing the content in the case of a slideshow with automatic scrolling.

With regards to accessibility, two types of slideshow can be distinguished:
  - Slideshows with automatic scrolling.
  - Slideshows with manual scrolling.

===== BasicHTML code =====

An example of the basic HTML code for both types of slideshow is shown below. This code should be modified according to the context, especially with respect to the content of the panels.

<code html>
<ul id="slideshow">
    <li class="panel" id="panel-1">
        Content of panel 1.
    </li>
    <li class="panel" id="panel-2">
        Content of panel 2.
    </li>
    <li class="panel" id="panel-3">
        Content of panel 3.
    </li>
</ul>
</code>

Without JavaScript, all the panels are displayed.

<note>
**Note**

The recommendations to follow when writing the JavaScript code will vary according to whether you require an automatic scrolling slideshow or not.</note>

===== Behaviour with JavaScript for slideshows with automatic scrolling =====

The scripts must handle the following points: 
  * An element for pausing or restarting the movement of the slideshow is included in the DOM, before the content of the panels.
  * The ''title'' of this element changes dynamically according to whether the slideshow is paused or scrolling.
  * The panels that are not displayed on the screen are moved outside the screen with the CSS ''position: absolute;'' and ''left: -999999px;''. They are not hidden with ''display: none;''.
  * Then, if the panels contain interactive elements, a script handles the navigation with the keyboard:
    * Only the content of the active panel is tabulable. To obtain this, apply a ''tabindex="0"'', or delete the ''tabindex'' attribute on all the interactive elements contained in the panel (links, buttons, form fields, etc.). 
    * To prevent the focus being set on the content of panels that are not displayed on the screen, a ''tabindex="-1"'' is applied on all the interactive elements contained in these panels. 
    * This behaviour is applied each time that a new panel is displayed. 

The resulting code with JavaScript is as follows: 

<code html>
<button id="pause-play">Pause</button>
 
<ul id="slideshow">
    <li class="panel" id="panel-1">
        Content of panel 1 (hidden) with <a href="#" tabindex="-1">a link</a>.
    </li>
    <li class="active-panel panel" id="panel-2">
        Content of panel 2 with <a href="#">a link</a>.
    </li>
    <li class="panel" id="panel-3">
        Content of panel 3 (hidden) with <button tabindex="-1">a button </button>.
    </li>
</ul>
</code>

<note>**Note**

This code should be modified according to the context, especially if the pause button is an image. You would then need a code similar to this: 

<code html>
<button id="pause-play"><img src="images/pause.png" alt="Pause" /></button>
</code></note>

<note attention>**Warning**

The pausing system (in this case, the “Play/Pause” button) must always be inserted in the DOM before the elements it interacts with, whatever its position on the screen.
</note>

===== Behaviour with JavaScript for slideshows with manual scrolling =====

The scripts must handle the following points:
  * An element for displaying the previous panel is included in the DOM, before the content of the panels.
  * An element for displaying the following panel is included in the DOM, after the content of the panels.
  * The panels that are not displayed on the screen are hidden using CSS with the property ''display: none;''.

The resulting code in JavaScript is as follows:

<code html>
<button id="previous">Previous</button>
 
<ul id="slideshow">
    <li class="panel" id="panel-1">
        Content of panel 1 (hidden).
    </li>
    <li class="active-panel panel" id="panel-2">
        Content of panel 2.
    </li>
    <li class="panel" id="panel-3">
        Content of panel 3 (hidden).
    </li>
</ul>
 
<button id="next">Next</button>
</code>

<note>**Note**

This code should be modified according to the context, especially if the “Previous” and “Next” buttons are images. In this case you need a code similar to the one below:

<code html>
<button id="previous"><img src="images/previous.png" alt="Previous" /></button>
 
[...]
 
<button id="next"><img src="images/next.png" alt="Next" /></button>
</note>

===== Démonstration =====

Démonstration à venir.