Slider JavaScript avec effet de transition
Pour compléter le code du slider JavaScript, j'ajoute un effet de transition fondu entre chaque slide. Cette opération va grandement adoucir et embellir le rendu du slider mais elle va aussi compliquer sa programmation.
Principe
Le fonctionnement du slider se décompose en quelques étapes. Au départ, deux images sont empilées, l'une au-dessus de l'autre. L'utilisateur ne voit que celle du dessus :
- L'utilisateur clique sur une des flèches latérales.
- La source de la nouvelle image est déterminée en fonction du clic sur la flèche gauche ou droite.
- La nouvelle image est positionnée au dessous en changeant sa source.
- L'image du dessus devient progressivement transparente pour laisser apparaître celle du dessous.
Code HTML : slider.html
La balise <div id="slider"> contient les deux images empilées <img id="slide_dessus"> et <img id="slide_dessous">.
Au premier chargement de la page, apparaît la première image du slider survolée par des flèches gauche et droite dessinées par les balises <div id="suivant"> et <div id="precedent">.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="slider.css">
<title>Le beau slider</title>
</head>
<body>
<h1>Le beau slider</h1>
<div id="slider">
<img src="slides/chemin.webp" alt="Paysage" id="slide_dessus">
<img src="slides/coucher-de-soleil.webp" alt="Paysage" id="slide_dessous">
<div id="precedent" onclick="ChangeSlide(-1)"><</div>
<div id="suivant" onclick="ChangeSlide(1)">></div>
</div>
<script src="slider.js"></script>
</body>
</html>Le code HTML est relié à une feuille de style externe slider.css et un code JavaScript externe slider.js.
Code CSS : slider.css
La feuille de style externe centre horizontalement le slider et fait apparaître progressivement les flèches latérales lors du survol de la souris. La propriété transition effectue les changements d'opacité sur une durée de 300 millisecondes grâce à la propriété opacity dont la valeur passe de 0 à 1 en 0.3 secondes.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
font-family: 'Poppins', sans-serif;
text-align: center;
}
#slider {
position: relative;
width: 1280px;
margin: auto;
display: flex;
align-items: center;
}
#slide_dessous,
#slide_dessus {
position: relative;
top: 0;
}
#slide_dessus {
z-index: 1;
}
#slide_dessous {
z-index: 0;
left: -100%;
}
#precedent,
#suivant {
position: absolute;
font-size: 100px;
background-color: rgba(0, 0, 0, 0.7);
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
opacity: 0;
z-index: 2;
transition: opacity 0.3s ease;
}
#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, les flèches latérales, de se positionner en absolute par rapport à lui. 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 positionnement des flèches, à gauche et à droite et géré par la propriété display: flex qui insère de l'espace entre les éléments. Le centrage vertical s'effectue grâce à la propriété align-items: center.
Code JavaScript : slider.js
Grâce à l'évènement 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 suffira de compléter le tableau slide en ajoutant la source d'une image déposée dans le sous-dossier slider. La déclaration du tableau slide revient à écrire :
slide[0]="chemin.webp"slide[1]="coucher-de-soleil.webp"slide[2]="foret-peuplier.webp"slide[3]="prairie-montagne.webp"
Au départ, l'opacité du slide du dessus est réglée au maximum avec la valeur 1. Lorsqu'on cliquera sur une flèche, c'est l'image du dessous qui changera en modifiant sa source, par exemple : slide_dessous.src = "slides/coucher-de-soleil.webp".
Ensuite, on rend progressivement l'image du dessus transparente avec les méthodes style.transitionDuration et style.opacity. La méthode setTimeout() permet d'attendre pendant une seconde que l'image du dessus devienne totalement transparente.
const slide = ["chemin.webp", "coucher-de-soleil.webp", "foret-peuplier.webp", "prairie-montagne.webp"];
let numero = 0;
// Durée de l'apparition et disparition de l'image en millisecondes
const duree = 1000;
const slide_dessus = document.getElementById("slide_dessus");
const slide_dessous = document.getElementById("slide_dessous");
slide_dessus.style.opacity = 1;
function ChangeSlide(sens) {
// console.log(slide_dessus.style.opacity);
if (slide_dessus.style.opacity == 1) {
numero = numero + sens;
if (numero > slide.length - 1) numero = 0;
if (numero < 0) numero = slide.length - 1;
// On positionne la nouvelle image au dessous
slide_dessous.src = "slides/" + slide[numero];
// L'image du dessus devient transparente et laisse apparaître la nouvelle image située au dessous
slide_dessus.style.transitionDuration = String(duree) + "ms";
slide_dessus.style.opacity = 0;
setTimeout(apparait, duree);
}
}
function apparait() {
// L'image d'arrière plan passe au premier plan et on la rend opaque
slide_dessus.src = "slides/" + slide[numero];
slide_dessus.style.transitionDuration = "0ms";
slide_dessus.style.opacity = 1;
}
// Diaporama
setInterval("ChangeSlide(1)", 4000);Une fois l'image du dessus transparente, on appelle la fonction apparait() qui fait ces deux actions :
- L'image du dessus devient identique à celle du dessous en changeant sa source.
- L'image du dessus devient immédiatement opaque en réglant la propriété transitionDuration à 0 millisecondes et opacity à 1.
A ce stade, les deux images empilées ont exactement la même source. Il n'y a plus qu'à attendre un nouveau clic de l'utilisateur sur les flèches latérales pour relancer la fonction ChangeSlide().
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.
