让boostrap的图片轮播支持滑动效果
因为最近开发的项目涉及到移动设备上的 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/)
让boostrap的图片轮播支持滑动效果的更多相关文章
- 实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
- 移动端图片轮播—swipe滑动插件
swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class=' ...
- Android学习笔记之图片轮播...
PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...
- 基于面向对象的图片轮播(js原生代码)
无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...
- UIScrollView实现图片轮播器及其无限循环效果
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
- Flexslider图片轮播、文字图片相结合滑动切换效果
Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...
- 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示
在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...
- 面板支持单个,多个元素的jQuery图片轮播插件
一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
随机推荐
- 织梦修改“dedecms提示信息”
1.根目录下include文件夹,找到common.func.php: 2.根目录下dede文件夹(管理目录默认dede),找到sys_data_done.php: 3.打开以上2个.php文件,把“ ...
- UVA 674 Coin Change 硬币转换(完全背包,常规)
题意:有5种硬币,个数无限的,组成n元的不同方案有多少种? 思路:常规完全背包.重点在dp[0]=1,dp[j]中记录的是组成 j 元的方案数.状态转移方程dp[j+coin[i]]+=dp[j]. ...
- 洛谷 P2323 [HNOI2006]公路修建问题
题目描述 输入输出格式 输入格式: 在实际评测时,将只会有m-1行公路 输出格式: 输入输出样例 输入样例#1: 4 2 5 1 2 6 5 1 3 3 1 2 3 9 4 2 4 6 1 3 4 4 ...
- IIS 7.0的根文件(applicationHost.config)位置及说明
位置 C:\Windows\System32\inetsrv\config\applicationHost.config 说明 https://www.microsoft.com/taiwan/tec ...
- 日常-acm-韩信点兵
相传韩信才智过人,从不直接清点自己军队的人数,只要让士兵先后以三人一排,五人一排,七人一排地变换队形,而他每次只看一眼队伍的排尾就知道人数了.输入包含多组数据,每组数据包含三个非负整数a,b,c,表示 ...
- 学习Unity 4.6新GUI系统
(搬运自我在SegmentFault的博客) 最近在学习Unity的过程中,自己做一款小游戏自娱自乐.自然需要用到GUI.但4.5中的GUI很难用,一个选择是传说中的NGUI插件.但对于4.6中的新G ...
- FMDB的使用方法(附Demo)
http://www.jianshu.com/p/54e74ce87404 最近在项目中需要在多个页面对同样的数据进行相关操作,于是便用到了FMDB数据库操作,以下便是FMDB的一些简单的使用方法.附 ...
- XPath语法规则及实例
XPath语法规则及实例 XPath语法规则 一.XPath术语: 1.节点:在XPath中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档(根)节点. XML文档是被作为节点树 ...
- lca(最近公共祖先(在线)) 倍增法详解
转自大佬博客 : https://blog.csdn.net/lw277232240/article/details/72870644 描述:倍增法用于很多算法当中,通过字面意思来理解 LCA是啥呢 ...
- 解决Windows 与Mac 双系统下的蓝牙设备共用的问题
不知道有多少人和我一样用的蓝牙鼠标或者键盘,有的话应该都会遇到同一个问题:即在一个系统下配好对后在另一个系统必须重新配对才能使用,很是麻烦.还要将蓝牙设备进入发现模式,OS下搜索,连接....终于昨天 ...