Javascript jquery将单击事件绑定到ui滑块

我有一些jquery，它可以用鼠标滚轮滑动。我添加了jquery滑块，并根据ui.value与当前幻灯片索引绑定了单击事件，以转换幻灯片。问题在于，如果不将滑块移动到“快”，效果会很好，但如果移动太快，则幻灯片转换当前索引将与ui.value不对齐。ui.value是正确的，所以我认为这里的点击事件被跳过了？在mixmastercocktails.com网站上，单击要显示幻灯片的主图像。关于如何确保点击事件被调用，有什么想法吗

    $('#slider-vertical').slider({
    orientation: 'vertical',
    range: 'min',
    min: 1,
    max: $('#cards li').length,
    value: 1,
    step: 1,
    slide: function( event, ui ) {
        if(ui.value > current_index)
        {
            next.trigger('click');
        }
        if(ui.value < current_index)
        {
            prev.trigger('click');
        }
    }
}); 

$（“#滑块垂直”）。滑块({
方向：'垂直'，
范围：“分钟”，
民:1,，
最大值：$（'#cards li'）。长度，
价值：1，
步骤：1，
幻灯片：功能（事件、用户界面）{
如果（ui.value>当前索引）
{
next.trigger（'click'）；
}
如果（ui.value<当前索引）
{
上一个触发器（“点击”）；
}
}
}); 

完整js文件：

