Slider jQuery

Voici le code d'un slider jQuery léger comme une plume et soigné aux petits oignons par votre serviteur. La bibliothèque jQuery nous gratifie de ses apparitions et disparitions progressives avec les méthodes fadeIn() et fadeOut(). Le principe de ce slider consiste à superposer deux slides : l'un disparait progressivement pendant que le suivant apparait progressivement.

Code HTML : slider.html

Le code HTML dispose toutes les images du slider contenues dans un <div id="slider">.

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

<head>
    <meta charset="utf-8">
    <title>Slider</title>
    <link rel="stylesheet" href="slider.css">
    <script src="https://code.jquery.com/jquery-latest.js"></script>


</head>

<body>
    <h1>Le magnifique slider</h1>
    <div id="slider">
        <img src="slide1.jpg" id="slide1">
        <img src="slide2.jpg" id="slide2">
        <img src="slide3.jpg" id="slide3">
        <img src="slide4.jpg" id="slide4">
        <div id="precedent" id="precedent"><</div>
        <div id="suivant" id="suivant">></div>
    </div>
    <script src="slider.js"></script>
</body>

</html>

Code CSS : slider.css

Le code CSS utilise le positionnement absolute pour superposer les quatre slides contenus dans le <div id="slider"> parent positionné en relative et centré dans la page avec des marges élastiques.

Au départ, les slides 2, 3 et 4 sont masqués grâce à la propriété display: none. Ces derniers sont néanmoins préchargés dans le cache du navigateur. Seul le slide 1 apparait. Je précise que la résolution des slides est de 1200 x 400 pixels. Libre à vous d'adapter le code CSS si vous changez ces valeurs.

La pseudo classe :hover appliquée au <div id="slider"> fait apparaitre ou disparaitre les flèches latérales pour déclencher le défilement du slider.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

#slider {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#slide1, #slide2, #slide3, #slide4 {
    position: absolute;
    top: 0;
    left: 0;
}

#slide2, #slide3, #slide4 {
    display: none;
}

#precedent, #suivant {
    z-index: 1;
    transition: opacity 0.5s ease;
    font-size: 75px;
    font-weight: 100;
    position: absolute;
    top: 160px;
    background-color: rgba(0, 0, 0, 0.6);
    color: rgb(220, 220, 220, 0.6);
    opacity: 0;
    cursor: pointer;
}

#precedent {
    left: 0;
}

#suivant {
    right: 0;
}

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

Code jQuery : slider.js

Le code jQuery capte les clics sur les flèches latérales. Lorsque qu'on clique sur une des flèches, on fait disparaitre progressivement le slide actuel, puis on détermine le numéro du slide à faire apparaitre progressivement.

let numero = 1;
const duree = 1000;
const nombreSlides = 4;

// Si on clique sur la flèche "suivant"
$("#suivant").click(function () {

    // On fait disparaitre le slide actuel
    $("#slide" + numero).fadeOut(duree);

    // On fait apparaitre le slide suivant (numero + 1)
    numero = numero + 1;
    // Si le numéro est supérieur au nombre de slides alors le numéro est égal à 1
    if (numero > nombreSlides) {
        numero = 1;
    }
    $("#slide" + numero).fadeIn(duree);

});

// Si on clique sur la flèche "precedent"
$("#precedent").click(function () {

   // On fait disparaitre le slide actuel
    $("#slide" + numero).fadeOut(duree);

    // On fait apparaitre le slide précédent (numero - 1)
    numero = numero - 1;
    // Si le numéro est inférieur à 0 alors le numéro est égal au nombre de slide
    if (numero < 1) {
        numero = nombreSlides;
    }
    $("#slide" + numero).fadeIn(duree);

});

Le résultat sera aussi magnifique que ce paysage :

Slider jQuery

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.