一直觉得 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. linux下配置redis4.0.2主从复制以及高可用

    一.环境 三台服务器分别为: 172.28.18.75/172.28.18.103/172.28.18.104 在三台服务器上分别部署一个redis节点以及一个sentinel节点 二.主从复制配置 ...

  2. 《CSAPP》地址翻译

    本节所使用的符号: 地址翻译 地址翻译是一个N元素的虚拟地址空间(VAS)中的元素和一个M元素的物理地址空间(PAS)中元素之间的映射. 映射实现: MMU利用页表来实现这种映射.CPU中的一个控制寄 ...

  3. ELK填坑总结和优化过程

    做了几周的测试,踩了无数的坑,总结一下,全是干货,给大家分享~ 一.elk 实用知识点总结 1.编码转换问题(主要就是中文乱码) (1)input 中的codec => plain 转码 cod ...

  4. 牛客练习赛42(A,B)

    A:链接:https://ac.nowcoder.com/acm/contest/393/A 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K 6 ...

  5. python08内置函数

    https://www.cnblogs.com/xiao1/p/5856890.html 1 .all(可迭代对象),对每个元素进行布尔运算,全部为真,函数结果就为真,否则为假 参数为一个整体的情况例 ...

  6. 《C#从现象到本质》读书笔记(五)第5章字符串第6章垃圾回收第7章异常与异常处理

    <C#从现象到本质>读书笔记(五)第5章字符串 字符串是引用类型,但如果在某方法中,将字符串传入另一方法,在另一方法内部修改,执行完之后,字符串的只并不会改变,而引用类型无论是按值传递还是 ...

  7. AX_Function

    formrun.owner().GetItemId() if (fr.name() == formstr(inventTransEditDimensions) || fr.name() == form ...

  8. C语言基础课第五次作业

    PTA第五次作业 7-2 统计一行文本中的单词个数 一.程序代码 #include<stdio.h> int main(void) { ]; ,word=; char c; gets(st ...

  9. mui几种页面跳转方式对比

    1.初始化时创建子页面 mui.init({ subpages: [{ url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址 id: your - su ...

  10. 如何解决XMLHttpRequest cannot load file:~~~~~~~~~~~. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-res

    原因:Chrome不支持本地Ajax请求. 解决: 右击Chrome浏览器快捷方式,选择“属性”,在“目标”中加上"--allow-file-access-from-files", ...