一直觉得 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. java.util.Stack类中的peek()方法

    java.util.stack类中常用的几个方法:isEmpty(),add(),remove(),contains()等各种方法都不难,但需要注意的是peek()这个方法. peek()查看栈顶的对 ...

  2. Discuz!开发之HTML转Discuz代码(bbcode)函数html2bbcode()

    定义文件:\source\function\function_editor.php函数定义: function html2bbcode($text) { $text = strip_tags($tex ...

  3. Tengine安装(阿里baba的)-Nginx

    在先前的文章中介绍过Tengine,先前只是使用了运维人员配置好的内容,未自己进行过安装配置.周末闲来无事,对于Tengine进行了尝试性的安装.记录下面方便以后再做改进. Tengine官网上有个非 ...

  4. 搭建中小规模集群之rsync数据同步备份

    NFS重要问题 1.有关NFS客户端普通用户写NFS的问题. 1)为什么要普通用户写NFS. 2)exports加all_squash. Rsync介绍 什么是Rsync? Rsync是一款开源的.快 ...

  5. ES6 proxy(代理拦截) &&Reflect

  6. mencached

    是一个免费开源的,分布式内存对象缓存系统数据库. 是一个非关系型数据库形式,属于NOSQL NOT OLNY SQL ,不仅仅是关系数据库 它属于K V 存储 KEY VALUE 相对应的存储 KEY ...

  7. python基础之Day12

    一.闭包函数 什么是闭包函数? 闭:函数是一个内部函数 包:指的是该函数包含对外部作用域(非全局作用域)名字的引用. 给函数传值的方式有两种: 1.使用参数直接给函数传值 2.包给函数 1 2 3 4 ...

  8. AX_InventCounting

    static void Job649(Args _args)  {      ItemId                  ItemId          = "000XA00612R1& ...

  9. MySQL InnoDB特性:两次写(Double Write)

    http://www.ywnds.com/?p=8334 一.经典Partial page write问题? 介绍double write之前我们有必要了解partial page write(部分页 ...

  10. 关于webconfig的记录恢复本

    <?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...