如何创建带有多行的走马灯？

Question

我正在寻找一款具有多行的走马灯。例如3行-9个项目。使用jQuery编写的走马灯很好，但是我只能找到带有1行的走马灯。

我想要这种设置。这种设置是否可行？

- Caspert

Answer 1

Slick有一个名为rows的参数，这可能对您有帮助，例如：

$('.b-grid-item').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    rows: 3
});

这将生成一个5列3行的网格。唯一的问题是，项目从上到下流动，因此在第一行中您将拥有顺序：1、4、7、...

- Philip

Answer 2

我最近遇到了这个问题，想使用Slick.js，因为它有很多其他功能。它将每个图像（设置在div内）设置为“幻灯片”，您可以选择同时显示多少个幻灯片。

要使用Slick.js创建多行，请将包含图像的div嵌套到另一个div中，Slick将其视为一个幻灯片。然后，您可以浮动子div来创建图像网格。有很多方法可以做到这一点 - 我也使用换行符和“clear：both”CSS将图像分成新行。

以下是2x2网格的相关代码：

HTML

<div class="slider">

    <!-- This will be considered one slide -->
    <div>    
        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>

        <br class="clearboth">

        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>
    </div>

    <!-- The second slide -->
    <div>
        <div class="grandchild">
            <img src="" />
        </div>
            ...
    </div>
</div>

CSS

.grandchild {
    float: left;
}
.clearboth {
    clear: both;
}

JS

$(document).ready(function() {
    $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

- kamerynn

---

很棒的答案，但是在处理响应式网站时，这种解决方案存在一个根本性问题。Slick.js 的一个绝妙之处在于它可以通过少量的 JS 初始化代码来处理响应式设计。然而，如果您创建了一个包含特定大小的排序元素的网格，则对于各种浏览器宽度，它将无法正常工作。 - Kevin Zych

True。您可以使用断点来更改幻灯片以显示/滚动，并具有嵌套的div，这些div在垂直方向上堆叠，但您将被困在固定高度（因此，如果您将网格固定在4张图像高度，则可以从4x4中断到3x4、2x4等）。是否有更好的响应式设计解决方案？ - kamerynn

嗨，KamHarrah和@Kevin Zych，你们有没有解决方案可以将这些缩略图居中在Slick幻灯片内？我现在遇到了这个问题。 - gwar9

抱歉 @gwar9，我手头没有任何东西。 - Kevin Zych

Answer 3

每个滑块项目都必须是其自己的网格才能实现此功能。

例如：

<div class="slider">
    <div class="item">
        <ul class="grid">
            <li></li>
            <li></li>
            <li></li>
            …
        </ul>
    </div>
    <div class="item">
        <ul class="grid">
            …
</div>

- feeela