让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的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
随机推荐
- 带你零基础入门redis【一】
本篇文章介绍在CentOS7系统安装redis,以及redis的简单操作 我们把redis安装在/usr/local目录下.分别执行以下命令 [root@VM_6_102_centos ~]# c ...
- ios uilabel 根据文字 计算宽度 高度
//根据宽度求高度 + (CGFloat)getLabelHeightWithText:(NSString *)text width:(CGFloat)width font: (CGFl ...
- cpp 计算程序运行时间的两种方法
1. #include <time.h> time_t begin_t = clock(); // to do time_t finish_t = clock(); cout<< ...
- 本号讯 | 永不消失的协作“空间站”开课;微软推出微软云Azure文档网站
8月29日,针对企业常面临的“协同办公”困难,开展以“还有这种操作?永不消失的协作'空间站'”为主题的协同办公培训课. 课程内容包含:在Office 365环境中,如何利用Teams与Groups等功 ...
- pre-empting taskintel手册-Chapter7-Task Management
这节描述了IA-32架构的任务管理功能,只有当处理器运行在保护模式的时候,这个功能才是有效的,这节的侧重点在32位任务和32位TSS结构上,关于16位的任务和16位TSS结构,请看7.6节,关于64位 ...
- pip和apt-get换源
pip换源 一下方法对pip和pip3同时起作用 永久换源 运行一下命令: cd ~/.pip 如果提示目录不存在的话,我们要自行创建一个,再进入目录 mkdir ~/.pip cd ~/.pip 在 ...
- shell脚本,awk在需要的行上打打印空行。
注解: 判断每行中是否包含字母a,包含了,就将$1的值赋值给变量a,然后判断变量a是否存在,存在打印一个空行,在将变量的值使用空变量b赋值,最后在打印输出. 结果就是在包含有字符a的行上打印一个空行.
- 2_分布式计算框架MapReduce
一.mr介绍 1.MapReduce设计理念是移动计算而不是移动数据,就是把分析计算的程序,分别拷贝一份到不同的机器上,而不是移动数据. 2.计算框架有很多,不是谁替换谁的问题,是谁更适合的问题.mr ...
- 数据结构C语言实现系列——线性表(单向链表)
#include <stdio.h> #include <stdlib.h> #define NN 12 #define MM 20 typedef int elemType ...
- js函数节流和函数防抖
概念解释 函数节流: 频繁触发,但只在特定的时间内才执行一次代码 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码 函数节流 函数节流应用的实际场景,多数在监听页面元素滚动事件的 ...