Bootstrap 的 carousel.js 插件并没有支持手势。

3种解决方案 :

jQuery Mobile (http://jquerymobile.com/download/)
$("#carousel-generic").swipeleft(function() {
$(this).carousel('next');
}); $("#carousel-generic").swiperight(function() {
$(this).carousel('prev');
});
TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)
$("#carousel-generic").swipe({
swipeLeft: function() { $(this).carousel('next'); },
swipeRight: function() { $(this).carousel('prev'); },
});
hammer.js (http://eightmedia.github.io/hammer.js/) +
jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)
$('#carousel-generic').hammer().on('swipeleft', function(){
$(this).carousel('next');
}); $('#carousel-generic').hammer().on('swiperight', function(){
$(this).carousel('prev');
});

hammer.js 官网:http://hammerjs.github.io/ ,版本基于v2.0.4:

var carousel = new Hammer(document.getElementById("carousel"));
carousel.on('swipeleft', function(){
$(this).carousel('next');
}); carousel.on('swiperight', function(){
$(this).carousel('prev');
});

Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法的更多相关文章

  1. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  2. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  3. BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

    原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...

  4. Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  5. Bootstrap 轮播(Carousel)详解

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...

  6. 第二百四十八节,Bootstrap轮播插件

    Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...

  7. Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js

    在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...

  8. Bootstrap 轮播插件

    一.轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...

  9. Query图像滑块插件 (支持触摸/滑动手势)

    1.http://bxslider.com/ 2.http://www.slidesjs.com/ (http://www.html5cn.org/article-6437-1.html很多歌)

随机推荐

  1. SQL Server 2014 BI新特性(一)五个关键点带你了解Excel下的Data Explorer

    Data Explorer是即将发布的SQL Server 2014里的一个新特性,借助这个特性讲使企业中的自助式的商业智能变得更加的灵活,从而也降低了商业智能的门槛. 此文是在微软商业智能官方博客里 ...

  2. html5移动Web开发实战

    1.解决横竖屏字体大小变化 html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust:100 ...

  3. wp8 入门到精通 虚拟标示符 设备ID

    //获得设备虚拟标示符 wp8 public string GetWindowsLiveAnonymousID() { object anid = new object(); string anony ...

  4. java中 this 和super的用法

    通过用static来定义方法或成员,为我们编程提供了某种便利,从某种程度上可以说它类似于C语言中的全局函数和全局变量.但是,并不是说有了这种便利,你便可以随处使用,如果那样的话,你便需要认真考虑一下自 ...

  5. mysql无法远程连接的解决方法

        在阿里云服务器上安装好MySQL后,首先想到的就是安装一款工具来管理数据库,一开始选择了phpMyAdmin,这个工具安装很简单,只要解压到能访问的目录下就行了.在浏览器中访问phpMyAdm ...

  6. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  7. Fragment实现兼容手机和平板

    Android手机的设置界面,点击一下Sound,可以跳转到声音设置界面,如下面两张图所示:             然后再来看一下Android Pad的设置界面,主设置页面和声音设置页面都是在一个 ...

  8. 对于Eclipse的正确用法

    有时候我们刚刚修改了工程里的文件 但是启动的时候它硬是说你有东西没有声明 而那个东西又明明在那里.. 这时候我们可以认为实际与它调用的工程关系文件(我假想的) 不同步.. 我们可以通过clean功能来 ...

  9. 动态平衡二叉搜索树的简易实现,Treap 树

    http://blog.csdn.net/qichi_bj/article/details/8232048

  10. Blog Starting...

    30出头,开始Blog记录学习生活的点滴,待40时再回来一看.