title: How to add a bullet navigation to my content slider?
body: <p>I am a jQuery starter and I've been building a content slider based on some tutorials I've seen lately.</p>
  
  <p>The problem is: I have no idea how to build a bullet navigation to finish it.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
     &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
        &lt;head&gt;
           &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
           &lt;title&gt;My content slider&lt;/title&gt;    
           &lt;style type="text/css"&gt;
              body {
                 margin: 0 0 0 0;
              }
             .slider {
                width: 100%;
                height: 400px;
                overflow: hidden;
             }
             .slider div {
                width: 100%;
                height: 400px;
                display: none;
             }
             .img {
                width: 100%;
                height: 400px;
             }
             h1 {
                text-align: center;
                color:#F00;
                margin: auto;
                padding-top: 45px;
             }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
             function Slider() {
                $(".slider #1").show("fade", 500);
                $(".slider #1").delay(5500)
                   .hide("slide", {direction: "left"}, 500);
  
                var sc=$(".slider div").size();
                var count=2;
  
                setInterval(function (){
                   $(".slider #"+count).show("slide", {direction: "right"}, 500);
                   $(".slider #" + count).delay(5500).hide("slide", {direction: "left"}, 500);
  
                   if(count==sc){
                      count=1;
                   } else {
                      count = count + 1;
                   }
  
                }, 6500);
             }
          &lt;/script&gt;
       &lt;/head&gt;
       &lt;body onload="Slider();"&gt;
          &lt;div class="slider"&gt;
             &lt;div class="img" id="1" style="background-color:#0F0;"&gt;
                &lt;h1&gt;My text is here&lt;/h1&gt;
             &lt;/div&gt;
             &lt;div class="img" id="2" style="background-color:#000;"&gt;
                &lt;h1&gt;My text is here&lt;/h1&gt;
             &lt;/div&gt;
             &lt;div class="img" id="3" style="background-color:#FF0;"&gt;
                &lt;h1&gt;My text is here&lt;/h1&gt;
             &lt;/div&gt;
          &lt;/div&gt;
       &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>Please someone help me with this one?</p>
  
  <p>Thanks in advance!</p>