本文介绍了如何在Bootstrap的幻灯片轮播图中添加触屏左右滑动手势支持，通过引入hammer.js插件并编写JavaScript代码实现。关键步骤包括在HTML中加载插件，使用jQuery获取元素并监听swipe事件，根据滑动方向触发轮播图的next或prev方法。注意，使用jQuery 1.9.1版本以确保在电脑和手机上都能正常工作。
最近ytkah在学习用bootstrap搭建网站，Bootstrap能自适应pc端和手机端，并且移动设备优先，适合现如今移动营销。bootstrap是封装好的框架，需要某些功能只需调用相应的组件就可以，但有些还是没加入，比如幻灯轮播触屏左右滑动手势就不支持，大家用的设备基本是触屏的了，能用滑动交互在小屏幕上体验会更好，那么如何实现呢？一个比较简单的方法是增加一个滑动手势js插件：hammer.js，网上有很多cdn调用地址，像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js，我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了。下面是幻灯片的原始html代码
![Second slide [1140x500]](http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg)
最低0.47元/天 解锁文章
3436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
