Чӣ тавр сохторро барои баннер ташкил кардан мумкин…

Баннер метавонад бо истифода аз HTML, CSS ва JavaScript амалӣ карда шавад. Сохтори HTML элементҳои банерро муайян мекунад, CSS намуди зоҳирии онҳоро муайян мекунад ва JavaScript рафторро идора мекунад, масалан, иваз кардани тасвирҳо ё анимация.

Сохтори 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">Пешина</button>
    <button class="next-button">Баъдӣ</button>
  </div>
  <div class="banner-pagination">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

banner-container: Қуттии барои ҳамаи унсурҳои банер.
banner-image: Унсурҳои тасвирҳои банер. Класи active нишон медиҳад, ки кадом тасвир ҳоло нишон дода мешавад.
banner-controls: Қуттии барои тугмаҳои роҳнамоӣ.
prev-button, next-button: Тугмаҳо барои иваз кардани тасвирҳо.
banner-pagination: Қуттии барои нишондиҳандаҳои саҳифа (чопҳо).
dot: Нишондиҳандаи саҳифа. Класи active нишон медиҳад, ки кадом саҳифа ҳоло фаъол аст.

Услубҳои CSS:

.banner-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Пинҳон кардани тасвирҳое, ки намоиш дода намешаванд */
}

.banner-image {
  position: absolute; /* ҷойгир кардани тасвирҳо дар якҷоягӣ */
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* Тасвирҳо дар ҳолати пешфарз пинҳон */
  transition: opacity 0.5s ease-in-out; /* гузариши нарм */
}

.banner-image.active {
  opacity: 1; /* нишон додани тасвири фаъол */
}

.banner-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 1; /* болои тасвирҳо */
}

.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 (мисоли логикаи иваз кардани тасвирҳо):

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

// Автоматик гузариш (ихтиёрӣ)
// setInterval(nextImage, 5000);

Ин сохтор қобилияти эластикӣ ва танзимшаванда дорад. Мумкин аст, ки унсурҳои иловагӣ, мисли матн, пайвандҳо, нишондиҳандаҳои боркунӣ ва таъсирҳои анимация илова карда шаванд.

Чӣ тавр сохторро барои баннер ташкил кардан мумкин аст?