解决方法
我最近遇到了这个问题,并希望使用
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 }); });
原文地址:https://www.jb51.cc/jquery/178252.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。