Slider d’image ou de contenu avec jQuery

Cours slider d’image ou de contenu avec jQuery, tutoriel & guide de travaux pratiques en pdf.

Pour commencer

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. A 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 fichiers, 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{}