如何创建具有多行的轮播? [英] How can I create a carousel with multiple rows?

问题描述

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

I am searching for a carousel that has multiple rows. For example 3 rows - 9 items. A jQuery carousel would be nice, but I only can find carousels with 1 row.

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

I want this setup. Is this possible?

推荐答案

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

I recently ran into this problem, and wanted to use Slick.js because it has tons of other capabilities. It sets each image (set inside a div) as a "slide", and you can choose how many slides you want to display at a time.

要使用Slick.js进行多行处理，请将包含图像的div嵌套到另一个div中，slick会将其视为一张幻灯片.然后，使子div浮动以创建图像网格.有很多方法可以做到这一点-我还使用了带有"clear:both" CSS的换行符来将图像分成新的一行.

To make multiple rows with Slick.js, you nest the divs containing the images into another div, which slick sees as one slide. Then, you float the child divs to create the grid of images. There's a lot of ways to do this - I also used line breaks with "clear: both" CSS set to break the images into a new row.

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

Here's the relevant code for a 2x2 grid:

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

这篇关于如何创建具有多行的轮播?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！