JQuery Slider width, переменная <li>ширина элемента - как это сделать?

Question

Отказ от ответственности - прочитал несколько связанных сообщений , но, похоже, они не решали мою точную проблему.

Проблема

Панель моего ползунка содержит неупорядоченный список с различными номерами <li> элементов различной ширины.Каждый LI содержит изображение, отсюда и причина разных размеров. например, 5 элементов = 2000 пикселей, 6 элементов = 2100 пикселей

Сейчас.Если я установил для ползунка фиксированную ширину 2500px, элементы li будут правильно отображаться в ползунке.

Однако, поскольку общая ширина li изменяется, количество пробелов может быть разнымПространство для прокрутки в конце ползунка, который разрушает эффект.

Если я не не указываю ширину UL в CSS, мои элементы LI будут плавать нормально и wrapвместо заполнения ширины ползунка (потому что нет явной ширины).

То, что я пробовал

Итак, я пришел к мысли:

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

который возвращает правильную, фактическую ширину содержимого слайдера.Я могу использовать это значение, чтобы установить ширину ползунка, и все работает отлично - в автономном режиме.

В режиме онлайн, в FF, Chrome и IE, при первой загрузке страницы экран LI отображается так, как если бы ширина не была установлена.Затем я обновляю страницу, и все в порядке.

Я думаю, что это происходит из-за того, что изображения внутри LI не были кэшированы или загружены на данный момент, и нет никаких предварительныхопределенной ширины, поэтому размеры LI не равны true размеру.

Сводка

Есть ли лучший способ получить ширину UL с различным содержимым для использования внутри слайдера,и предотвращение этой проблемы с загрузкой / обновлением страницы.

Извините за длинное, трудное для отслеживания сообщение, но я не могу опубликовать действующую ссылку.Я сделаю js fiddle, если это поможет, но, к сожалению, кода много.

Спасибо.

Редактировать

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

Вот JSFiddle более или менее.Боюсь, что без живого сервера довольно сложно воспроизвести его.

Answer 1

В вашем JSFiddle ширина уже определена для всех элементов img, вы не можете также указать ширину для элементов li?

Если вы хотите это динамически, возможно, вы могли бы сделать что-то вроде: присвойте изображениям класс imgClass

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

Answer 2

Опираясь на пробел, потому что я думаю, что одним из решений является принудительное отображение всех ваших изображений на одной строке (чтобы вы получили ширину ul), что вы можете сделать, используя inline-blocks

вот раздвоенная скрипка

Я не трогал JS, но изменится , так как вам больше не нужно будет вычислять ширинуslide-ul вы можете использовать ширину .carousel-container и #slide-ul ширину. Мне было лень идти, чтобы изменить все вычисления, чтобы перестроить скроллер

, используя display: inline-block и сообщая whitespace between them not to wrap, заставит #slide-ul всегда быть достаточно широким, чтобы вместить все изображения, и потому что

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

имеет overflow, установленное на hidden, это то, что кадрируетul (который теперь не является ul;)), и он, насколько я вижу, имеет ту же ширину, что и .carousel-container, поэтому у вас есть нужные вам цифры?

Я думаю, чтопроблема в том, чтобы получить все изображения в одной строке?

Answer 3

Загляните в white-space: nowrap;