Kā organizēt struktūru banerim?

Banera var īstenot, izmantojot HTML, CSS un JavaScript. HTML struktūra nosaka banera elementus, CSS nosaka to izskatu, bet JavaScript pārvalda to uzvedību, piemēram, mainot attēlus vai izmantojot animāciju.

HTML struktūra:

<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: ietver visus banera elementus.
• banner-image: banera attēla elementi. Klase active norāda uz pašreizējo attēlu.
• banner-controls: navigācijas pogu konteineris.
• prev-button, next-button: pogas attēlu pārslēgšanai.
• banner-pagination: lapas indikatoru konteineris.
• dot: atsevišķa lapas indikators. Klase active norāda uz pašreizējo lapu.

CSS stili:

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* paslēpt neparādāmos attēlus */
}

.banner-image {
  position: absolute; /* novieto attēlus vienu virs otra */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* sākotnēji paslēpt attēlus */
  transition: opacity 0.5s ease-in-out; /* gluda pāreja */
}

.banner-image.active {
  opacity: 1; /* parādīt aktīvo attēlu */
}

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

.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 (piemērs, kā pārslēgt attēlus):

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

// Automātiska pārslēgšana (pēc izvēles)
// setInterval(nextImage, 5000);

Šī struktūra nodrošina elastību un pielāgošanas iespējas banerim. Var pievienot papildu elementus, piemēram, tekstu, saites, ielādes indikatorus un dažādus animācijas efektus.