Slider d'image ou de contenu avec jQuery

Tout d'abord, vous aurez besoin de contenu, celui-ci doit être englobé dans une div contenant une liste non ordonnée. Chaque élément de cette liste est une vue.
Voici un exemple :

<div id="slider">
    <ul>
        <li>contenu ici...</li>
        <li>contenu ici...</li>
        <li>contenu ici...</li>
        ...
    </ul>
</div>

Vous pouvez mettre tout ce que vous voulez dans la liste du moment que vous gardez les mêmes dimensions.
À la base, je voulais faire une galerie d'image comme sur la page d'accueil de Templetica mais je l'ai aussi utilisé pour d'autres choses.
Pour activer le script, il faudra télécharger les fichiersTélécharger, les placer dans un répertoire de votre site (par exemple /js/) et les intégrer à votre page :

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider.js"></script>

Vous n'avez plus qu'à ajouter ces lignes dans votre code JavaScript :

$(document).ready(function(){
    $("#slider").easySlider();
});

Cela initialise le script au chargement de la page, avec « #slider » le sélecteur CSS de l'élément (ou des éléments) auquel vous voulez l'appliquer. Vous pouvez aussi l'affecter à plusieurs éléments en utilisant leur nom de classe : $('.list').easySlider();

Ensuite, vous pouvez ajouter des styles à votre convenance. Voici à quoi ressemblent les styles par défaut :

#slider ul, #slider li
{
    margin:0;
    padding:0;
    list-style:none;
}
 
#slider, #slider li
{ 
    width:500px;
    height:200px;
    overflow:hidden; 
}
 
span#prevBtn{}
 
span#nextBtn{}

Pas grand-chose à vrai dire… L'essentiel ici est de conserver les mêmes dimensions entre la zone de contenu et les éléments de la liste. De même, overflow: hidden; est obligatoire. À part cela, vous êtes libres d'utiliser vos propres styles comme vous le souhaitez. Pour vous donner une idée de ce qu'il est possible de faire, allez voir la page d'accueil de Templetica.

Le script ajoute automatiquement les boutons « précédent » et « suivant » dans des span avec de faux liens juste après la zone de contenu. Ces span possèdent des id afin de pouvoir leur affecter des styles :

<span id="prevId"><a href="javascript:void(0);">Suivant</a></span> 
<span id="nextBtn"><a href="javascript:void(0);">Précédent</a></span>

À chaque clic (boutons précédent ou suivant), le script calcule la position courante et avance d'un cran dans la direction voulue. Ainsi, le slider va d'une vue à l'autre. Lorsqu'on arrive à la fin (dernière vue), le bouton « suivant » s'efface et ne réapparait que lorsque le bouton « précédent » est cliqué. Le fonctionnement est le même dans l'autre sens.

Les options suivantes sont configurables :

Oui, vous avez bien lu, vous pouvez aussi faire défiler verticalement !

Les options sont ajoutées en appelant le script :

$(document).ready(function(){ 
    $("#slider").easySlider({
        prevText: 'Précédent',
        nextText: 'Suivant',
        orientation: 'vertical'
    });
});

Voici quelques pages de démonstration pour voir le script en action. Ces démos n'ont pas de style particulier.

• Défilement d'images avec options par défaut
• Défilement vertical d'images
• Défilement vertical de texte

Pour voir un exemple avec des styles élaborés, allez sur Templatica.

Parce qu'il est simple et léger (ce n'est pas qu'un mot !) je crois qu'il est plus facile à utiliser et à configurer. L'apparence est complètement configurable en CSS, donc tous ceux qui ne se sentent pas à l'aise avec le code JavaScript peuvent facilement l'utiliser.