title: "Place dots" in HTML/CSS/JS slideshow
body: <p>I'm trying to make a slideshow with those little navigation or placeholder dots along the bottom - the slideshow itself is working, but in the minimal example here, there's only one dot showing up at the bottom. I can't figure out what I'm doing wrong - researched, left it for a couple days and came back to it, now time for a question...</p>
  
  <p>Here's the code I'm working with:</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-html lang-html prettyprint-override"><code>    &lt;html&gt;
          &lt;head&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
              &lt;style&gt;
                  html {
                      background-color: lightblue;
                  }
                  body {
                      width:1024px;
                      height:768px;
                      margin-left: auto;
                      margin-right: auto;
                      border-style: solid;
                      background: lightgreen;
                      position: relative;
                  }
                  div#banner{
                      position: absolute;
                      top:50px;
                      width: 100%;
                      height: 120px;
                      background: pink;
                      text-align: center;
                      padding-top: 0px;
                      padding-bottom: 0px;
                      font-size:1.5em;
                  }
                  div#minibanner{
                      position: absolute;
                      top:0px;
                      height:50px;
                      width: 100%;
                      background: orange;
                      text-align: center;
                  }
                  div#slideContainer {
                      position:absolute;
                      left:200px;
                      top:170px;
                      height:558px;
                      width:794px;
                      padding-top: 30px;
                      padding-left:30px;
                      font-size: 2em;
                      background: yellow;
                  }
                  div#sidenav{
                      position: absolute;
                      top:170px;
                      left:0px;
                      width: 200px;
                      height:558px;
                  }
                  .contentSlide{
                      display: none;
                  }
                  div#bottomnav{
                      position: absolute;
                      bottom:0px;
                      height:40px;
                      width: 100%;
                      background: pink;
                      text-align: center;
                  }
                  .dot {
                    position:absolute;
                    bottom:60px;
                    cursor: pointer;
                    height: 15px;
                    width: 15px;
                    margin: 22px 22px; 
                    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;
                  }
                  @-webkit-keyframes fade {
                    from {opacity: .4} 
                    to {opacity: 1}
                  }
                  
                  @keyframes fade {
                    from {opacity: .4} 
                    to {opacity: 1}
                  }
                  .prev, .next {
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    width: auto;
                    padding: 16px;
                    margin-top: -22px;
                    color: red;
                    font-weight: bold;
                    font-size: 18px;
                    transition: 0.6s ease;
                    border-radius: 0 3px 3px 0;
                    user-select: none;
                  }
                  .next {
                    right: 0;
                    border-radius: 3px 0 0 3px;
                  }
                  .prev {
                      left:0;
                  }
                  .prev:hover, .next:hover {
                    background-color: rgba(0,0,0,0.8);
                  }
              &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="minibanner"&gt;&lt;h3&gt;Title of Presentation: testing, testing testing&lt;/h3&gt;&lt;/div&gt;
              &lt;div id="banner"&gt;&lt;h1&gt;Introduction&lt;/h1&gt;&lt;/div&gt;
              &lt;div id="sidenav"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="../../index.html"&gt;home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Introduction&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Section 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Section 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Section 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="slideContainer"&gt;
                  &lt;div class="contentSlide fade"&gt;
                      &lt;p&gt;Here's an outline:
                          &lt;ul&gt;
                              &lt;li&gt;Introduction&lt;/li&gt;
                              &lt;li&gt;Section 1&lt;/li&gt;
                              &lt;li&gt;Section 2&lt;/li&gt;
                              &lt;li&gt;Section 3&lt;/li&gt;
                              &lt;li&gt;Conclusion&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="contentSlide fade"&gt;
                      &lt;p&gt;Here are some themes:
                          &lt;ul&gt;
                              &lt;li&gt;Theme 1&lt;/li&gt;
                              &lt;li&gt;Theme 2&lt;/li&gt;
                              &lt;li&gt;Theme 3&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;            
                  &lt;div class="contentSlide fade"&gt;
                      &lt;p&gt;...and the conclusions:
                          &lt;ul&gt;
                              &lt;li&gt;Conclusion A&lt;/li&gt;
                              &lt;li&gt;Conclusion B&lt;/li&gt;
                              &lt;li&gt;Conclusion C&lt;/li&gt;
                              &lt;li&gt;Conclusion D&lt;/li&gt;
                              &lt;li&gt;Conclusion E&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/p&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;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;
              &lt;div id="bottomnav"&gt;&lt;p&gt;footer&lt;/p&gt;&lt;/div&gt;
              &lt;script&gt;
                  var slideIndex = 1;
                  showSlides(slideIndex);                
                  // Next/previous controls
                  function plusSlides(n) {
                      showSlides(slideIndex += n);
                  }
                  // Thumbnail image controls
                  function currentSlide(n) {
                      showSlides(slideIndex = n);
                  }
                  function showSlides(n) {
                      var i;
                      var slides = document.getElementsByClassName("contentSlide");
                      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";
                  }
              &lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anybody have an idea where the first two dots are and  how I can fix it so the three dots are in a row?</p>