How can i make this slider change slides also by clicking on the bullets?

How can i make this slider change slides also by clicking on the bullets?


    Currently the slider works fine but the user  is unable to change slides by clicking on the bullets . I want the user to be able to go to the 1st slide when clicking on the first bullet, to the 2nd slide when clicking on the 2nd bullet. And so on..

    Is there an easy way to do this based on my code?

    Here is my code:

    1. var main = function() {
    2.     var int = self.setInterval(function(){
    3.         $('.arrow-next').trigger('click');
    4.     },4000);
    5.     $('.active-slide').click(function(){
    6.         window.clearInterval(int);
    7.         return false;
    8.     });
    9.     $('.dropdown-toggle').click(function() {
    10.         $('.dropdown-menu').toggle();
    11.     });
    12.     $('.arrow-next').click(function() {
    13.         var currentSlide = $('.active-slide');
    14.         var nextSlide = currentSlide.next();
    15.         
    16.         var currentDot = $('.active-dot');
    17.         var nextDot = currentDot.next();
    18.         
    19.         if ( nextSlide.length == 0 ) {
    20.             nextSlide = $('.slide').first();
    21.             nextDot = $('.dot').first();
    22.         } 
    23.         
    24.         currentSlide.fadeOut(1300).removeClass('active-slide');
    25.         nextSlide.fadeIn(1300).addClass('active-slide');
    26.         
    27.         currentDot.removeClass('active-dot');
    28.         nextDot.addClass('active-dot');
    29.     });
    30.     $('.arrow-prev').click(function() {
    31.         var currentSlide = $('.active-slide');
    32.         var prevSlide = currentSlide.prev();
    33.         
    34.         var currentDot = $('.active-dot');
    35.         var prevDot = currentDot.prev();
    36.         
    37.         if ( prevSlide.length == 0 ) {
    38.             prevSlide = $('.slide').last();
    39.             prevDot = $('.dot').last();
    40.         }
    41.         
    42.         currentSlide.fadeOut(1300).removeClass('active-slide');
    43.         prevSlide.fadeIn(1300).addClass('active-slide');
    44.         
    45.         currentDot.removeClass('active-dot');
    46.         prevDot.addClass('active-dot');
    47.     });
    48. }

    49. $(document).ready(main);