View Full Version : carousel animation problem

07-25-2010, 12:12 AM
Hi folks. I am pulling serious amounts of hair out over this. The problem: make the jcarousel (jQuery slideshow plugin) accept variable width image and center them with no gaps between images. If you don't know jcarousel it doesn't matter...if you know how to animate in JQuery maybe you can help...Mathematically, my solution is correct although hacky, and the result is a slight hitch before each slide animates. A slight, very madding hitch. Please take a look at the example at http://jontakiff.com/brookssite2010/wood-portfolio-test.php. It's totally noticeable...the slide moves back just a bit before moving the right way...

I have made the slideshow work by appropriately changing the left position of all visible elements using the callback function. The basic problem is that the elements are being instructed to move in two directions at once. Rather than setting the left offset for all visible items, it now seems I would need to restructure this to have elements animating to the left or right a certain amount of pixels based on the width of the image. Could someone help me figure out a way to rework the animation for this thing so it doesn't have that hitch?

Here's the callback function code that makes it ALMOST work correctly:

function mycarousel_itemFirstInCallback(carousel, item) {

var offset=$('div.jcarousel-clip-horizontal').width()-jQuery(item).width();
var offsetval=offset/2;

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'); //z-index


Almost, but no cigar! Ideas.....would be super appreciated!