如何将幻灯片选择器点放在图像顶部？

Question

Via w3 schools, I was able to make this slideshow and add it and make it work on my webpage. Everything is running smoothly except for the locations of the buttons. Currently they are within their own div, but I'm wanting them to be on top of the image in the bottom center.

So far I have tried removing the div and adjusting the position but that isn't working for me.

Below is the code and here is a Codepen . The actual slide may not work in the example (just finding this out now while entering the snippet), but I'm just looking on how to position the 3 dots of the <span class="dot" on top of the image

Thanks in advance!

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } 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"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }

 /* SLIDESHOW */ #slideshow { height: 400px; width: 100%; position: relative; margin: auto; overflow: hidden; } #slideshow img { height: 400px; width: 100%; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.4s ease; border-radius: 0 3px 3px 0; user-select: none; } /* 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); } /* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; }.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }

 <div id="slideshow"> <div class="mySlides fade"> <img src="https://picsum.photos/1600/400"> </div> <div class="mySlides fade"> <img src="https://picsum.photos/1600/400"> </div> <div class="mySlides fade"> <img src="https://picsum.photos/1600/400"> </div> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>

Answer 1

Put the dots at the bottom of the #slideshow div with a parent div with a classname of "dots". Then add this css to the "dots" div.

.dots {
  width: 100px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -50px;
}