Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
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支持左右滑动手势的三种方法的更多相关文章
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- 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很多歌)
随机推荐
- android 入门-防微信拍摄视频 按钮事件处理
package com.cc.view; import com.cc.R; import com.cc.R.layout; import com.cc.R.menu; import android.o ...
- [Linux] yum和apt-get用法及区别
一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.Debian系列:Debian.Ubuntu等 RedHat 系列 1 常见的安装包 ...
- dwz中权限的控制
很多人不明白用dwz要如何在没有登录的时候跳转到登录页面,没有权限的时候弹出提示. 其实,作者在设计的时候,已经完全考虑到了这些需求. 不管是navTab还是dialog,dwz的页面加载最终都是通过 ...
- Oracle自动备份脚本(网上找到的资料)
废话不多说了,直接给大家贴代码了,具体代码如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
- 学习linux内核时常碰到的汇编指令(2)
转载:http://blog.sina.com.cn/s/blog_4be6adec01007xvh.html JNGE∶指令助记符——(有符号数比较)不大于且不等于转移(等价于JL).当SF和OF异 ...
- supervisor(一)基础篇
这两天干的活,是让楼主写一个supervisor的listener,用来监控supervisor所管理子进程的状态,当子进程异常退出时,楼主写的这个listener将会触发报警.在这里总结下super ...
- suse 不能远程登录
公司部分机器新装了suse企业版12,远程登录不成功,解决方法如下: 1.关闭防火墙 chkconfig --level SuSEfirewall2_init off 2.配置sshd 3.重启ssh ...
- 【MongoDB】1.安装--以及简单使用
第一次接触MongoDB 参考&粘贴:http://jingyan.baidu.com/article/ed15cb1b52b8661be2698162.html 一.安装 1.首先去官 ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
- Activity之间传递数据的方式及常见问题总结
Activity之间传递数据一般通过以下几种方式实现: 1. 通过intent传递数据 2. 通过Application 3. 使用单例 4. 静态成员变量.(可以考虑 WeakReferences) ...