Ինչպե՞ս կազմակերպել բանների կառուցվածքը։

Բաները կարող է իրականացվել 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);

Այս կառուցվածքը ապահովում է ճկունություն և հարմարեցման հնարավորություններ։ Կարող եք ավելացնել լրացուցիչ տարրեր, ինչպիսիք են տեքստը, հղումները, բեռնում ցուցիչները և տարբեր անիմացիոն էֆեկտներ։