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

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

每个滑块项目都必须有自己的网格才能做到这一点。

\n\n

例如：

\n\n

<div class="slider">\n    <div class="item">\n        <ul class="grid">\n            <li></li>\n            <li></li>\n            <li></li>\n            \xe2\x80\xa6\n        </ul>\n    </div>\n    <div class="item">\n        <ul class="grid">\n            \xe2\x80\xa6\n</div>\n

\n