Temps de lecture : 19 minutes environ.
Nous allons voir dans ce tutoriel une des multiples façons de créer un diaporama en HTML/CSS et Javascript (Vanilla).
Dans l'exemple ci-dessous nous allons intégrer chacun des "écrans" du diaporama directement dans le HTML. Chacun d'entre eux est composé d'une image et d'un bloc de texte (titre et paragraphe). Le diaporama est également équipé de deux flèches permettant d'aller à la diapo suivante ou à la précédente.
Le HTML
Le code HTML sera donc le suivant
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
<!-- Fichiers CSS -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<main>
<h1>Diaporama</h1>
<!-- Conteneur principal de tout le diaporama -->
<div class="diapo">
<!-- Conteneur des "diapos" -->
<div class="elements">
<!-- Première diapo -->
<div class="element active">
<img src="images/index-slide01.jpg" alt="Image 1">
<div class="caption">
<h2>Image 1</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
</div>
</div>
<!-- Deuxième diapo -->
<div class="element">
<img src="images/index-slide02.jpg" alt="Image 2">
<div class="caption">
<h2>Image 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
</div>
</div>
<!-- Troisième diapo -->
<div class="element">
<img src="images/index-slide03.jpg" alt="Image 3">
<div class="caption">
<h2>Image 3</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
</div>
</div>
<!-- Quatrième diapo -->
<div class="element">
<img src="images/index-slide02.jpg" alt="Image 2">
<div class="caption">
<h2>Image 4</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, saepe.</p>
</div>
</div>
</div>
<!-- Flèches de navigation -->
<i id="nav-gauche" class="las la-chevron-left"></i>
<i id="nav-droite" class="las la-chevron-right"></i>
</div>
</main>
<!-- Fichiers JS -->
<script src="js/scripts.js"></script>
</body>
</html>
Le CSS
Le CSS permettra d'aligner les différents éléments dans la zone de diaporama, de placer les flèches et les textes aux emplacements souhaités.
Le diaporama
Nous commencerons par mettre la propriété "position: relative" sur le diaporama et retirer les éléments qui "dépassent"
.diapo{
position: relative;
overflow: hidden;
}
Les flèches
Nous plaçons ensuite les flèches à droite et à gauche respectivement
#nav-droite, #nav-gauche{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 3em;
}
#nav-droite{
right: 20px;
}
#nav-gauche{
left: 20px;
}
Les éléments
Nous positionnons ensuite les éléments côte à côte au moyen d'une flexbox et nous plaçons le texte au centre de chaque élément.
.elements{
display: flex;
transition: 1s linear;
}
.element{
flex: 1 0 100%;
position: relative;
}
.element > img{
width: 100%;
}
.caption{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(255,255,255,0.4);
padding: 30px;
}
Le Javascript
Une fois le diaporama prêt, il nous reste à l'animer.
Nous allons commencer par aller chercher dans notre page les différents éléments dont nous aurons besoin
// On récupère le conteneur principal du diaporama
const diapo = document.querySelector(".diapo")
// On récupère le conteneur de tous les éléments
elements = document.querySelector(".elements")
// On récupère un tableau contenant la liste des diapos
slides = Array.from(elements.children)
// On récupère les deux flèches
let next = document.querySelector("#nav-droite")
let prev = document.querySelector("#nav-gauche")
Nous aurons également besoin de variables globales comme ci-dessous
// Variables globales
let compteur = 0 // Compteur qui permettra de savoir sur quelle slide nous sommes
let timer, elements, slides, slideWidth
Dans la variable "slideWidth" nous allons stocker la largeur visible du diaporama
// On calcule la largeur visible du diaporama
slideWidth = diapo.getBoundingClientRect().width
Les flèches
Nous allons placer deux écouteurs d'évènements, un sur chaque flèche, pour gérer le déplacement
// On met en place les écouteurs d'évènements sur les flèches
next.addEventListener("click", slideNext)
prev.addEventListener("click", slidePrev)
Ensuite, nous créons les deux fonctions de défilement
/**
* Cette fonction fait défiler le diaporama vers la droite
*/
function slideNext(){
// On incrémente le compteur
compteur++
// Si on dépasse la fin du diaporama, on "rembobine"
if(compteur == slides.length){
compteur = 0
}
// On calcule la valeur du décalage
let decal = -slideWidth * compteur
elements.style.transform = `translateX(${decal}px)`
}
/**
* Cette fonction fait défiler le diaporama vers la gauche
*/
function slidePrev(){
// On décrémente le compteur
compteur--
// Si on dépasse le début du diaporama, on repart à la fin
if(compteur < 0){
compteur = slides.length - 1
}
// On calcule la valeur du décalage
let decal = -slideWidth * compteur
elements.style.transform = `translateX(${decal}px)`
}
Automatisation
Nous utiliseront un intervalle, stocké dans la variable "timer" pour faire défiler le diaporama toutes les 4 secondes
// Automatiser le diaporama
timer = setInterval(slideNext, 4000)
Cette automatisation a un inconvénient, elle ne s'arrête jamais, même lorsque nous cliquons sur une flèche.
Nous allons donc mettre en place un arrêt au survol du diaporama.
// Gérer le survol de la souris
diapo.addEventListener("mouseover", stopTimer)
diapo.addEventListener("mouseout", startTimer)
/**
* On stoppe le défilement
*/
function stopTimer(){
clearInterval(timer)
}
/**
* On redémarre le défilement
*/
function startTimer(){
timer = setInterval(slideNext, 4000)
}
Responsive
Enfin, nous mettons en place le redimensionnement du diaporama en cas de changement de taille de la fenêtre en recalculant la largeur.
// Mise en oeuvre du "responsive"
window.addEventListener("resize", () => {
slideWidth = diapo.getBoundingClientRect().width
slideNext()
})
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat
Visualisez les fichiers de cet article sur GitHub
