有一个移动端的项目要求用jquery+bootstrap,其中有一个轮播图,需求是要求可以手触滑动,但是bootstrap中没有写手触滑动的方法,自己琢磨着写了出来,供大家参考。
$(function () {
let $carousels = $('#carouselExampleSlidesOnly');
let start, // 初始值
end; // 结束值
$carousels.on('touchstart', function (e) {
start = e.originalEvent.touches[0].clientX;// 触摸开始时记录一下手指所在的坐标x
});
$carousels.on('touchmove', function (e) {
end = e.originalEvent.touches[0].clientX;// 离开屏幕一瞬间的坐标x
});
$carousels.on('touchend', function (e) {
let distance = Math.abs(start - end); // 获取差值
if (distance > 30) { //当差值大于30说明有方向的变化
$(this).carousel(start > end ? 'next' : 'prev'); //根据初始值和结束值的比较判断向前滑还是向后滑
}
})
})