Comment organiser la structure pour une bannière…

Un banner peut être réalisé en utilisant HTML, CSS et JavaScript. La structure HTML définit les éléments du banner, le CSS détermine leur apparence, et le JavaScript gère leur comportement, comme le changement d'images ou les animations.

Structure HTML :

<div class="banner-container">
  <img src="image1.jpg" alt="Banner Image 1" class="banner-image active">
  <img src="image2.jpg" alt="Banner Image 2" class="banner-image">
  <img src="image3.jpg" alt="Banner Image 3" class="banner-image">
  <div class="banner-controls">
    <button class="prev-button">Prev</button>
    <button class="next-button">Next</button>
  </div>
  <div class="banner-pagination">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

banner-container : Conteneur pour tous les éléments du banner.
banner-image : Éléments d'images du banner. La classe active indique l'image actuellement affichée.
banner-controls : Conteneur pour les boutons de navigation.
prev-button, next-button : Boutons pour changer d'image.
banner-pagination : Conteneur pour les indicateurs de page (points).
dot : Indicateur d'une page. La classe active indique la page courante.

Styles CSS :

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Cache les images non affichées */
}

.banner-image {
  position: absolute; /* Positionne les images les unes sur les autres */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* Cache les images par défaut */
  transition: opacity 0.5s ease-in-out; /* Transition douce */
}

.banner-image.active {
  opacity: 1; /* Affiche l'image active */
}

.banner-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 1; /* Au-dessus des images */
}

.banner-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 1;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

JavaScript (exemple de logique pour changer d'images) :

const images = document.querySelectorAll('.banner-image');
const dots = document.querySelectorAll('.dot');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');
let currentIndex = 0;

function showImage(index) {
  images.forEach((img, i) => {
    if (i === index) {
      img.classList.add('active');
    } else {
      img.classList.remove('active');
    }
  });
  dots.forEach((dot, i) => {
    if (i === index) {
      dot.classList.add('active');
    } else {
      dot.classList.remove('active');
    }
  });
}

function nextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

function prevImage() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
}

nextButton.addEventListener('click', nextImage);
prevButton.addEventListener('click', prevImage);

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentIndex = index;
    showImage(currentIndex);
  });
});

// Optionnel : changement automatique
// setInterval(nextImage, 5000);

Cette structure offre une flexibilité et permet de personnaliser le banner. Il est possible d'ajouter des éléments supplémentaires tels que du texte, des liens, des indicateurs de chargement et différents effets d'animation.

Comment organiser la structure pour une bannière?