让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 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');
});
单单为了支持滑动手势而导入整个 jQuery Mobile 貌似有些大材小用,(现在英文原文中已经抽离,可下载)
而 TouchSwipe 在两边可点击按钮区域滑动无效,然后选择了 Hammer。
英文原文:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/
原文:http://www.weste.net/2014/7-16/97866.html?utm_source=tuicool&utm_medium=referral
让Bootstrap轮播插件carousel支持左右滑动手势的三种方法的更多相关文章
- 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 : 1. jQuery Mobile (http://jquerymobile.com/download ...
- Bootstrap 轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap 轮播(Carousel)详解
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...
- 第二百四十八节,Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...
- Bootstrap 轮播插件
一.轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...
- Query图像滑块插件 (支持触摸/滑动手势)
1.http://bxslider.com/ 2.http://www.slidesjs.com/ (http://www.html5cn.org/article-6437-1.html很多歌)
随机推荐
- C# 依赖缓存
使用轮询的方式 数据库: 在VS的命令里面输入 aspnet_regsql.exe -S (local) -U sa -P 123456 -d ERP_SQL -ed 上面这句是用来设置哪个服务器上的 ...
- Windows Azure服务
一. 存储服务 Azure存储服务是云端的文件存储服务,通过http/https访问和权限控制有以下三种特性 1.本地数据中心冗余 (Local Redundant Storage,LRS) 在一个位 ...
- tar包在linux下 java安装
总的原则:将jdk-7u10-linux-x64.tar.gz压缩包解压至/usr/lib/jdk,设置jdk环境变量并将其修改为系统默认的jdk 1.将jdk-7u5-linux-x64.tar.g ...
- 2014.1.23 Discuz论坛迁移+VPS配置手记
虽说这也不是我第一次转移这个论坛了,但毕竟还是第一次自己配置VPS,写点东西记一下 一:关于VPS的配置 1.用TeamViewer连接服务器 这个VPS的IDC自己带有一个远程控制的页面,用浏览器打 ...
- Linux high memory 学习总结
在free命令中有个参数l,它表示 show detailed low and high memory statistics.其实最先是对High Memory总是为零有些不解(Linux是64为). ...
- mapreduce流程中的几个关键点
MapReduce中数据流动 (1)最简单的过程: map - reduce (2)定制了partitioner以将map的结果送往指定reducer的过程: map - partiti ...
- Linux JDK 安装
1,下载JDK(Linux版) 官网下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2, 建立java目录 ...
- Linux换源+编译内核总结
换源: 我用的是CentOS,所以下面以其为例,其它OS做法类似,可作参考: 在主机能联网的情况下 进入存放源配置的文件夹 cd /etc/yum.repos.d 备份默认源 mv ./CentOS- ...
- 解决SecureCRT中文编码乱码
1.mysql表和列都已经设置UTF-8了,然后还是不能输入中文和中文显示乱码. 2.在SecureCRT下: 执行英文设置:export LANG=zh_CN.UTF-8后不能直接输入中文. 然后执 ...
- linux监控命令nc用法
一.nc命令检测端口的用法 # nc -v -w 10 %IP% -z %PORT% -v 显示指令执行过程. -w <超时秒数> 设置等待连线的时间. -u 表示使用UDP协议 -z 使 ...