layui.carousel轮播组件实现移动端手势左右滑动效果

家明 2023-02-02 0 0

使用Layui做轮播图时，发现移动端没有手势左右滑动效果，下面的方法就能有效解决这个问题，请看代码：

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
</head>
<body>
 <div id="test1" class="layui-carousel">
  <div carousel-item>
   <img src="./psb.jpg">
   <img src="./psb.jpg">
  </div>
 </div>
</body>
<script type="text/javascript" src="./layui/layui.js"></script>
<style type="text/css">
 #test1 img{
  width:100%;
  height:100%;
 }
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    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');
        });
    });
</script>
</html>

标签：Layui carousel 轮播组件

本文地址：https://jiamingstory.com/frontend/120.html

layui.carousel轮播组件实现移动端手势左右滑动效果

觉得文章有用就打赏一下