jQuery draggable - trigger function when dragged left/right

Question

How do I make it so when dragging left or right, the corresponding div/"button" in the slider navigation follows the same pattern?

The jQuery for the dragging function is listed below.

var slideWidth = $('#mySliderContainer').width();
var slideHeight = $('#mySliderContainer').height();
var slideCountWidth = $('#mySlider').children().length;
var selectSlide = $('.selection')

var activeSlide = 0;
var min = 0;
var max = -(slideCountWidth -1) * slideWidth;

$("#mySlider").width(slideCountWidth * slideWidth).draggable({
  axis: 'x',
  drag: function (event, ui) {
    if (ui.position.left > min) ui.position.left = min;
    if (ui.position.left < max) ui.position.left = max;
    activeSlide = (activeSlide+1) % slideCountWidth;
    currentButton();
  },
  stop: function( event, ui ) {
    $(this).animate({'left': (ui.position.left).roundTo(slideWidth)})
  }
});

function currentButton() {
  console.log(activeSlide);
  console.log(slideCountWidth);
  selectSlide.css('background', '#D6D6D6');
  selectSlide.eq(activeSlide).css('background', '#6F6F6F');      
}

The portion of jQuery below allows for the div/"button" to change when dragging the slider; however, the button selection moves all over the place and does not correspond with it's correct slide.

activeSlide = (activeSlide+1) % slideCountWidth;
currentButton();

The jQuery is located on jsFiddle.

Is there a way to make the drag function trigger the div/"button" change when the slider is dragged the entire "slideWidth"?

If you use the bottom navigation of the slider, it works properly with the div/"button appearing to be "selected", and following the pattern of the corresponding slide.