customizing jcarousel - animation issue
Hi folks. I am having an issue with a carousel I created for a client. The carousel had to be modified in the following way: it needed to accept variable width images, the images need to center, and the display area itself is offset to show portions of the next and previous images. The slideshow has a little animation glitch and does not make a smooth transition. The center slide moves back for a brief moment before sliding in the right direction. You can see the work in progress
here.
The glitch is because the items need compensate their offset position so that there are no gaps between the images when the slider moves. The problem is, since the two previous images are having position:left reset, and the current image itself needs to move left, it creates a little hitch which is driving me crazy. I've tried adding timers but with no luck...
Here's the main piece of code from a callback function that determines what happens to the first visible slide BEFORE the animation. So for the carousel, when you click the right arrow, the actions will be executed on the right-hand slide before it moves into the center.
- function mycarousel_itemFirstInCallback(carousel, item, idx) {
- var offset=$('div.jcarousel-clip-horizontal').width()-jQuery(item).width();
- var offsetval=offset/2; //calculates left offset so item centers
- jQuery(item).next().css('left','auto'); //ensures there is no gap between center and right item
- jQuery(item).prev().css('left',offsetval);//gives previous item the same offset as current item to avoid a gap
- jQuery(item).prev().prev().css('left',offsetval);//three items show at once, so both items preceding the incoming item need the same offset
- jQuery('div.jcarousel-prev-horizontal').css('width',offsetval); //set button width
- jQuery('div.jcarousel-next-horizontal').css('width',offsetval);//set button width
- jQuery(item).addClass('layering'); //add z-index for stacking
- }
Any clues on how to smooth out this animation? I've pulled many hairs out over this one...seriously losing my mind over this hiccup! Thanks in advance if you have some ideas...