< html>
< head>
< meta charset=“utf-8”>
< title>carousel模块快速使用< /title>
< link rel=“stylesheet” href="/static/build/layui.css" media=“all”>
< /head>
< body>
< div class=“layui-carousel” id=“test1”>
< div carousel-item>
< div>条目1< /div>
< div>条目2< /div>
< div>条目3< /div>
< div>条目4< /div>
< div>条目5< /div>
< /div>
< /div>
< script>
layui.use([‘carousel’,‘element’,‘layer’], function(){
var carousel = layui.carousel;
layer = layui.layer;
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//建造实例
ins=carousel.render({
elem: ‘#test1’
,width: ‘100%’ //设置容器宽度
,arrow: ‘none’ //始终显示箭头
//,anim: ‘updown’ //切换动画方式
});
});
$("#test1").on(“touchstart”, function (e) {
var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
$(this).on(‘touchmove’, function (e) {
arguments[0].preventDefault();//阻止手机浏览器默认事件
});
$(this).on(‘touchend’, function (e) {
var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
e.stopPropagation();//停止DOM事件逐层往上传播
if (endX - startX > 30) {
ins.slide(“sub”);
}
else if (startX - endX > 30) {
ins.slide(“add”);
}
$(this).off(‘touchmove touchend’);
});
})
< /script>
< /body>
< /html>
