关于bootstrap图片轮播的触摸滑动事件

最新推荐文章于 2021-10-19 18:14:08 发布

hqjytaily

最新推荐文章于 2021-10-19 18:14:08 发布

阅读量3.3k

点赞数 3

分类专栏： bootstrap

本文链接：https://blog.csdn.net/hqjytaily/article/details/77840012

版权

本文记录了在使用Bootstrap进行Web前端开发时，如何处理图片轮播的触摸滑动事件。由于Bootstrap官方文档未明确说明触摸事件，作者通过实践发现，只要确保加载了jQuery1.9.1及以上版本和bootstrap.min.js，并且jQuery在前，加入特定代码即可实现手机端的触摸滑动效果。

摘要由CSDN通过智能技术生成

接触web前端有一段时间了，一直没有做过记录，有些问题解决后，一段时间又忘了，处理麻烦，为了自己，也为了与我遇到过同样问题的小白，我决定还是做个记录。

因为bootstrap的强大，所以我们公司的很多开发都是基于bootstrap.

一般都是边用边学，在赶项目的时候，有些功能不得不用熟悉的插件，这时候就会因为代码冲突，造成功能障碍。

bootstrap的轮播，官方文档里没有看到关于touch事件的处理方法，但是手机流行的现在，很多地方都要用到。

一般情况下，只要你按照顺序加载了jqury1.9.1版本以上，也加载了bootstrap.min.js,并且jqury在前的情况，只要加入如下代码就可以了。

	$(document).ready(function(){
				var startX,endX;//声明触摸的两个变量
				var offset = 30;//声明触摸距离的变量
				$('.carousel-inner').on('touchstart',function (e) {
					startX= e.originalEvent.touches[0].clientX;//当触摸开始时的x坐标；
				});
				$('.carousel-in