(function($) {
var counter = 1;
var newx = 0;
var newy = 0;
var width = 475;
var nwidth = 475;
var current_index = 1;
var previous_index = 1;
var view = $('#rolodex');
var prev = $('#control-prev .prev');
var next = $('#control-next .next');        

$('#cards li').each(function() 
{
    var newz = counter+1000;

    $(this).css('z-index', newz );
    //$(this).html(newz);
    $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');

    $(this).css('width', nwidth +'px');
    newx = newx + 4;
    newy = newy + -2;
    nwidth = nwidth - 8;
    counter--;
});

$(document).bind('mousewheel', function(event, delta, deltaX, deltaY) 
{
    if(deltaY >= 0) {
        next.trigger('click');          
    }
    else {
        prev.trigger('click');          
    }
});     

next.bind('click', function() {
    if($(this).attr('disabled')) return false;
    $('#cards li').filter(':nth-child(' + current_index + ')').css('transform', 'scale(1.2, 1.2)');
    $('#cards li').filter(':nth-child(' + current_index + ')').css('opacity', 0);

    newx = 0;
    newy = 0;
    nwidth = 475;

    $('#cards li').each(function(jindex) {
        if(current_index <= jindex)
        {   
            $(this).css('width', nwidth +'px');
            $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');               

            nwidth = nwidth - 8;
            newx = newx + 4;
            newy = newy + -2;
        }   
    });                     

    current_index ++;
    $('#slider-vertical').slider({value:current_index});        

    check_buttons();
});

prev.bind('click', function() {
    if($(this).attr('disabled')) return false;

    $('#cards li').filter(':nth-child(' + (current_index - 1) + ')').css('transform', 'scale(1, 1)');
    $('#cards li').filter(':nth-child(' + (current_index - 1) + ')').css('opacity', 1);         

    newx = 0;
    newy = 0;
    nwidth = 475;

    $('#cards li').each(function(kindex) {              
        if(current_index <= (kindex + 1))
        {   
            $(this).css('width', nwidth +'px');
            $(this).css('transform', 'translate(' + newx + 'px,' + newy + 'px)');               

            nwidth = nwidth - 8;
            newx = newx + 4;
            newy = newy + -2;               
        }   
    });

    current_index --;
    $('#slider-vertical').slider({value:current_index});

    check_buttons();    
});

function check_buttons() {
    if(current_index==1) {
        prev.attr('disabled', true);
    }
    else {
        prev.attr('disabled', false);
    }

    if(current_index == $('#cards li').length) {
        next.attr('disabled', true);                
    }
    else {
        next.attr('disabled', false);
    }
}

$('#rolodex-image').bind('touchstart',function() {
    $(this).animate({opacity:.70,'z-index':25}); 
    $('#cards').animate({opacity:1});
    $('#slider-vertical').fadeIn('slow');
    $('#control-prev input').fadeIn('slow');
    $('#control-next input').fadeIn('slow');
});

$('#rolodex-image').bind('click', function() {  
    $(this).animate({opacity:.70,'z-index':25}); 
    $('#cards').animate({opacity:1}); 
    $('#slider-vertical').fadeIn('slow');
    $('#control-prev input').fadeIn('slow');
    $('#control-next input').fadeIn('slow');        
}); 

$('#slider-vertical').slider({
    orientation: 'vertical',
    range: 'min',
    min: 1,
    max: $('#cards li').length,
    value: 1,
    step: 1,
    slide: function( event, ui ) {
        if(ui.value > current_index)
        {
            next.trigger('click');
        }
        if(ui.value < current_index)
        {
            prev.trigger('click');
        }
    }
}); 

（函数（$）{
var计数器=1；
var-newx=0；
var-newy=0；
var宽度=475；
var nwidth=475；
var当前_指数=1；
var上一个指数=1；
变量视图=$（“#rolodex”）；
var prev=$（“#control prev.prev”）；
var next=$（'#control next.next'）；
$（'#cards li'）。每个（函数（）
{
var newz=计数器+1000；
$（this.css（'z-index'，newz）；
//$（this.html（newz）；
$（this.css（'transform'，'translate（'+newx+'px'，+newy+'px'）；
$（this.css（'width'，nwidth+'px'）；
newx=newx+4；
newy=newy+-2；
nwidth=nwidth-8；
计数器--；
});
$（文档）.bind（'mousewheel'，函数（事件、增量、增量、增量）
{
如果（deltaY>=0）{
next.trigger（'click'）；
}
否则{
上一个触发器（“点击”）；
}
});     
next.bind（'click'，function（）{
if（$（this.attr（'disabled'））返回false；
$（'#cards li'）.filter（':n个子（'+current#u index+'））.css（'transform'，'scale（1.2,1.2）'）；
$（'#cards li'）.filter（':n个子（'+current#u index+'））.css（'opacity'，0）；
newx=0；
newy=0；
nwidth=475；
$（#cards li'）。每个（函数（jindex）{
如果（当前索引
幻灯片
在单击并跳转滑块时未处理事件。应改用
更改

$('#slider-vertical').slider({
  orientation: 'vertical',
  range: 'min',
  min: 1,
  max: $('#cards li').length,
  value: 1,
  step: 1,
  change: function( event, ui ) {
    if(ui.value > current_index) {
      var index_change = ui.value - current_index;
      for (var i = 0; i < index_change; i++) {
        next.trigger('click');
      }
    }

    if(ui.value < current_index) {
      var index_change = current_index - ui.value;
      for (var j = 0; j < index_change; j++) {
        prev.trigger('click'); 
      }
    }
  }
});

$（“#滑块垂直”）。滑块({
方向：'垂直'，
范围：“分钟”，
民:1,，
最大值：$（'#cards li'）。长度，
价值：1，
步骤：1，
更改：功能（事件、用户界面）{
如果（ui.value>当前索引）{
var指数变动=ui.value-当前指数；
对于（变量i=0；i

我已经用答案更新了JSFIDLE。
当前索引在prev.trigger（'click'）；next.trigger（'click'）中递增和递减这会触发next.bind、prev.bind函数。你能为此制作一个JSFIDLE吗？我想不出它不起作用的任何原因。我想我现在明白你在问题中的意思了。如果你点击滑块而不是滑动，当前索引和ui将不同步，对吗？我已经更新了我的答案。问题也应该更新以使其更清晰。Ryan，您的解决方案有效，谢谢，但是当使用“更改”时，幻灯片在滚动完成之前不会动画。不确定幻灯片与“更改”之间的关系，但已更新为幻灯片，效果非常好。感谢您的帮助！！！！