Код IT
← Каталог

Виджеты интерфейса на ванильном JavaScript — createIndicators() — не дублировать HTML

Фрагмент из «Виджеты интерфейса на ванильном JavaScript»: createIndicators() — не дублировать HTML.

JavaScript main.js
createIndicators() {
  if (!this.indicatorsHost) return;

  this.indicatorsHost.innerHTML = '';
  this.indicators = [];

  for (let i = 0; i < this.slideCount; i++) {
    const dot = document.createElement('button');
    dot.type = 'button';
    dot.setAttribute('data-carousel-dot', '');
    dot.setAttribute('aria-label', `Слайд ${i + 1}`);

    dot.addEventListener('click', () => {
      this.goToSlide(i);
      this.resetAutoplay();
    });

    this.indicatorsHost.appendChild(dot);
    this.indicators.push(dot);
  }
}
createIndicators() {
  if (!this.indicatorsHost) return;

  this.indicatorsHost.innerHTML = '';
  this.indicators = [];

  for (let i = 0; i < this.slideCount; i++) {
    const dot = document.createElement('button');
    dot.type = 'button';
    dot.setAttribute('data-carousel-dot', '');
    dot.setAttribute('aria-label', `Слайд ${i + 1}`);

    dot.addEventListener('click', () => {
      this.goToSlide(i);
      this.resetAutoplay();
    });

    this.indicatorsHost.appendChild(dot);
    this.indicators.push(dot);
  }
}