jQuery 如何创建多行轮播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22545466/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I create a carousel with multiple rows?
提问by Caspert
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.
我正在寻找具有多行的轮播。例如 3 行 - 9 项。jQuery 轮播会很好，但我只能找到 1 行的轮播。
I want this setup. Is this possible?
我想要这个设置。这可能吗？
回答by kamerynn
I recently ran into this problem, and wanted to use Slick.jsbecause 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 内）设置为“幻灯片”，您可以选择一次要显示多少张幻灯片。
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.
要使用 Slick.js 制作多行，请将包含图像的 div 嵌套到另一个 div 中，该 div 将其视为一张幻灯片。然后，您浮动子 div 以创建图像网格。有很多方法可以做到这一点 - 我还使用带有“clear: both”CSS 设置的换行符将图像分成新行。
Here's the relevant code for a 2x2 grid:
这是 2x2 网格的相关代码：
HTML
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
CSS
.grandchild {
float: left;
}
.clearboth {
clear: both;
}
JS
JS
$(document).ready(function() {
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1
});
});
回答by Philip
Slick has a parameter called rows, this might help you, e.g.:
Slick 有一个名为行的参数，这可能对您有所帮助，例如：
$('.b-grid-item').slick({
infinite: true,
slidesToShow: 5,
slidesToScroll: 5,
rows: 3
});
This produces a grid with 5 columns and 3 rows. Only obstacle with this. Items flow from top to bottom, so in your first row you would have the order: 1, 4, 7,...
这将生成一个具有 5 列和 3 行的网格。唯一的障碍。项目从上到下流动，因此在您的第一行中，您将拥有以下顺序：1, 4, 7,...
回答by feeela
Each of you slider items has to be its own grid to do so.
每个滑块项目都必须是自己的网格才能这样做。
For example:
例如：
<div class="slider">
<div class="item">
<ul class="grid">
<li></li>
<li></li>
<li></li>
…
</ul>
</div>
<div class="item">
<ul class="grid">
…
</div>
