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. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  2. zoj 3888 线段树 ***

    卡n^2,用线段树降到nlogn 记录每个点上所覆盖线段的次小值,保证能有两条路径能走 #include<cstdio> #include<iostream> #include ...

  3. hdu 3709 数位dp

    数位dp,有了进一步的了解,模板也可以优化一下了 题意:找出区间内平衡数的个数,所谓的平衡数,就是以这个数字的某一位为支点,另外两边的数字大小乘以力矩之和相等,即为平衡数例如4139,以3为支点4*2 ...

  4. loj 1357(树形dp)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1357 #define _CRT_SECURE_NO_WARNINGS #include ...

  5. 非正规写法获取不到tr,td

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 异步框架asyn4j的原理

    启动时调用init方法 public void init(){ if (!run){ run = true; //工作队列 workQueue = newPriorityBlockingQueue(m ...

  7. python重载四则运算符及输出格式设置

    数学运算 Python 提供的基本数据类型 int.float 可以做整数和浮点的四则运算以及乘方等运算. 但是,四则运算不局限于int和float,还可以是有理数.矩阵等. 要表示有理数,可以用一个 ...

  8. HTML head表头添加meta设置

    <!--页面编码规则--> <meta charset="UTF-8" /> <!--设置浏览器以文档最高模式启用--> <meta ht ...

  9. Uva 10976 Fractions Again?!

    直接暴力 没技巧 y应该从k+1开始循环,因为不然y-k<0的时候 你相当于(x*y) % (负数) 了. #include <iostream> using namespace s ...

  10. js整理3

    函数 call: fun.call(a), a会转化成相应的对象,函数内的this即指向它; function foo() { console.log(this); } foo.call(null); ...