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. Ajax 的 GET 和 POST 模式

    Ajax 异步请求数据的方式有两种:GET 和 POST. 如果是 GET 模式,则直接将数据放置到异步请求的 URL 地址中,而 send() 方法不发送任何数据: var queryString ...

  2. HDU4495 Rectangle

    求组成的等腰三角形面积最大值. 对此题的总结:暴力出奇迹 组成的三角形放置方式一共只有4种,用ans表示目前已知的最长三角形的边长,从上到下,从左到右枚举顶点,再枚举边长,一个重要剪枝是枚举边长l时先 ...

  3. 攻城狮在路上(壹) Hibernate(四)--- 对象标识符(OID)生成机制

    Hibernate使用对象标识符(OID)来建立内存中对象和数据库表中记录的对应关系,对象的OID和数据库的主键对应.为了保证OID的唯一性和不可变性,应该让Hibernate来为OID赋值.Hibe ...

  4. Windows环境下Oracle数据库的自动备份脚本

    批处理文件(.bat) @echo off echo ================================================ echo  Windows环境下Oracle数据 ...

  5. WPF之MVVM(Step4)——使用Prism(2)

    上一篇简单介绍使用Prism中的NotificationObject,以及DelegateCommand.这一篇更是简单,仅仅描述下DelegateCommand<T>如何使用. ICom ...

  6. Linux文本比较-diff&awk

    最近为了完成工作,需要将两个文件A.old和A进行比较,然后将A中新增加的部分保存到A中,其他部分删除.经过查找相关资料,发现有两种比较好的方法. 1. 使用diff命令 diff old.file ...

  7. 如何解决虚拟机Mac OS X 不支持二进制编译问题()

    本文将着重解决在使用VMware 11安装Mac OS虚拟机出现”Mac OS X 不支持二进制编译.若要运行 Mac OS X 主机上需要一个 VMware Workstation 支持英特尔 VT ...

  8. mageView图片显示出来 ()

    ImageView图片显示出来: igSign 是 ImageView的实例 igSign.setImageDrawable(getResources().getDrawable(R.drawable ...

  9. Sp EF输出 临时表

    -- ============================================= -- Author: <Author,,Name> -- Create date: < ...

  10. 图说设计模式(UML和设计模式)

    https://github.com/me115/design_patterns http://design-patterns.readthedocs.org/zh_CN/latest/index.h ...