第八章 让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很多歌)
随机推荐
- JDK动态代理和CGLIB代理的区别
一.原理区别: java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处理. 而cglib动态代理是利用asm开源包,对代理对象类的class文件 ...
- js异步下载文件请求
注意 :通常下载文件是用get请求 window.location.href=url; 但是 我们需要下载完成监听,所以必须要异步执行.用常规的ajax是不可以的.我们要用blob对象来实现1.原生的 ...
- WebStorm记录(2)
继续效果图 CSS初始化 前面理解错了,背景图应该铺满 <div class="bg"> html,body,*{ /*盒子模型使用边框模式*/ box-sizing: ...
- stat/lstat函数使用
1. 进程虚拟地址空间 2. stat函数 获取文件信息 #include <sys/types.h> #include <sys/stat.h> #include <u ...
- Nginx+Tomcat+Https 服务器负载均衡配置
这篇过气了! 重新补一个:http://www.cnblogs.com/hackyo/p/6809773.html 由于需要,得搭建个nginx+tomcat+https的服务器,搜了搜网上的发现总是 ...
- Consul 域名服务
=============================Web请求的全过程(包含DNS) =============================完整过程参考 https://blog.csdn. ...
- 设计前沿:16款扁平风格 iOS 7 图标设计
最新发布的 iOS 7 抛弃了曾经倍受追捧的拟物化设计,采用扁平化,极简设计的界面.对于 iOS 平台来说,采用没有阴影的平面设计其实是有道理的.以前的屏幕分辨率有限,必要的阴影可以填补小尺寸,分辨率 ...
- Spring 快速开始 启动Spring
[启动Spring必须配置] [web.xml部署描述符方式] 1.配置Servlet级别上下文 <servlet> <servlet-name>springDispatche ...
- Docker(五)如何构建Dockerfile
摘自 https://mp.weixin.qq.com/s/_hq9dPe6390htN8BTkoQeQ 一.Dockerfile的指令集 由于Dockerfile中所有的命令都是以下格式:INSTR ...
- DNN网络(一)
摘自 https://www.cnblogs.com/pinard/p/6418668.html 一.DNN 简介 1.DNN的层次可以分为三层 输入层(input layer) 隐藏层(hidden ...