title: Implement nav dots to my slider?
body: <p>I've been messing around with my slider and I got it to slide by itself. The problem is, there is no way you can manually view the slides. I would like to add navigation dots on the bottom so you can skim through the slides without having to view them as the slider goes along. If you could help me with this it would be greatly appreciated.</p>
  
  <p><strong>My slider html:</strong></p>
  
  <pre><code>&lt;div id="slider-container"&gt;
  &lt;div style="position: relative"&gt;
    &lt;div class="slide"&gt;&lt;img id="slide_1" src="images/slide_1.jpg"/&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img id="slide_2" src="images/slide_2.jpg"/&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img id="slide_3" src="images/slide_3.jpg"/&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img id="slide_4" src="images/slide_4.jpg"/&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img id="slide_5" src="images/slide_5.jpg"/&gt;&lt;/div&gt;
    &lt;div class="slide"&gt;&lt;img id="slide_6" src="images/slide_6.jpg"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My slider css:</strong></p>
  
  <pre><code>.slide-container {
  display:block;
  }
  
  .slide {
  top:0;
  width:760px;
  height:420px;
  display:block;
  position:absolute;
  transform:scale(0);
  transition:all .7s;
  }
  
  .slide img {
  width:100%;
  height:100%;
  border-radius:6px;
  border:1px solid #95ca1a;
  }
  </code></pre>
  
  <p><strong>My slider javascript:</strong></p>
  
  <pre><code>$(document).ready(function() {
  (function (){
  
      var count = $(".slide &gt; img").length;
      var current = 1;
      var sliderNext = 2;
  
      $("img[id^='slide_']").fadeOut(0);
      $("#slide_" + current).fadeIn(300);
      var loop = setInterval(function() {
          $("#slide_" + current).fadeOut(300);
          $("#slide_" + sliderNext).fadeIn(300);
  
          (sliderNext &gt;= count) ? sliderNext = 1 : sliderNext++;
          (current &gt;= count) ? current = 1 : current++;
      }, 3000)
  })()
  });
  </code></pre>
  
  <p><strong>Here's an example of what I mean by nav dots:</strong></p>
  
  <p><a href="http://codepen.io/AMKohn/pen/EKJHf" rel="nofollow">CSS Slider - Codepen</a></p>