Créer un diaporama en HTML/CSS/JS

Par Nouvelle-Techno.fr le 20 avril 2020 - Catégories : Javascript Tutoriel

Lire l'article sur le site d'origine

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

#Tutoriel #Javascript #css #html #html5 #css3 #ES6