jquery – 如何创建多行轮播？

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

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

解决方法

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

要使用Slick.js创建多行,可以将包含图像的div嵌套到另一个div中,该div看起来像一张幻灯片.然后,浮动子div以创建图像网格.有很多方法可以做到这一点 – 我还使用了“clear：both”CSS设置的换行符将图像分成新行.

这是2×2网格的相关代码：

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
    });
});