Content Switcher — Un diaporama qui fonctionne aussi sans Javascript

Content Switcher est un Slider avec un menu de navigation qui a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur. La version Javascript améliore l’ordinaire avec un effet de fading réalisé avec jQuery pour les transitions entre les slides. Le marquage HTML et les CSS sont très simples à mettre en place :

HTML

<div id="content-slider">
<ul id="content-slider-inside">
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
    <li id="five">5</li>
</ul>
</div>
<ul id="navigation">
    <li><a href="#one">1</a></li>
    <li><a href="#two">2</a></li>
    <li><a href="#three">3</a></li>
    <li><a href="#four">4</a></li>
    <li><a href="#five">5</a></li>
</ul>

CSS

#content-slider {
    width: 650px;
    overflow: hidden;
    height: 300px;
}

#content-slider-inside {
    list-style: none;
    height: 320px;  /* these 3 lines */
    overflow: scroll;   /* help Opera */
    overflow-y: hidden; /* behave */
}

#content-slider-inside li {
    width: 650px;
    height: 300px;
}

Content Switcher est basé sur le principes dans ancres internes, ce qui oblige à préciser les identifiants de chaque élément de la liste pour faire la correspondance avec les liens de la navigation.

Voir la démonstration de Content Switcher sans Javascript et avec jQuery.