因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果。

然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势。

然后......自己想办法呗,再然后,就有下面3种解决方案 :

  1. $("#carousel-generic").swipeleft(function() {
  2. $(this).carousel('next');
  3. });
  4. $("#carousel-generic").swiperight(function() {
  5. $(this).carousel('prev');
  6. });
  1. $("#carousel-generic").swipe({
  2. swipeLeft: function() { $(this).carousel('next'); },
  3. swipeRight: function() { $(this).carousel('prev'); },
  4. });
  1. $('#carousel-generic').hammer().on('swipeleft', function(){
  2. $(this).carousel('next');
  3. });
  4. $('#carousel-generic').hammer().on('swiperight', function(){
  5. $(this).carousel('prev');
  6. });

单单为了支持滑动手势而导入整个 jQuery Mobile 貌似有些大材小用,

而 TouchSwipe 在两边可点击按钮区域滑动无效,

然后选择了 Hammer,

然后,<完>

(参考资料:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

让boostrap的图片轮播支持滑动效果的更多相关文章

  1. 实现一个图片轮播-3d播放效果

    前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...

  2. 移动端图片轮播—swipe滑动插件

    swipe是一个轻量级的移动滑动组件,它可以支持精确的触滑移动操作,能解决移动端对滑动的需求. swipe插件的使用主要有四大块: 一.html <div id='slider' class=' ...

  3. Android学习笔记之图片轮播...

    PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...

  4. 基于面向对象的图片轮播(js原生代码)

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  5. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

  6. Flexslider图片轮播、文字图片相结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...

  7. 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...

  8. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

随机推荐

  1. 【extjs6学习笔记】1.2 初始:MVC MVVM

    模型 这表示数据层.该模型可以包含数据验证和逻辑来保持数据.在 ext js 中, 大多数模型都与一个数据存储一起使用. 视图 这表示用户界面. 是用户在屏幕上看到的组件. 在每次互动的用户与应用程序 ...

  2. 如何提高Mysql的查询效率???

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  3. iOS-浅谈runtime运行时机制02-runtime简单使用

    http://blog.csdn.net/jiajiayouba/article/details/44201079 由于OC是运行时语言,只有在程序运行时,才会去确定对象的类型,并调用类与对象相应的方 ...

  4. Windows使用MySQL数据库管理系统中文乱码问题

    声明:本文关于MySQL中文乱码问题的解决方案均基于Windows 10操作系统,如果是Linux系统会有较多不适用之处,请谨慎参考. 一.MySQL中文乱码情况 1. sqlDevelper远程登陆 ...

  5. ZOJ 3469 Food Delivery (区间DP,经典)

    题意: 在x轴上有一家外卖餐馆,有n个顾客站在x轴上不同坐标上且叫了外卖,每个人的脾气不同,每1分钟没有收到外卖就会增加Fi点愤怒值,而外卖小哥的车是有速度的v-1/分钟,问怎样的送餐次序会让所有顾客 ...

  6. CF Gym 100637F The Pool for Lucky Ones

    题意:给你一串非负整数,可以将一个非零数减1,加到相邻的数字上,要使其中所有最大数字的和最小. 题解:模拟可以过.也可以分析,可以要减少最大数字和,如果最大数字出现大于等于3次,可以把最大数字加一,或 ...

  7. js原型,原型链的理解

    1.所有引用类型(函数.数组.对象)都拥有_proto_属性(隐式原型) 2.所有函数拥有prototype属性(显式原型)(仅限函数) 3.原型对象:拥有prototype属性的对象,在定义函数时就 ...

  8. React动态import()

    React动态import() react-router@v4代码分离,推荐的import().这里分享webpack配置和使用方法. 首先安装两个必须的包 cnpm i react-loadable ...

  9. Virt-install用法:

       #一般选项:指定虚拟机的名称.内存大小.VCPU个数及特性等 -n  NAME,  --name=NAME:虚拟机名称,需全局惟一: -r  MEMORY,  --ram=MEMORY:虚拟机内 ...

  10. 使用filter函数筛选出素数

    function getPrimeNumber(arr) { return arr.filter(function (number) { if (typeof number !== 'number' ...