如何创建包含多行的轮播？

Question

我正在寻找有多行的旋转木马。例如3行 - 9个项目。一个jQuery旋转木马会很好，但我只能找到1排旋转木马。

我想要这个设置。这可能吗？

Answer 1

我最近遇到了这个问题，并希望使用Slick.js，因为它有很多其他功能。它将每个图像（在div中设置）设置为“幻灯片”，您可以选择一次要显示的幻灯片数量。

要使用Slick.js创建多行，可以将包含图像的div嵌套到另一个div中，该div看起来像一张幻灯片。然后，浮动子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
    });
});

Answer 2

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

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

这将生成一个包含5列和3行的网格。只有这个障碍。项目从上到下流动，因此在第一行中您将获得订单：1,4,7，...

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>