JQuery Slider width, variable <li> element widths - how do?

Disclaimer - have read several related posts but they don't seem to have addressed my exact issue.

The problem

My slider panel contains an unordered list, with varying numbers of <li> elements of varying widths. Each LI contains an image, hence the reason for the different sizes. e.g. 5 elements = 2000px, 6 elements = 2100px

Now. If I set the slider to have a fixed width of 2500px, the li elements display correctly in the slider.

However, because the li total width varies, there is a varying amount of blank space to scroll at the end of the slider which ruins the effect.

If I do not specify the width of the UL in the CSS, my LI elements will float normally and wrap开发者_如何学Go, rather than filling the width of the slider (because there is no explicit width).

What I tried

So I came up with the idea of:

$('ul#slide-ul li').each(function(){ 
        sliderWidth += $(this).outerWidth(); // LI's have padding
});

which returns the correct, actual width of the content of the slider. I can use this value to set the width of the slider, and everything works fine - offline.

Online, in FF, Chrome and IE, the first time the page loads, the LI's display as if there was no width set. I then refresh the page, and everything is ok.

I think this happens because the images inside the LI's haven't been cached or loaded at this point, and there is no pre-determined width so the LI's aren't their true size.

Summary

Is there a better way of getting the width of an UL that has varying content, for use within a slider, and preventing this issue with the page loading/refresh.

Sorry for the lengthy, hard to follow post, but am unable to post a live link. I will do a js fiddle if it will help, but there's a lot of code unfortunately.

Thank you.

Edit

http://jsfiddle.net/VV7qp/6/

Here's a JSFiddle more or less. It's quite hard to replicate I'm afraid without a live server.

In your JSFiddle the width is already defined on all the img elements, can't you put the width on the li elements as well?

If you want that dynamically, maybe you could do something like: give the images a class called 'imgClass'

$('ul#slide-ul li').each(function(){
    $(this).width($('.imgClass', this).width());

Look into white-space: nowrap;

Building on the white-space answer because I think one solution is to force all your images to display on one line (so you get the ul width) this you can do using inline-blocks

here's a forked fiddle

I haven't touched the JS, but it will need changed as you will no longer need to calculate the width of the slide-ul you can use the width of the .carousel-container and #slide-ul width I was too lazy to go in and amend all the calculations to rebuild the scroller

using display: inline-block and telling the whitespace between them not to wrap, will force #slide-ul to always be wide enough to contain all the images and because

<div style="overflow: hidden;" class="scroll-pane ui-widget ui-corner-all">

has it's overflow set to hidden it's the one that is cropping the ul (which is now not a ul ;)), and it, as far as I can see, is the same width as .carousel-container so you have the figures you need?

I think that getting the images all on one line is the issue here?