title: jquery binding click event to ui slider
body: <p>i have some jquery that transitions slides with the mousewheel. I have added the jquery slider and have bound click events based on the ui.value vs the current slide index to transition the slides. The problem, it works fine if you do not move the slider to fast, but if you move it too fast the slide transitions current index gets out of align with the ui.value. The ui.value is correct so i'm thinking the click events in here are being skipped? site mixmastercocktails.com, click the main image for the slides to appear. Any ideas on how to make sure that the click events get called?</p>
  
  <pre><code>    $('#slider-vertical').slider({
      orientation: 'vertical',
      range: 'min',
      min: 1,
      max: $('#cards li').length,
      value: 1,
      step: 1,
      slide: function( event, ui ) {
          if(ui.value &gt; current_index)
          {
              next.trigger('click');
          }
          if(ui.value &lt; current_index)
          {
              prev.trigger('click');
          }
      }
  }); 
  </code></pre>
  
  <p>Full js file:</p>
  
  <pre><code>(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 &gt;= 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 &lt;= 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 &lt;= (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 &gt; current_index)
          {
              next.trigger('click');
          }
          if(ui.value &lt; current_index)
          {
              prev.trigger('click');
          }
      }
  }); 
  </code></pre>
  
  <p>})(jQuery);</p>