How can I insert slide indicator dots in my slideshow?

Question

I have made a slideshow and I want to insert inside the images (on the bottom) slide indicator dots, but I don't know how... Can someone help me, please? Here is the code I've made for the slideshow:

 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

I believe Bootstrap may have an answer..

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

Answer 2

I have modified _slideTo method and added addDots method.

Have a look -> https://codepen.io/thesumit67/pen/mwxmRR