layui.carousel輪播元件實現移動端手勢左右滑動效果
阿新 • • 發佈:2019-02-01
var ins;
layui.use(['carousel', 'form'], function () {
var carousel = layui.carousel;
ins = carousel.render({
elem: '#test1'
, width: '500px'
, height: '200px'
, interval: 4000
// , arrow: 'none' //始終不顯示箭頭
});
});
$("#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' );
});
});