Bootstrap轮播如何支持移动端左右滑动
一直觉得 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轮播如何支持移动端左右滑动的更多相关文章
- Bootstrap幻灯轮播如何支持触屏左右滑动手势?
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
- lightSlider 好图片轮播插件 支持移动端
http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider https://github.co ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- Bootstrap 轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
- bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
随机推荐
- WMS专业术语&系统功能操作培训
逻辑层:公司.分部.地区物理层:仓库.1个仓库只能属于思维的1个地区.命名规则:SCPRD_WMWHSE1货主:纳思达多货主:1个仓库可以配置1个或多个货主SKU:物料代码(stock keeping ...
- 关于.gitignore无法过滤某些文件
.gitignore文件用于忽略那些无需添加到版本管理的文件.但最近发现有些文件即使被加入到了.gitignore文件中,push时仍会被上传. 原因:如果某些文件已经被纳入了版本管理中,就算是在.g ...
- 二叉搜索树与双向链表(python)
题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. # -*- coding:utf-8 -*- # class TreeNo ...
- 【Python深入】Python中继承object和不继承object的区别
python中定义class的时候,有object和没有object的不同?例如: class Solution(object): class Solution(): 这俩的区别在于—————— 在p ...
- ExecuteNonQuery()
ExecuteNonQuery():执行一个SQL语句,返回受影响的行数,这个方法主要用于执行对数据库执行增加.更新.删除操作,注意查询的时候不是调用这个方法.用于完成insert,delete,up ...
- MySQL开发——【字段类型、约束】
创建数据表 基本语法: create table 数据表名称( 字段名称 字段类型 字段约束, ... )[表选项]; 字段类型 整数型 ,有符号型,可以表示 ,有符号型,可以表示 mediumint ...
- linux下部署monogoDB服务(以及安装php mogodb扩展)
这两天网站转移到新的服务器后,登录时出现一个问题,会等待几分钟服务器才响应. 开始以为是nginx服务器的问题,后面经过排查发现是php一个登陆验证的函数的问题,每次跑到这个函数就会迟钝几分钟. 经过 ...
- python基础之Day15
一.函数递归 什么是函数递归: 函数递归调用是一种特殊的嵌套调用,在调用一个函数的过程中,又直接或间接地调用了该函数本身. 其中,函数的递归有明确的结束条件,不能无限制的调用,否则会撑破内存,在Pyt ...
- HOSTNAME问题 和yum配置163源的操作 安装lsb_release,KSH,CSH
HOSTNAME 在 /etc/hosts 里添加一行 127.0.0.1 yourhostname yum配置 来自http://www.cnblogs.com/wutengbiao/p/41889 ...
- ulogd(一)
参考资料: https://blog.csdn.net/eydwyz/article/details/52456335 https://blog.csdn.net/chinalinuxzend/art ...