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: 1280px;
    margin: auto;
}

#slider > img {
    height: 700px;
}

#precedent, #suivant {
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0;
    position: absolute;
    top: 300px;
    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é.

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.

var slide = new Array("foret-peuplier.jpg", "paysage-montagne.jpg", "chemin-automne.jpg", "prairie-alpes.jpg");
var 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 🙂

Articles connexes

jQuery jQuery est une bibliothèque qui permet de simplifier la programmation JavaScript afin d'interagir plus efficacement avec l'utilisateur et d'animer plus facilement des contenus. ...
Programmation évènementielle Il est possible de programmer des réactions suite à des actions de l'internaute. Les actions des utilisateurs sont appelées évènement. Voici quelques exemples : Clic sur u...
Langage JavaScript Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou très élaborés comme un jeu ou une application. Ce langage est gé...
JavaScript dans les liens Code JavaScript dans l'attribut href Une URL peut désigner du code JavaScript. Le principe est simple, mettez le préfixe javascript: suivi de votre code JavaScript. Exemple ave...
Contrôle des formulaires avec JavaScript Contrôle d'un formulaire de contact avec l'évènement submit Voici un exemple où le JavaScript bloque l'action du formulaire tant que les champs ne sont pas valides. Quelqu...

Laisser un commentaire

Votre adresse de messagerie 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.