以前完成轮播图使用的是Bootstrap的插件，但是现在使用Layui框架，下面记录如何使用Layui来完成轮播图功能。
0x01 html代码
1 | <div class="layui-carousel" id="test1"> |
2 | <div carousel-item> |
3 | {% for banner in banners %} |
4 | <div> |
5 | <a href="{{ banner.link_url }}" target="_blank"> |
6 | <img src="{{ banner.image_url }}" alt=""> |
7 | </a> |
8 | </div> |
9 | {% endfor %} |
10 | </div> |
11 | </div> |
0x02 javascript代码
1 | layui.use(['carousel'], function () { |
2 | var carousel = layui.carousel; |
3 | //建造实例 |
4 | var form = layui.form; |
5 | carousel.render({ |
6 | elem: '#test1' |
7 | , width: '100%' //设置容器宽度 |
8 | , arrow: 'hover' //始终显示箭头 |
9 | ,anim: 'default' //切换动画方式 |
10 | ,interval:7000 |
11 | }); |
0x03 其他参数
具体参数见：Layui轮播图文档