带有内部块元素的JQuery Slider

Question

我正在尝试构建一个类似于此处演示的"滑块"http://ui.jquery.com/repository/real-world/product-slider/但是我尝试在列表项（<li>）内部使用内部div。如果你没有使用图像或块元素（<p>、<div>等），这个演示似乎会中断

有人能快速解决这个问题吗？我基本上想在<div>中使用文本和可能的图像，而不是使用图像。

我确实找到了jCarousel，它似乎可以工作，但我在寻找更轻一点的东西？有什么想法吗？

Answer 1

我认为我有一个关于你试图做什么的工作示例，但有几个问题。

使用您发布的示例作为基础，您可以将UL中LI的HTML标记替换为容器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"div"显示"的（至少这是我在Firefox 3.03中所经历的）

        .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似乎正是为你所做的而设计的，即使它确实添加了一点代码量。

Answer 2

查看jCarousel Lite插件。我发现它非常有用并且易于配置。

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