第八章 让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很多歌)
随机推荐
- springMVC的参数检验
先说应用场景,比如说前台传来一个参数,我们肯定得在后台判断一下,比如id不能为空了,电话号码不能少于11位了等等.如果在service层一个一个判断岂不是要累死个人.代码也不简洁,这时候我们肯定会想到 ...
- Linux记录-安装LAMP和R环境
2.2 Apache httpd2.2.1 执行命令进行安装:yum install -y httpd2.2.2 开启服务:service httpd start2.2.3 设置开机自启动:chkco ...
- Tomcat、Weblogic、WebSphere、JBoss服务器的选择
一.应用点 Tomcat是Apache基金会提供的Servlet容器,它支持JSP, Servlet和JDBC等J2EE关键技术,所以用户可以用Tomcat开发基于数据库,Servlet和JSP页面的 ...
- POJ - 2528 Mayor's posters (离散化+线段树区间修改)
https://cn.vjudge.net/problem/POJ-2528 题意 给定一些海报,可能相互重叠,告诉你每个海报的宽度(高度都一样的)和先后叠放顺序,问没有被完全盖住的有多少张? 分析 ...
- PHP7 学习笔记(十三)composer详解一
摘要 从拷贝第三方代码到项目中(1994),到PEAR安装依赖包(1999),再到Composer兴起(2012),PHP社区经历了将近20年的探索.PHP这门古老的语言,也在不断的发展更新,在web ...
- 解决IOS移动端固定定位失效问题
根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上不起作用. <div class="header">头部</ ...
- [Android] Android RxBus 用法学习总结
事件总线的好处在于方便组件之间的交互,RxBus不是一个库,而是使用RxJava实现事件总线的一种思想. rxbus和eventbus相比较: RxJava 主要做异步.网络的数据处理,强大之处就是对 ...
- 使用jQuery插件时避免重复引入jquery.js文件
当一个页面使用多个jQuery插件时,需要避免重复引入jquery.js文件,因为后面映入的jQuery.js文件中定义的jQuery对象会覆盖掉前面的jQuery对象,导致之前定义的jQuery插件 ...
- Redis是可以安装成windows服务-开机自启
其实Redis是可以安装成windows服务的,开机自启动,命令如下 redis-server --service-install redis.windows.conf 安装完之后,就可看到Redis ...
- 例:判断是不是自有属性hasOwnProperty方法
自有属性和共有属性: 自有属性:直接保存在对象本地的属性 共有属性:保存在原型对象中,被所有子对象共享的属性 获取时:都可用对象.属性方法 赋值时:自有属性,必须:对象.属性 = 值 共有属性,必须: ...