Vanilla JavaScript-如何在滑块中添加动态点？

Question

我正在创建一个滑块，修改W3School的一个，我需要添加动态点。

因此，基于幻灯片，添加点，一旦单击它们，它们将转到右侧的幻灯片，并且该点将处于激活状态。

我所做的就是获取幻灯片的长度，然后在每张幻灯片上，创建一个新的<li>标签，并将其附加到HTML的controller div中。

但是，这似乎不起作用。

这是codepen：https://codepen.io/Aurelian/pen/MBjjBa?editors=0010

HTML：

<span class="slider-btn-prev">PREV</span>
<span class="slider-btn-next">NEXT</span>
<div class="controls">
</div>
<section class="slider ">
  <div class="slider--inner">
    <!-- <img src="http://via.placeholder.com/1750x450"> -->
    <ul class="slider-container">
      <li class="slider-item">
        <div class="slider-caption">
          <h2 class="slider-item__title">Mexican Grill</h2>
          <div>
            <ul class="slider-details">
              <li class="slider-caption__info">
                <i class="fa fa-cutlery"></i>
                <a href="" rel="tag">For Family</a>
              </li>
              <li class="slider-caption__info">
                <i class="fa fa-clock-o"></i>
                <a href="" rel="tag">30 min</a>
              </li>
              <li class="slider-caption__info">
                <i class="fa fa-user"></i> by Dorota
              </li>
            </ul>
          </div>
          <a class="btn btn--carousel" href="single-recipte.html">View Recipt</a>
        </div>
      </li>
      <!-- /item -->
      <li class="slider-item showing">
        <div class="slider-caption">
          <h2 class="slider-item__title">Olive Meals</h2>
          <div>
            <ul class="slider-details">
              <li class="slider-caption__info">
                <i class="fa fa-cutlery"></i>
                <a href="" rel="tag">For Family</a>
              </li>
              <li class="slider-caption__info">
                <i class="fa fa-clock-o"></i>
                <a href="" rel="tag">15 min</a>
              </li>
              <li class="slider-caption__info">
                <i class="fa fa-user"></i> by Dorota
              </li>
            </ul>
          </div>
          <a class="btn btn--carousel" href="single-recipte.html">View Recipt</a>
        </div>
      </li>
      <li class="slider-item">
        <div class="slider-caption">
          <h2 class="slider-item__title">Rosted Chicken</h2>
          <div>
            <ul class="slider-details">
              <li class="slider-caption__info">
                <i class="fa fa-cutlery"></i>
                <a href="" rel="tag">For Family</a>
              </li>
              <li class="slider-caption__info">
                <i class="fa fa-clock-o"></i>
                <a href="" rel="tag">75 min</a>
              </li>
              <li class="slider-caption__info">
                <i class="fa fa-user"></i> by Dorota
              </li>
            </ul>
          </div>
          <a class="btn btn--carousel" href="single-recipte.html">View Recipt</a>
        </div>
      </li>
    </ul>
  </div>
</section>

JavaScript：

document.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slider-item'),
    currentSlide = 0,
    slideInterval = setInterval(nextSlide, 6500);

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }

  // slides.forEach(function(dot) {
  //      var controls = document.querySelector('.controls');
  //      dot.document.createElement("li");
  //      controls.appendChild(dots);
  //  });

  //   for (var i = 0; i < slides.length; i++) {
  //     var controls = document.querySelector('.controls');
  //     var dots = slides[i].document.createElement("li");
  //     controls.appendChild(dots);
  // };

  function nextSlide() {
    goToSlide(currentSlide + 1);
  }

  function previousSlide() {
    goToSlide(currentSlide - 1);
  }

  function goToSlide(n) {
    slides[currentSlide].className = 'slider-item';
    currentSlide = (n + slides.length) % slides.length;
    slides[currentSlide].className = 'slider-item showing';
  }

  var slideBtnNext = document.querySelector(".slider-btn-next"),
    slideBtnPrev = document.querySelector(".slider-btn-prev");


  slideBtnNext.addEventListener('click', function() {
    nextSlide();
  });

  slideBtnPrev.addEventListener('click', function() {
    previousSlide();
  });
});