title: How do I put the slideshow selector dots on top of the image?
body: <p>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. </p>
  
  <p>So far I have tried removing the div and adjusting the position but that isn't working for me. </p>
  
  <p>Below is the code and here is a <a href="https://codepen.io/jeremylucas/pen/jOOaZZd" rel="nofollow noreferrer">Codepen</a>. 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 <code>&lt;span class="dot"</code> on top of the image</p>
  
  <p>Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; slides.length) {slideIndex = 1}    
    if (n &lt; 1) {slideIndex = slides.length}
    for (i = 0; i &lt; slides.length; i++) {
        slides[i].style.display = "none";  
    }
    for (i = 0; i &lt; dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* SLIDESHOW */
  #slideshow {
    height: 400px;
    width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
  }
  #slideshow img {
    height: 400px;
    width: 100%;
  }
  
  /* Next &amp; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slideshow"&gt;
    &lt;div class="mySlides fade"&gt;
      &lt;img src="https://picsum.photos/1600/400"&gt;
    &lt;/div&gt;
    &lt;div class="mySlides fade"&gt;
      &lt;img src="https://picsum.photos/1600/400"&gt;
    &lt;/div&gt;
    &lt;div class="mySlides fade"&gt;
      &lt;img src="https://picsum.photos/1600/400"&gt;
    &lt;/div&gt;
    &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
    &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div style="text-align:center"&gt;
    &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt; 
    &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt; 
    &lt;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt; 
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>