Baner üçün strukturu necə təşkil etmək olar?

Baneri HTML, CSS və JavaScript istifadə edilərək həyata keçirilə bilər. HTML strukturu baner elementlərini müəyyən edir, CSS onların görünüşünü tənzimləyir və JavaScript davranışını idarə edir, məsələn, şəkillərin dəyişdirilməsi və ya animasiya.

HTML strukturu:

<div class="banner-container">
  <img src="image1.jpg" alt="Baner Şəkli 1" class="banner-image active">
  <img src="image2.jpg" alt="Baner Şəkli 2" class="banner-image">
  <img src="image3.jpg" alt="Baner Şəkli 3" class="banner-image">
  <div class="banner-controls">
    <button class="prev-button">Əvvəlki</button>
    <button class="next-button">Növbəti</button>
  </div>
  <div class="banner-pagination">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

• banner-container: Bütün baner elementləri üçün konteyner.
• banner-image: Baner şəkillərinin elementləri. active sinfi hazırda göstərilən şəkli göstərir.
• banner-controls: Nəzarət düymələri üçün konteyner.
• prev-button, next-button: Şəkilləri dəyişdirmək üçün düymələr.
• banner-pagination: Səhifə göstəriciləri üçün konteyner.
• dot: Səhifənin göstəricisi. active sinfi hazırkı səhifəni göstərir.

CSS üslubları:

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Göstərilməyən şəkilləri gizlətmək */
}

.banner-image {
  position: absolute; /* Şəkilləri bir-birinin üzərinə yerləşdirmək */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* Şəkilləri default olaraq gizlətmək */
  transition: opacity 0.5s ease-in-out; /* Yumuşaq keçid */
}

.banner-image.active {
  opacity: 1; /* Aktiv şəkli göstərmək */
}

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

.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 (şəkil dəyişdirmə loqikasının nümunəsi):

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

// Avtomatik keçid (istəyə bağlı)
// setInterval(nextImage, 5000);

Bu struktur çevikliyi təmin edir və banerin konfiqurasiyasını asanlaşdırır. Əlavə elementlər, məsələn, mətn, linklər, yükləmə göstəriciləri və müxtəlif animasiya effektləri əlavə oluna bilər.