Slider JavaScript

3889

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

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.