JQuery Slider с внутренними блочными элементами

Я думаю, что у вроде есть рабочий пример того, что вы пытаетесь сделать, но есть пара проблем.

Используя пример, который вы разместили в качестве основы, вы можете заменить 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, который был стилизован под display: inline, внутри контейнера со скрытым переполнением. Будет головной болью пытаться заставить все отображаться правильно, если вы просто стилизуете эти DIV «текст и изображения» так, чтобы они отображались встроенными. Вы, вероятно, захотите их всех пустить в ход.

НО, плавающие элементы не будут хорошо работать с контейнером "div-that-gets-cropped" DIV из-за того, как он "раскрывается" DIV "sliderGallery" (по крайней мере, это то, что я испытываю в Firefox 3.03 ). Я обошел это, установив действительно большую ширину для DIV "div-that-gets-cropped" (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;
        }

И вам придется настроить "left" значения для .slider-lbl1, .slider-lbl2, чтобы они соответствовали любой ширине (это может быть сложно, если размер вашего текста в конечном итоге приводит к изменению ширины " элементы text-and-images-chunk).

Одна проблема, которую я заметил, заключается в том, что когда у вас есть изображения в элементе уровня блока, нет хорошего способа заставить их «обнимать» нижнюю часть, как они это делают в примере с использованием inline. Возможно, вам удастся заставить это работать, поигравшись с позиционированием элементов (я не смог), но, надеюсь, это не будет иметь большого значения для вашего конкретного использования.

Все это говорит о том, что jCarousel выглядит как предназначен именно для того, что вы делаете, даже если он добавляет небольшой объем кода.

Ознакомьтесь с плагином jCarousel Lite. Я считаю, что это очень полезно и легко настраивается.

http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo