jquery binding click event to ui slider

jquery binding click event to ui slider

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?
$('#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');
}
}
});
Full js file:
(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');
}
}
});
})(jQuery);