Exercice : Slider

Nous allons maintenant réaliser un slider. C'est un exercice classique car en effet, d’innombrables sites de e-commerce possèdent des sliders sur leur page d'accueil. Partons de ce code HTML :

<div id="slider_JG">
    <a href="lien1"><img src="image1.jpg"/></a>
    <a href="lien2"><img src="image2.jpg"/></a>
    <a href="lien3"><img src="image3.jpg"/></a>
    <a href="lien4"><img src="image4.jpg"/></a>
</div>

Au niveau de la théorie, c'est plutôt simple, il faut autoriser la visibilité que d'une seule de ces 4 images. Cela est possible en modifiant le style de l'élément, comme les fichiers CSS le font. Vous verrez dans le code JavaScript suivant que le style est accessible en faisant elem.style.nomDuStyle = "valeur du style";

Donc, pour faire défiler une image, on va rendre l'image visible invisible, rendre la suivante visible, et puis exécuter ce code en boucle. On peut y ajouter des effets de transition en CSS et en modifiant la position de l'image à l'écran avant de le faire disparaître par exemple. Tout est possible. Voici un exemple de code opérationnel sur un projet réel existant :

 
//Définir les propriétés que l'on souhaite avoir pour notre slider.
var sec = 3;
var img_w = 1130;
var img_h = 300;
var ratio = img_w/img_h;
//stocker les images du slider dans un tableau "slides".
var slides = document.getElementById("slider_JG").getElementsByTagName("a");
//stocker la longueur du tableau, donc le nombre d'images.
var nb_slides = slides.length;
//imposer aux images la largeur indiquée plus haut.
for(var i = 0; i < nb_slides; i++){
    slides[i].getElementsByTagName("img")[0].style.width = img_w.toString() + "px";
}
//imposer une hauteur fixe au conteneur des images.
document.getElementById("slider_JG").style.height = img_h.toString() + "px";
//Position l'image à gauche de sa position relative.
//(une transition est présente en CSS pour animer le slider)
for(var i = 0; i < nb_slides; i++){
    slides[i].style.left = (Number(document.getElementById("slider_JG").offsetWidth)+10).toString() + "px";
}
//fonction qui permet de faire aparaître une image donnée en argument
//et de la faire disparaître après un certain temps.
function move_slide(elem){
    var img = slides[elem];
    img.style.zIndex = "2";
    img.style.visibility = "visible";
    setTimeout(function(){ img.style.left = "0px"; }, 200);
    setTimeout(function(){ img.style.zIndex = "0"; }, sec*1000-200);
    setTimeout(function(){ img.style.visibility = "hidden"; img.style.left = (Number(document.getElementById("slider_JG").offsetWidth)+10).toString() + "px"; }, sec*1000+1000);
}
//fonction qui permet d'animer tout le slider
function move_slides(){
    move_slide(track_slide%nb_slides);
    track_slide += 1;
    setTimeout(function(){ move_slides(); }, sec*1000);
}
//execution de la fonction permettant d'animer le slider
move_slides();

Ce code est grandement améliorable et ne peut pas être copié collé dans un projet puisqu'il a été utilisé et ajusté pour correspondre à un seul réel projet et à ses contraintes qui lui sont propre. Vous ne devez en retenir que le principe et le fonctionnement.

Vous pouvez noter l'utilisation de l'opération % dans la première ligne de la définition de la fonction move_slides. C'est l'opérateur modulo. Renseignez-vous dessus si vous le souhaitez, il est fort utile. Vous pouvez également notre que cette fonction s'appelle elle même toutes les 3 secondes, donc pour chaque passage d'image du slider et sans arrêt.

Si vous êtes confus, renseignez vous sur le modulo et lorsque vous aurez manuellement testé quelques cycles de la fonction, vous comprendrez ce qu'elle fait.