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. poj 2104:K-th Number(划分树,经典题)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 35653   Accepted: 11382 Ca ...

  2. <转>WCF实例化模式与高并发处理

    WCF实例化模式与高并发控制 1.实例化模式InstanceModel 1.1 PerCall:单调模式 每次调用都会产生一个实例 例[ServiceBehavior(InstanceContextM ...

  3. 第二篇:SOUI源码的获取及编译

    源代码的获取 SOUI的源码采用SVN管理. SVN:http://code.taobao.org/svn/soui2 这里主要包含两个目录:trunk 及 third-part. trunk目录保存 ...

  4. javascript settimeout and setinterval

    setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束.如果运行的代码中再次运行同样的setTimeout命令,则可循环运行.setinterval是循环运行的,即每 ...

  5. HDU 5918 Sequence I KMP

    Sequence I Problem Description   Mr. Frog has two sequences a1,a2,⋯,an and b1,b2,⋯,bm and a number p ...

  6. Lingo语法

    基本语法 ! 注释,末尾需要分号 ~ 分隔符 集成员无论用何种字符字符标记,它的索引都是从1开始连续计数 在数据声明中输入两个相连的逗号表示该位置对应的集成员的属性值未知. init: endinit ...

  7. python 继承

    继承一个类 如果已经定义了Person类,需要定义新的Student和Teacher类时,可以直接从Person类继承: class Person(object): def __init__(self ...

  8. MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践

    主服务器上(注:应该是允许从机访问)  GRANT REPLICATION SLAVE ON *.* to ‘rep1’@’192.168.10.131’ identified by ‘passwor ...

  9. JavaScript 入门 (1)

    一. javascript的调用 JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中: <html> <hea ...

  10. express-14 发送邮件

    简介 Node和Express都没有内置的邮件发送功能,所以必须使用第三方模块.推荐Andris Reinman的Nodemailer SMTP.MSA和MTA 发送邮件的通用语言是简单邮件传输协议( ...