如何创建多行轮播？

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

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

在此处输入图像描述

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

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

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

HTML

...

CSS

 .grandchild { float: left; } .clearboth { clear: both; }

 $(document).ready(function() { $('.slider').slick({ slidesToShow: 1, slidesToScroll: 1 }); });

每个滑块项都必须是自己的网格才能这样做。

例如：

Slick有一个名为rows的参数，这可能对你有帮助，例如：

 $('.b-grid-item').slick({ infinite: true, slidesToShow: 5, slidesToScroll: 5, rows: 3 });

这将生成一个包含5列和3行的网格。只有这个障碍。物品从上到下流动，因此在您的第一行中您将获得订单：1,4,7，……