How to make interactive bullets to my jquery slider

Question

I'm trying to make a slider with five pictures and next and previous buttons (they will be styled later). The slider works automatically and when hovering the slider the loop stops as it is supposed to. I've tried to add interactive bullets that will respond to its given picture. There should always be one dot highlighted, which is the one corresponding to the currently displayed image. But I cant get this to work. Can anyone help ? jsfiddle link

HTML

<div id="quickslider">
<div class="quickslider">
    <img class="slide" id="1" src="Slider_images/gc_slide_1.png" alt="placeholder image">
    <img class="slide" id="2" src="Slider_images/gc_slide_2.png" alt="placeholder image">
    <img class="slide" id="3" src="Slider_images/gc_slide_3.png" alt="placeholder image">
    <img class="slide" id="4" src="Slider_images/gc_slide_4.png" alt="placeholder image">
    <img class="slide" id="5" src="Slider_images/gc_slide_5.png" alt="placeholder image">
</div><!--quickslider-->

<nav class="slider-nav">
    <a href="#1" class="active">1</a>
    <a href="#2" >2</a>
    <a href="#3" >3</a>
    <a href="#4" >4</a>
    <a href="#5" >5</a>
</nav>

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

CSS

#quickslider{
    width:350px; 
    margin:0 auto; 
    position: relative;
    height: 380px;
}

.quickslider{
    position: relative; 
    float: left; 
    display: block; 
    width: 350px; 
    height:350px;
}

.quickslider img{
    display: none; 
    margin: 0; 
    padding: 0; 
    position: absolute;
}

#1 {
    background-image: url(Slider_images/gc_slide_1.png);
}

# 2 {
    background-image: url(Slider_images/gc_slide_2.png);
}

.slider-nav {
  text-align: center;
  margin: 10px 0 0 0;
}

.slider-nav a {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -9999px;
  border-radius: 50%;
}

.slider-nav a.active {
  background: #999;
}

JavaSript

sliderint= 1;
sliderNext = 2;

$(document).ready(function(){
    $('.quickslider>img#1').fadeIn(300);
    startSlider();
})

function startSlider (){
    count=$(".quickslider>img").size(); 

    loop = setInterval(function(){
        if(sliderNext>count){
            sliderNext=1;
            sliderint=1;
        }

        $('.quickslider>img').fadeOut(300);
        $('.quickslider>img#'+sliderNext).fadeIn(300);

        sliderint=sliderNext;
        sliderNext=sliderNext + 1;
    },5000)
}

function prev(){
    newSlide = sliderint-1;
    showSlide(newSlide);
}

function next(){
    newSlide = sliderint+1;
    showSlide(newSlide);   
}

function stopLoop(){
    window.clearInterval(loop);
}

function showSlide(id){
    stopLoop();
    if(id>count){
        id=1;
    }
    else if(id<1){
        id=count;  
    }

    $('.quickslider>img').fadeOut(300);
    $('.quickslider>img#'+id).fadeIn(300);

    sliderint=id;
    sliderNext=id + 1;
    startSlider();   
}

$(document).ready(function(){
    $(".quickslider > img").hover(
        function ()
        {
           stopLoop ();
        },
        function () {
            startSlider ();
        }
    );
});

Answer 1

Demo: http://jsfiddle.net/Lu2cqnjo/

So since you're only asking about the interactive bullets. I've only focused on them and didn't touch other places.

I added an onclick event handler inside $(document).ready() to detect user click on the bullet, and called showSlide() from there.

$('body').on('click', ".slider-nav a", function(e){
    e.preventDefault();
    var href = $(e.target).attr("href");

    showSlide(href.substring(1, href.length));
  });

showSlide() has thus become the function to call whenever you want to change slide. Thus I have changed the codes in startSlider() a bit to make use of showSlide() instead of its current implementation.

Hope this helped.

Answer 2

I've created new jquery code base on your HTML output as your old code seems a bit messy. you can modify next function, previous function and bullets functions to animate your display or better animate it with pure CSS like transform, translate or transition, the whole concept is to add active class on both bullet and image based on click event. I also modify a bit of your CSS code

you can check the JSFiddle

(function($){

  $('.nav-thumbs li:first-of-type, .quickslider img:first-of-type').addClass('active');

  //Previous function
  $('.quickslider-nav').on('click', '.left', function(e){
    e.preventDefault();
    showPrevious();
  });
  function showPrevious() {
    if ( !$('.nav-thumbs li:first-of-type').hasClass('active') ) {
      $('.active').removeClass('active').prev().addClass('active');
    } else {
      $('.nav-thumbs li, .quickslider img').removeClass('active');
      $('.nav-thumbs li:last-of-type, .quickslider img:last-of-type').addClass('active');
    }
  }

  //Next function
  $('.quickslider-nav').on('click', '.right', function(e){
    e.preventDefault();
    showNext();
  });
  function showNext() {
    if ( !$('.nav-thumbs li:last-of-type').hasClass('active') ) {
      $('.active').removeClass('active').next().addClass('active');
    } else {
      $('.nav-thumbs li, .quickslider img').removeClass('active');
      $('.nav-thumbs li:first-of-type, .quickslider img:first-of-type').addClass('active');
    }
  }

  // Bullets 
  $('.nav-thumbs').on('click', 'li', function(){
    $('.nav-thumbs li, .quickslider img').removeClass('active');
    $(this).addClass('active');
        $('.quickslider img').removeClass('active').eq($(this).index()).addClass('active');
    return false;
  });

  // Autoplay every 3 seconds
  setInterval(function(){
        if( !$('#quickslider').is(':hover') ) {
            showNext();
        }
  }, 3000);
})(jQuery);

Forgot the Important part of CSS

this CSS code is necessary to display the image

.quickslider img.active {
    display: block;
}