Elastislide - how to make it work with varying image widths

Question

I am using Elastislide for an image slider for a site I'm working on (http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/).

Love the plug in and it works well in this responsive site (I've modified it to only slide one image at a time based on this answer: elastislide move one at a time), however I would also like to modify the JS so that it works with images of varying widths.

Currently itemSpace is calculated according to the first image width, and this works fine if all the images are the same size. But as soon as you chuck in a bunch of images all with different widths, then the maths is wrong and it slides to the wrong positions.

I've tried playing with different things in the JS and I just can't get it working.

Any suggestions would be appreciated, thanks!

Answer 1

The issue you have is the plugin will always take the first image and use that default height/width for it.

There are two ways you can go about this.

1. The Easy Way You can re-size all images to the same size (whether it be by hand or PHP/C#).

2. The Hard Way Since _setItemsSize : function() (in js/jquery.elastislide.js) is where the code is which is setting up the math, this is where you can modify it. However this code will only be hit once, from the self.layout() in the constructor ($.Elastislide.prototype = {). If you are going to do it this way, then you need to modify the (w) in the setItemsSize and work out the best width % to use.

However I would suggest re-sizing your images over messing with the math, just because that will get you the quickest result and you can move on and come back to this later if you have time in your development cycle.