如何在幻灯片中插入幻灯片指示点？

Question

我制作了幻灯片，我想在图像内部（在底部）插入滑动指示器点，但我不知道如何......有人可以帮助我吗？以下是我为幻灯片制作的代码：

html,
body {
  margin: 0;
  padding: 0;
}

.slider {
  width: 100%;
}

.slider-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
}

.slide {
  float: left;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 3s linear;
}

.slider-wrapper>.slide:first-child {
  opacity: 1;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 480px) {
  img {
    max-height: 300px
  }
  .prev,
  .next {
    top=30%
  }
}

<div class="slider" id="main-slider">
  <!-- outermost container element -->
  <div class="slider-wrapper">
    <!-- innermost wrapper element -->
    <img src="http://lorempixel.com/1024/400/animals" alt="First" class="slide" style="width:100%" />
    <!-- slides -->
    <img src="http://lorempixel.com/1024/400/business" alt="Second" class="slide" style="width:100%" />
    <img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" style="width:100%" />
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

<script type="text/javascript">
  (function() {

    function Slideshow(element) {
      this.el = document.querySelector(element);
      this.init();
    }

    Slideshow.prototype = {
      init: function() {
        this.wrapper = this.el.querySelector(".slider-wrapper");
        this.slides = this.el.querySelectorAll(".slide");
        this.previous = this.el.querySelector(".slider-previous");
        this.next = this.el.querySelector(".slider-next");
        this.index = 0;
        this.total = this.slides.length;
        this.timer = null;
        this.nextButton = this.el.querySelector(".next");
        this.prevButton = this.el.querySelector(".prev");

        this.action();
        this.stopStart();
        this.nextSlide();
        this.prevSlide();
      },
      _slideTo: function(slide) {
        var currentSlide = this.slides[slide];
        currentSlide.style.opacity = 1;

        for (var i = 0; i < this.slides.length; i++) {
          var slide = this.slides[i];
          if (slide !== currentSlide) {
            slide.style.opacity = 0;
          }
        }
      },
      action: function() {
        var self = this;
        self.timer = setInterval(function() {
          self.index++;
          if (self.index == self.slides.length) {
            self.index = 0;
          }
          self._slideTo(self.index);

        }, 10000);
      },
      stopStart: function() {
        var self = this;
        self.el.addEventListener("mouseover", function() {
          clearInterval(self.timer);
          self.timer = null;

        }, false);
        self.el.addEventListener("mouseout", function() {
          self.action();

        }, false);
      },
      nextSlide: function() {
        var self = this;
        self.nextButton.addEventListener("click", function() {
          clearInterval(self.timer);
          self.timer = null;
          self.index++;
          if (self.index == self.slides.length) {
            self.index = 0;
          }
          self._slideTo(self.index);

        });
      },
      prevSlide: function() {
        var self = this;
        self.prevButton.addEventListener("click", function() {
          clearInterval(self.timer);
          self.timer = null;
          self.index--;
          if (self.index == -1) {
            self.index = self.slides.length - 1;
          }

          self._slideTo(self.index);

        });
      }


    };

    document.addEventListener("DOMContentLoaded", function() {

      var slider = new Slideshow("#main-slider");

    });


  })();
</script>

Answer 1

我相信Bootstrap可能有答案..

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Answer 2

我修改了_slideTo方法并添加了addDots方法。

看看 - ＆gt; https://codepen.io/thesumit67/pen/mwxmRR