时间戳

首页 > 解决方案 > Bootstrap 4 中的轮播触摸支持

jquery - Bootstrap 4 中的轮播触摸支持

问题描述

我已经为此工作了几个小时，似乎无法弄清楚我做错了什么！

当用户在轮播内部滑动时，我希望能够控制每个单独的轮播。

现在我已经让事件监听器正常工作，但是我无法单独控制轮播。当我轻扫一个时，它会更改页面上的所有 .carousel 。

帮助！！

// swipe detection
function swipedetect(el, callback) {
    var touchsurface = el,
        swipedir,
        startX,
        startY,
        distX,
        distY,
        threshold = 80, //required min distance traveled to be considered swipe
        restraint = 60, // maximum distance allowed at the same time in perpendicular direction
        allowedTime = 300, // maximum time allowed to travel that distance
        elapsedTime,
        startTime,
        handleswipe = callback || function (swipedir) { }

    for (var i = 0; i < el.length; i++) {
        touchsurface[i].addEventListener('touchstart', function (e) {
            var touchobj = e.changedTouches[0]
            swipedir = 'none'
            distX = 0
            distY = 0
            startX = touchobj.pageX
            startY = touchobj.pageY
            startTime = new Date().getTime() // record time when finger first makes contact with surface
        }, false)

        touchsurface[i].addEventListener('touchmove', function (e) {
        }, false)

        touchsurface[i].addEventListener('touchend', function (e) {
            var touchobj = e.changedTouches[0]
            distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
            distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
            elapsedTime = new Date().getTime() - startTime // get time elapsed
            if (elapsedTime <= allowedTime) { // first condition for awipe met
                if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { // 2nd condition for horizontal swipe met
                    swipedir = (distX < 0) ? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
                }
                else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) { // 2nd condition for vertical swipe met
                    swipedir = (distY < 0) ? 'up' : 'down' // if dis traveled is negative, it indicates up swipe
                }
            }
            handleswipe(swipedir)
        }, false)
    }
    
}


//USAGE:
var el = $('.carousel');
var touches = $('.carousel').targetTouches;

swipedetect(el, function (swipedir) {
    // swipedir contains either "none", "left", "right", "top", or "down"
    var id = $(this).attr('id');
    console.log(id)
    if (swipedir == 'left') {
        $(el).carousel('next')
    }
    if (swipedir == 'right') {
        $(el).carousel('prev')
    }
    
});

标签： jquerybootstrap-4touchcarouselswipe

解决方案

试试这个狂欢

猫头鹰狂欢

下载 carousal 然后添加这些 css 文件

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

html格式

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

添加这些js文件

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

现在叫狂欢

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

现在你完成了。按照文档获取更多选项

推荐阅读