Cum să organizezi structura pentru un banner?

Se poate realiza un banner folosind HTML, CSS și JavaScript. Structura HTML definește elementele bannerului, CSS stabilește aspectul acestora, iar JavaScript gestionează comportamentul, cum ar fi schimbarea imaginilor sau animațiile.

Structura 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: Container pentru toate elementele bannerului.
• banner-image: Elementele imagini ale bannerului. Clasa active indică imaginea afișată în prezent.
• banner-controls: Container pentru butoanele de navigare.
• prev-button, next-button: Butoane pentru schimbarea imaginilor.
• banner-pagination: Container pentru indicatorii de pagină (pete).
• dot: Indicator pentru o pagină. Clasa active indică pagina curentă.

Stiluri CSS:

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Ascunde imaginile care nu sunt afișate */
}

.banner-image {
  position: absolute; /* Poziționează imaginile una peste alta */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* Ascunde imaginile implicit */
  transition: opacity 0.5s ease-in-out; /* Tranziție lină */
}

.banner-image.active {
  opacity: 1; /* Afișează imaginea activă */
}

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

.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 (exemplu de logică pentru schimbarea imaginilor):

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);
  });
});

// Opțional: schimbare automată
// setInterval(nextImage, 5000);

Această structură asigură flexibilitate și posibilitatea de personalizare a bannerului. Se pot adăuga elemente suplimentare, precum text, link-uri, indicatori de încărcare și diferite efecte de animație.