Я думаю, что у вроде есть рабочий пример того, что вы пытаетесь сделать, но есть пара проблем.
Используя пример, который вы опубликовали в качестве основы, вы можете заменить HTML-разметку LI в UL на DIV в контейнере DIV. Например:
<div class="sliderGallery">
<div class="div-that-gets-cropped">
<div class="text-and-images-chunk">Some text!<br /><img class="pb-airportexpress" src="slider-gallery_files/pb_airport_express.jpg" /></div>
<div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_airport_extreme.jpg" /></div>
<div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_timecapsule_20080115.jpg" /></div>
...
</div>
Затем вы изменяете код jQuery на странице, чтобы настроить таргетинг на этот контейнер DIV вместо UL:
window.onload = function () {
var container = $('div.sliderGallery');
var divThatGetsCropped = $('div.div-that-gets-cropped', container);
var itemsWidth = divThatGetsCropped.innerWidth() - container.outerWidth();
$('.slider', container).slider({
minValue: 0,
maxValue: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
divThatGetsCropped.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
divThatGetsCropped.css('left', ui.value * -1);
}
});
};
Затем у вас есть несколько нетривиальных изменений CSS, которые нужно сделать ... Исходный пример основывался на стилизации LI для отображения: inline, внутри контейнера со скрытым переполнением. Это будет головной болью, чтобы попытаться заставить все отображаться правильно, если вы просто сделаете так, чтобы эти DIV "text-and-images-chunk" отображались в строке. Вы, вероятно, хотите отпустить их всех.
НО , плавающие элементы не будут очень хорошо играть с контейнером DIV ", который будет обрезан" из-за способа, которым он "раскрывается" DIV "sliderGallery" (по крайней мере, вот что я испытываю в Firefox 3.03). Я справился с этим, установив действительно большую ширину для DIV "div-that -рез-кадрированный" (10000 пикселей):
.sliderGallery div.div-that-gets-cropped {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
width: 10000px;
}
.sliderGallery div.div-that-gets-cropped div.text-and-images-chunk {
float: left;
margin-right: 24px;
}
И вам придется настроить «левые» значения для .slider-lbl1, .slider-lbl2, чтобы они соответствовали любой ширине в конечном итоге (это может быть сложно, если размер вашего текста в конечном итоге изменит ширину элементов text-and-images-chunk).
Одна проблема, которую я заметил, заключается в том, что когда у вас есть изображения в элементе блочного уровня, нет хорошего способа заставить их «обнять» дно, как в примере с использованием inline. Возможно, вы сможете добиться этого, поиграв с позиционированием элементов (я не смог), но, надеюсь, это не будет иметь большого значения в вашем конкретном использовании.
Все это говорит о том, что jCarousel, похоже, предназначен именно для того, что вы делаете , даже если он добавляет небольшой объем кода.