jquery - 如何创建多行轮播？

Question

我正在寻找具有多行的轮播。例如 3 行 - 9 个项目。 jQuery 轮播会很好，但我只能找到 1 行的轮播。

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

Answer 1

我最近遇到了这个问题，想使用Slick.js因为它还有大量其他功能。它将每个图像(设置在 div 内)设置为“幻灯片”，您可以选择一次要显示多少张幻灯片。

要使用 Slick.js 制作多行，您可以将包含图像的 div 嵌套到另一个 div 中，slick 将其视为一张幻灯片。然后， float 子 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
    });
});