jQuery draggable - 左/右拖动时的触发器功能

Question

如何在向左或向右拖动时这样做，滑块导航中相应的div /“按钮”遵循相同的模式？

下面列出了拖动功能的jQuery。

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');      
}

下面jQuery的部分允许在拖动滑块时更改div /“按钮”;但是，按钮选择会在整个地方移动，并且与正确的幻灯片不符。

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

jQuery位于jsFiddle。

当滑块拖动整个“slideWidth”时，有没有办法让拖动功能触发div /“按钮”？

如果您使用滑块的底部导航，它可以正常工作，div /“按钮看似”被选中“，并遵循相应幻灯片的模式。