Блог

Я пытаюсь создать аналогичный «слайдер», как показано здесь http://ui.jquery.com/repository/real-world/product-slider/ но я пытаюсь использовать внутренние дивы внутри элементов списка ( <li> ). похоже, что эта демонстрация прерывается,если вы не используете изображение или элемент блока ( <p> <div> , и т.д.).

У кого-нибудь есть какие-нибудь быстрые решения для этого? Я в основном хочу использовать текст и, возможно, изображения внутри a <div> вместо использования изображений.

Я нашел jCarousel, который, похоже, работает, но я искал что-то более легкое? Есть какие-нибудь идеи?

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

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

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

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

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

Проверьте плагин jCarousel Lite. Я обнаружил, что это очень полезно и легко настраивается.

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