Bir afiş için yapıyı nasıl organize edersiniz?

HTML, CSS ve JavaScript kullanarak bir afiş (banner) oluşturulabilir. HTML yapısı afişin öğelerini belirler, CSS görünümünü ayarlar ve JavaScript ise davranışını, örneğin resim değiştirme veya animasyonları yönetir.

HTML yapısı:

<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: Tüm afiş öğelerini içeren kapsayıcı.
• banner-image: Afiş resim öğeleri. active sınıfı şu an gösterilen resmi belirtir.
• banner-controls: Navigasyon düğmeleri için kapsayıcı.
• prev-button, next-button: Resimleri değiştiren düğmeler.
• banner-pagination: Sayfa göstergeleri (noktalar) için kapsayıcı.
• dot: Bir sayfa göstergesi. active sınıfı şu anki sayfayı gösterir.

CSS stilleri:

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Gösterilmeyen resimleri gizler */
}

.banner-image {
  position: absolute; /* Resimleri üst üste yerleştirir */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* Resimleri varsayılan olarak gizler */
  transition: opacity 0.5s ease-in-out; /* Yumuşak geçiş */
}

.banner-image.active {
  opacity: 1; /* Aktif resmi gösterir */
}

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

.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 (resim değiştirme mantığı örneği):

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

// Opsiyonel: otomatik geçiş
// setInterval(nextImage, 5000);

Bu yapı, afişin esnekliğini sağlar ve özelleştirmeye imkan tanır. Ek öğeler eklenebilir, örneğin metinler, bağlantılar, yükleme göstergeleri ve çeşitli animasyon efektleri.