Créez un diaporama JavaScript interactif en 3 étapes simples

Si vous avez suivi notre guide sur la création d'un site web, vous cherchez peut-être à approfondir vos compétences. Réaliser un diaporama photo est une tâche accessible qui vous initiera à des techniques essentielles pour une carrière en programmation.

Aujourd'hui, découvrez comment bâtir un diaporama JavaScript from scratch. Suivons ces étapes !

Prérequis

Pour démarrer, assurez-vous d'avoir un navigateur web moderne et un éditeur de texte comme VS Code ou Sublime Text. Une connaissance de base en HTML, CSS, JavaScript et jQuery est recommandée.

Si nécessaire, consultez notre guide sur le DOM et nos astuces CSS. Pour jQuery, lisez notre introduction aux bases.

1. Premiers pas : la structure HTML

Ce diaporama inclut : prise en charge d'images, navigation, légendes et mode automatique.

1. Support des images
2. Contrôles de navigation
3. Légendes textuelles
4. Avancement automatique

Voici un croquis préparatoire :

La planification évite les erreurs courantes. Commencez par ce code HTML (sauvegardez-le en index.html) :

  
  
  
  


  

    

      
      
Moulin à vent
    
    

      
      
Plante
    
    

      
      
Chien
    
    
‹
    
›
  

Voici le rendu initial :

Ce squelette définit un conteneur principal (showContainer) avec des imageContainer uniques (id="im_1", etc.). Les boutons utilisent des entités HTML pour les flèches. Ajoutez vos images dans un dossier "Images" et adaptez les ids/noms si besoin.

2. Stylisation CSS

Ajoutez ce CSS dans les balises <style> pour un rendu professionnel :

html {
  font-family: Helvetica, Arial;
}
#showContainer {
  /* Conteneur principal */
  width: 670px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.navButton {
  /* Boutons de navigation */
  cursor: pointer;
  float: left;
  width: 25px;
  height: 22px;
  padding: 10px;
  margin-right: 5px;
  overflow: hidden;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 18px;
  background: #000000;
  opacity: 0.65;
  user-select: none;
}
.navButton:hover {
  opacity: 1;
}
.caption {
  float: right;
}
.imageContainer:not(:first-child) {
  /* Masque toutes les images sauf la première */
  display: none;
}

Rendu après CSS :

Ce CSS centre le diaporama (adapté à des images 670x503px), stylise les boutons (opacité, hover, curseur pointeur) et masque les images excédentaires via :not(:first-child). Redimensionnez vos images pour une cohérence optimale.

3. Logique JavaScript avec jQuery

Ajoutez ce script dans les balises <script> :

$(document).ready(function() {
  $('#previous').on('click', function() {
    // Image précédente
    $('#im_' + currentImage).stop().fadeOut(1);
    decreaseImage();
    $('#im_' + currentImage).stop().fadeIn(1);
  });
  $('#next').on('click', function() {
    // Image suivante
    $('#im_' + currentImage).stop().fadeOut(1);
    increaseImage();
    $('#im_' + currentImage).stop().fadeIn(1);
  });
  var currentImage = 1;
  var totalImages = 3;
  function increaseImage() {
    currentImage++;
    if (currentImage > totalImages) {
      currentImage = 1;
    }
  }
  function decreaseImage() {
    currentImage--;
    if (currentImage < 1) {
      currentImage = totalImages;
    }
  }
});

Variables clés : currentImage (image actuelle) et totalImages (adaptez au nombre d'images). Les fonctions gèrent le bouclage. Les événements cliquent masquent/réaffichent via fadeIn/fadeOut et stop() pour fluidité.

Avancement automatique

Ajoutez ce code après les fonctions pour un timer :

window.setInterval(function() {
  $('#next').click();
}, 2500);

Avance toutes les 2,5s (2500ms). Ajustez le délai selon vos besoins.

Prochain défi : essayez GatsbyJS ou Vue.js pour des sites avancés. Comparez Jekyll et Gatsby si vous explorez Ruby.

Crédit image : Tharanat Sardsri via Shutterstock.com