一直觉得 bootstrap 的轮播用起来很好用,代码简单,又支持响应式,

  但从未想过也不知道 bootstrap 的轮播竟然不支持在手机上左右滑动

  解决方法就是:

  使用滑动手势 js 插件:hammer.js(百度CDN资源库链接:http://cdn.code.baidu.com/

  然后在head中加载以后,通过 js 把 swipe 功能调用出来就可以了,下面是 js 命令调用 hammer.js 中的 swipe 功能代码

<script>
$(function() {
var myElement = document.getElementById('carousel-example-generic')
var hm = new Hammer(myElement);
hm.on("swipeleft", function() {
$('#carousel-example-generic').carousel('next')
})
hm.on("swiperight", function() {
$('#carousel-example-generic').carousel('prev')
})
})
</script>

  原文出处链接http://www.cnblogs.com/ytkah/p/5624142.html

Bootstrap轮播如何支持移动端左右滑动的更多相关文章

  1. Bootstrap幻灯轮播如何支持触屏左右滑动手势?

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  2. lightSlider 好图片轮播插件 支持移动端

    http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider https://github.co ...

  3. 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  4. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  6. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  7. Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  8. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  9. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

随机推荐

  1. grains和pillar的联合使用

    在编写sls文件的时候,对于不同的客户端,在配置管理的时候,其安装的环境,配置文件和启动的服务都相同: 如果完全是不同的环境,建议写单独的sls文件,不要混合在一起; 如果是相同的环境,只不过对于不同 ...

  2. Windows Server 2008中使用计划任务定时执行BAT bat进行PHP脚本的执行

    Windows Server 2008中使用计划任务定时执行BAT bat进行PHP脚本的执行 2016年01月03日 17:36:00 持之以恒 阅读数:5520 标签: windows定时任务.b ...

  3. Halcon示例:bottlet.hdev 光学字符识别(创建OCR)

    * * Training of the OCR* The font is used in "bottle.hdev"* * * Step 0: PreparationsFontNa ...

  4. HDU2665 求区间第K大 主席树

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2665 代码: //#include<bits/stdc++.h> #include< ...

  5. CDH Spark-shell启动报错

    Spark-shell启动报错      具体报错如下: 在CDH  YARN 中修改以下两个配置: yarn.scheduler.maximum-allocation-mb 2048 yarn.no ...

  6. EOS 权限

    [EOS权限] 1.查看权限 cleos get account $(Account_Name) 2.使用 cleos set account permission 命令来修改权限 可以看到,owne ...

  7. 图像处理项目——生成csv文件提高读取效率

    利用pyhton脚本生成csv文件 *开发环境为windows PyCharm*使用的是pyhton脚本*生成人脸和人脸对应的标签的csv文件 一:主要步骤 1.载入对应路径2.提取每一张图片对应的位 ...

  8. JVM参数类型

    java -version看版本号(混合模式) java -Xint -version  解释执行 java -Xcomp -version 编译执行 XX参数是不稳定的用来JVM调优和DeBug B ...

  9. Python练习-生成器、迭代器-2018.12.01

    如果列表元素可以按照某种算法推算出来,可以在循环的过程中不断推算出后续的元素.这样就不必创建完整的list,从而节省大量的空间.在Python中,这种一边循环一边计算的机制,称为生成器:generat ...

  10. T-codes & Rarely Seen Tables(Updated from previous note)

    T-codes C CO CO01/02/03:Production Order CG CG3Y:Download file from server,never used this before CM ...