Slider JavaScript

Voici un code tout simple pour fabriquer un slider en JavaScript. Le principe est de changer la source des images en cliquant sur les flèches latérales.

Code HTML : slider.html

Au premier chargement de la page, le code HTML fait apparaître la première image du slider. Le slider est contenu dans une balise <div id="slider"> Qui contient l'image du premier slide suivi des flèches gauche et droite qui sont elles aussi des balises <div>.

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Slider</title>
    <link rel="stylesheet" href="slider.css">
    <script src="slider.js"></script>

</head>

<body>
    <h1>Le beau slider</h1>
    <div id="slider">
        <img src="foret-peuplier.jpg" alt="La forêt de peupliers" id="slide">
        <div id="precedent" onclick="ChangeSlide(-1)"><</div>
        <div id="suivant" onclick="ChangeSlide(1)">></div>
    </div>
</body>

</html>

Le code HTML est relié à une feuille de style externe slider.html et un code JavaScript externe slider.js.

Code CSS : slider.css

Le code CSS permet de centrer horizontalement le slider et de faire apparaître progressivement les flèches, lors du survol de la souris, grâce à la propriété transition qui va effectuer les changements d'opacité sur une durée de 300 millisecondes. Par conséquent, le survol du slider, fera apparaître les flèches en passante de l'opacity: 0 à 1 en 0.3 secondes.

body {
    font-family: "arial", sans-serif;
    text-align: center;
}

#slider {
    position: relative;
    width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
}

#precedent,
#suivant {
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0;
    position: absolute;
    font-size: 100px;
    color: rgba(220, 220, 220, 0.8);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
}

#precedent {
    left: 0;
}

#suivant {
    right: 0;
}

#slider:hover #precedent,
#slider:hover #suivant {
    opacity: 1;
}

Le conteneur #slider est en position relative, ce qui permet à ses enfants de se positionner en absolute par rapport à lui. Il ne faut pas oublier cette règle CSS : un positionnement absolute se fait toujours dans le cadre du premier bloc parent positionné. Les flèches seront donc plaquées contre les bords grâce au positionnement absolute.

Le centrage vertical des flèches et géré par les propriétés display: flex et align-items: center.

Code JavaScript : slider.js

Grâce aux évènements onclick sur les flèches latérales, le code JavaScript lance la fonction ChangeSlide() en passant le paramètre -1 pour la flèche gauche et 1 pour la flèche droite.

Pour ajouter un slide, il suffit de compléter la variable de type tableau slide en ajoutant un nom d'image correspondant au slide.

const slide = ["foret-peuplier.jpg", "paysage-montagne.jpg", "chemin-automne.jpg", "prairie-alpes.jpg"];
let numero = 0;

function ChangeSlide(sens) {
    numero = numero + sens;
    if (numero < 0)
        numero = slide.length - 1;
    if (numero > slide.length - 1)
        numero = 0;
    document.getElementById("slide").src = slide[numero];
}

Lorsque l'utilisateur clique sur la flèche suivante, le paramètre sens est égal à 1 et la variable numero est incrémentée. L'instruction conditionnelle if permet de vérifier qu'on ne dépasse pas le nombre d'images du slide. Et si on dépasse, on réinitialise la variable numero, ce qui permet de boucler le slider. slide.lenght permet de compter le nombre d'images du tableau slide. on retire -1 car la première image du slide est slide[0].

Slider JavaScript
Encore un slider magnifique inventé par LesDocs 🙂

Défilement automatique

Pour ajouter la fonctionnalité diaporama à notre slider, on peut ajouter la ligne JavaScript suivante :

setInterval("ChangeSlide(1)", 4000);

La méthode setInterval() va appeler la fonction ChangeSlide avec le paramètre 1 toutes les 4 secondes soit 4000 millisecondes. C'est un peu comme si quelqu'un cliquait sur la flèche de droite toutes les 4 secondes.

La vidéo

La fabrication de ce slider est expliquée en détail dans cette vidéo. Bon visionnage !

Il y a 19 commentaires pour cet article
  1. Stephane Nsiala at 12:51 pm

    Merci beaucoup; ton code m'a servi pour un site que je crée actellement, très simple, et bouffe moins d'espace par rapport à d'autres méthodes!
    J'aimerais partager quelques de vos articles ; thks encore!!

    stephaneblog.vortexpromo.com

  2. Tony at 9:20 am

    Bonjour,
    Tout d'abord merci pour ce code très simple mais efficaces. Je voudrais juste savoir si il est possible, tout en gardant cette méthode, de faire un défilement auto des images sans appuyer sur une des flèches. Et si oui, merci de me partager la ou les façon(s) de faire. Merci d'avance!

    • Guillaume at 5:30 pm

      Bonjour Tony,
      Merci pour ton commentaire. Concernant le défilement auto, c'est une bonne idée et j'ai ajoutée cette fonctionnalité à la fin de l'article.

  3. Robin at 1:13 pm

    Bonjour,
    Votre article m'a beaucoup aidé, est bien expliqué et est très simple à mettre en œuvre. Je me suis renseigné sur d'autre site internet et forum pour savoir comment rajouter des liens cliquables indépendant pour chaque image mais je n'ai rien trouvé de concluant pouvant marcher avec votre technique. Je voulais donc savoir si vous saviez s'il est possible de lier une URL spécifique pour chaque image et si oui comment ?
    Merci d'avance ^^

  4. Ayz at 9:56 am

    Bonjour,
    j'ai deux questions :
    -comment styler les transitions entre les images pour qu'elles apparaissent de façon plus douce,?
    -comment placer les imlages ailleurs qu'à la source?

    En tous cas merci pour ce slider.

  5. Clem2122 at 8:27 pm

    Bonjour,

    Je vous remercie, cet article est très didactique, clair, simple et efficace !

    C'est top la mise à jour de l'article avec le défilement auto.

  6. Toadlou at 9:13 am

    Bonjour,

    génial comme tuto !

    Mais comment faire pour mettre 2 sliders sur une même page ? Je m'y perds un peu après quelques essais 🙂

    Merci beaucoup en tout cas

  7. Clem2122 at 12:51 pm

    Bonjour,

    je souhaiterai faire évoluer le code pour que les images soient choisies en fonction de ma base de données.

    J'ai bien compris qu'il fallait une sorte de "pont" (comme JSON_ENCODE) pour utiliser mysql / php dans du javascript, mais je ne trouve pas la solution. Auriez-vous un moyen d'adapter ce code pour ? ou une solution à ce problème ?

    Merci.

    • Patrick at 12:09 pm

      "je souhaiterai faire évoluer le code pour que les images soient choisies en fonction de ma base de données. "

      Probablement en recréant l'array "slide" à partir d'une requête dans la table qui contient les noms de fichier....

    • Guillaume at 3:53 pm

      Merci ! Pour mettre les boutons en bas, vous pouvez modifier le code CSS en écrivant align-items: end à la place de align-items: center

  8. Philippe38 at 1:31 pm

    Bonjour,

    Bravo , superbe vidéo, le code est très bien expliqué et la solution est vraiment de qualité.
    Un très grand merci, j'ai appris plein de choses.

  9. Narimane at 9:49 am

    Bonjour,
    Merci beaucoup, vous m'avez bien aider ,super vidéo.
    je voulais juste savoir si je voulais que chaque slide contient une paragraphe comment je fais s'il vous plait!

  10. Girard at 1:17 pm

    Bonjour
    petite question : sur mon html mon image a une classe. Est ce que je peux quand même ajouter une id "slide" ?

    Merci de votre réponse

Répondre à Guillaume Cancel comment reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.