我正在寻找一个有多行的旋转木马.例如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
});
});
