具有多个元素的滑块答案

【问题标题】：Slider with multiple elements具有多个元素的滑块
【发布时间】：2010-08-23 09:28:36
【问题描述】：

我想在这些图片库中创建一个滑块。
它应该一次显示多个条目，如下图所示：

http://i.stack.imgur.com/nTBPw.png （@ILMV 对不起，我不能自己放..）

当我单击右箭头时，它应该向左滑动（“类似 iPhone”），以便您看到 5、6、7 和 8。
条目（以数字表示）是动态创建的。

<div>
    <ul>
        <li>1</li>  <!-- ← visible -->
        <li>2</li>  <!-- ← visible -->
        <li>3</li>  <!-- ← visible -->
        <li>4</li>  <!-- ← visible -->
        <li>5</li>  <!-- ← not visible -->
        <li>6</li>  <!-- ← not visible -->
        <li>7</li>  <!-- ← not visible -->
        <li>8</li>  <!-- ← not visible -->
    </ul>
</div>

我知道滑块是如何工作的，并且能够自己创建一个，但我不知道如何创建该 (CSS-) 布局..

提前谢谢你

编辑明确一点：订单是相关的，因为我想构建一个“我们所有客户”的网格状视图，按标题排序。

【问题讨论】：

您需要那个顺序的列表项吗？因为你使用了ul，所以你看是无序的，如果你想要那样的话，它可能会更复杂一些。如果您想订购，请使用ol。另外，（我认为这是因为您很着急）但是您忘记了li 上的结束斜线！
好的，让我们更清楚地知道这样做应该实现什么:) 数字代表我们的客户徽标，这些徽标按他们的名字排序。我使用了无序列表，因为系统本身已经由流沙排序插件 (razorjack.net/quicksand/demos/one-set-clone.html) 排序 - 所以这并不重要..？是的，我很着急——当然，li-tags 必须正确关闭 :) 谢谢

标签： jquery css layout slider

【解决方案1】：

多元素循环插件

提供一个简单的列表项预览滚动面板。从中间显示给定范围的 li 项目（隐藏边缘项目）并允许在列表中左右滚动。不处理自动滚动或环绕项目。

https://github.com/willrossi/jQuery-Multiple-Elements-Cycle

【讨论】：

【解决方案2】：

您的问题的问题是您不清楚是否需要按特定顺序排列的列表元素。当然，鉴于您已经在使用 jQuery，您没有理由不能以您可以接受的方式插入它们。

不管怎样，我用floats 创建了一些简单的东西。这是一个简单的演示：http://jsfiddle.net/vPGbf/

整个事情的症结（忽略我坚持的真正花哨的 CSS）是一些非常简单的floated li，一个绝对定位的ol 和一个外部的div 和overflow设置为 hidden 以隐藏您不需要的其他 lis。就是这样。请记住，ol 的宽度必须随着您添加更多元素而增加，并且要进行滑动，您应该更改ol 的left 值。

【讨论】：

@scherii 如果您要求某人帮助您调试代码，我认为打开另一个问题可能更合适，因为这超出了此问题的范围。
我设法通过将每 8 个元素包装在一个 div 中来使用 javascript/jQuery 创建一个解决方案 - 我认为这样它会像我一样工作。感谢您的帮助和时间！我很抱歉我无法问出我真正需要什么，我自己也不确定。如果有人需要知道我是如何做到的，请随时与我联系。