how to add bullet navigation to slider

Question

I have created a simple fade slider and got it working. I want to incorporate the bullet navigation circles to the slider dynamically and link to images that are in the slide dynamically, but i'm finding this too difficult. For now i have manually put in the bullet navigation circles

Can someone help me please? Thankyou

here's my fiddle http://jsfiddle.net/kingkhan/f5zBy/60/

HTML

<div id="quickslider">
<div class="quickslider">
    <img id="1" src="http://placehold.it/990x400/c84265/ffffff&text=one"    alt="placeholder image">
    <img id="2" src="http://placehold.it/990x400/000000/ffffff&text=two" alt="placeholder image">
    <img id="3" src="http://placehold.it/990x400/636363/ffffff&text=three" alt="placeholder image">
    <img id="4" src="http://placehold.it/990x400/CCCCCC/ffffff&text=four" alt="placeholder image">
</div><!--quickslider-->

<div class="nav-thumbs">
    <ul>
        <li><a href="#" class="1">1</a></li>
        <li><a href="#" class="2">2</a></li>
        <li><a href="#" class="3">3</a></li>
        <li><a href="#" class="4">4</a></li>
    </ul>
</div>

<div class="quickslider-nav">
    <a href="#" class="left">Prev</a>
    <a href="#" class="right" onclick="next(); return false;">Next</a>
</div>
        </div><!--quickslider-->

CSS

#quickslider{width:990px; margin:0 auto; position: relative;}
.quickslider{position: relative; float: left; display: block; width: 990px; height:400px;}
.quickslider img{display: none; margin: 0; padding: 0; position: absolute;}

.nav-thumbs{position: absolute; clear:both; bottom:15px; left:42%;}
.nav-thumbs ul{list-style-type: none;}
.nav-thumbs ul li{float:left; margin-top:20px;}
.nav-thumbs ul li a{
display:block;
width:10px;
height:10px;
float: left;
margin:0 5px;
background-color: #fff;
text-indent: -9999px;
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.nav-thumbs ul li a:hover, .nav-thumbs ul li a.active{background-color: #a89d8a !important;}
.active{background-color: #a89d8a !important;}

.quickslider-nav{position:relative; clear:both; color:#000;}
.quickslider-nav a{text-decoration: none;}
.quickslider-nav .left{float: left; background-color: #fff; padding:5px 10px;}
.quickslider-nav .right{float: right; background-color: #fff; padding:5px 10px;}
.quickslider-nav .left:hover, .quickslider-nav .right:hover{background-color: #000; color:#fff;}

jQuery 1.9.1

 sliderInt = 1; //slider default on load
 sliderNext = 2; //next image in order

 $(document).ready(function(){

 $('.quickslider > img#1').fadeIn(300); // initially load first slider on load
 $('.nav-thumbs a:first').addClass('active'); // add active class to first dot
 startSlider();
 $('.left').click(function(){
    prev();
    $('.nav-thumbs a').removeClass('active');
 });
 $('.right').click(function(){
    next();
    $('.nav-thumbs a').removeClass('active');
 });

 });

 function startSlider(){
 count = $('.quickslider > img').size(); //variable to count all the list items or img
 loop = setInterval(function(){

    if(sliderNext>count){
        sliderNext = 1; // set to beginning after completion of slides list
        sliderInt = 1; // set the Integer number back to 1 also
    }

    $('.quickslider > img').fadeOut(300); // fadeout all images
    $('.quickslider > img#'+sliderNext).fadeIn(300); // use sliderNext to calculate the next slider id
    sliderInt = sliderNext; // update so that the current slide = 2 as set globally
    sliderNext = sliderNext + 1; // calculate the next image

 }, 3000); // after milliseconds loop
 }

 //previous function
 function prev(){
 //calculate the slide which comes before the current slide
 newSlide = sliderInt - 1; // current slide minus 1 added to variable called newSlide
 showSlide(newSlide); // pass information from  newSlide above to function showSlide

 }

 function next(){
 //calculate the slide which comes after the current slide
 newSlide = sliderInt + 1; // current slide plus 1 added to variable called newSlide
 showSlide(newSlide); // pass information from  newSlide above to function showSlide
 }

 function stopLoop(){
 window.clearInterval(loop); //clear interval of loop so that it does not skip images when in between intervals, ie. the 300 miliseconds just about to complete, and clicking on next will make it seem as though the you have clicked through two images 

 }

 function showSlide(id){ // id is the variable name of what we will be calling which will be passed
 stopLoop(); // call function that we have declared above so that the interval is cleared and restarted

    if(id > count){
        id = 1; // if id = more than the count of images then set back to 1
    }else if(id < 1){
        id = count; // if id = less than count of list then set back to 4 or whatever number of images
    }

    $('.quickslider > img').fadeOut(300); // fadeout all images
    $('.quickslider > img#'+id).fadeIn(300); // use sliderNext to calculate the next slider id

    $('.nav-thumbs > a#'+id).addClass('active');

    sliderInt = id; // update so that the current slide = 2 as set globally
    sliderNext = id + 1; // calculate the next image
    startSlider(); // start the slider process again, as it was stopped before
 }

 $('.quickslider > img').hover(function(){
    stopLoop(); // stops the loop when image is hovered over
 },
 function(){
 startSlider(); // starts where the loop left off
 });

Answer 1

Updated Fiddle.

I just added a data-attribute to the links in the nav-thumb. When they are clicked, this value is read and the slide shows the image.