Differences
This shows you the differences between two versions of the page.
|
notices:interfaces-riches-javascript:carrousels-slideshows [30 April 2013 at 16:05] cbeghin |
notices:interfaces-riches-javascript:carrousels-slideshows [13 August 2013 at 14:39] (current) Sébastien Delorme (Atalan) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== 2.1.4. Carousels (slideshows) ====== | + | ====== 2.1.4. Slideshows ====== |
| ===== Purpose ===== | ===== Purpose ===== | ||
| - | A carousel or slideshow is a scrollable content panel that fits into a small space. | + | 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 carousel with automatic scrolling. | + | 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 carousel can be distinguished: | + | With regards to accessibility, two types of slideshow can be distinguished: |
| - | - Carousels with automatic scrolling. | + | - Slideshows with automatic scrolling. |
| - | - Carousels with manual scrolling. | + | - Slideshows with manual scrolling. |
| ===== BasicHTML code ===== | ===== BasicHTML code ===== | ||
| - | An example of the basic HTML code for both types of carousel is shown below. This code should be modified according to the context, especially with respect to the content of the panels. | + | 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> | <code html> | ||
| - | <ul id="carousel"> | + | <ul id="slideshow"> |
| <li class="panel" id="panel-1"> | <li class="panel" id="panel-1"> | ||
| Content of panel 1. | Content of panel 1. | ||
| Line 34: | Line 34: | ||
| **Note** | **Note** | ||
| - | The recommendations to follow when writing the JavaScript code will vary according to whether you require an automatic scrolling carousel or not.</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 carousels with automatic scrolling ===== | + | ===== Behaviour with JavaScript for slideshows with automatic scrolling ===== |
| The scripts must handle the following points: | The scripts must handle the following points: | ||
| - | * An element for pausing or restarting the movement of the carousel is included in the DOM, before the content of the panels. | + | * 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 carousel is paused or scrolling. | + | * 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;''. | * 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: | * Then, if the panels contain interactive elements, a script handles the navigation with the keyboard: | ||
| Line 52: | Line 52: | ||
| <button id="pause-play">Pause</button> | <button id="pause-play">Pause</button> | ||
| - | <ul id="carousel"> | + | <ul id="slideshow"> |
| <li class="panel" id="panel-1"> | <li class="panel" id="panel-1"> | ||
| Content of panel 1 (hidden) with <a href="#" tabindex="-1">a link</a>. | Content of panel 1 (hidden) with <a href="#" tabindex="-1">a link</a>. | ||
| Line 78: | Line 78: | ||
| </note> | </note> | ||
| - | ===== Behaviour with JavaScript for carousels with manual scrolling ===== | + | ===== Behaviour with JavaScript for slideshows with manual scrolling ===== |
| The scripts must handle the following points: | The scripts must handle the following points: | ||
| Line 90: | Line 90: | ||
| <button id="previous">Previous</button> | <button id="previous">Previous</button> | ||
| - | <ul id="carousel"> | + | <ul id="slideshow"> |
| <li class="panel" id="panel-1"> | <li class="panel" id="panel-1"> | ||
| Content of panel 1 (hidden). | Content of panel 1 (hidden). | ||
