Question

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

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-）布局..

提前谢谢

EDIT 说清楚：订单是相关的，因为我想建立一个“我们所有客户”的网格状视图，按照标题排序。

Answer 1

多元素周期插件

提供列表项的简单预览滚动面板。从中间显示给定的li项目范围（隐藏边缘项目），并允许在列表中向左和向右滚动。不处理自动滚动或包装物品。

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

Answer 2

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

无论如何，我用float创建了一些简单的东西。这是一个简单的演示：http://jsfiddle.net/vPGbf/

整个事情的关键（忽略我真正喜欢的CSS）是一些非常简单的float ed li，绝对定位ol和外{将div设置为隐藏{1}}以隐藏您不需要的其他overflow。真的是这样的。请注意，当您添加更多元素时，必须增加li的宽度，要进行滑动，您应该更改ol的{{1}}值。

滑块与多个元素

2 个答案: