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 ...
随机推荐
- 获取cxgrid footer内容
cxGridDBTableView1.DataController.Summary.FooterSummaryValues[4];
- 制造业期刊-ZT
小虫一名英国博后,前阵发书,认识了很多机械制造领域的伙伴.得知我录用了多篇顶刊后,很多人私聊我求经验. 哎,哪里那么容易.回想过去5年,制造领域的期刊基本都被拒过一圈.当年自己投稿时就发现,制造顶刊的 ...
- TCP与UDP,可靠UDP如何实现
两种协议都是传输层协议,为应用层提供信息载体. TCP协议是基于连接的字节流的可靠协议,有三次握手,四次挥手,超时重传,流量控制(滑动窗口),拥塞控制和差错控制,也正因为有可靠性的保证和控制手段,所以 ...
- phpstorm 不能自动打开上次的历史文件
问题产生的原因:可能是电脑非正常关机,导致phpstrom 无法正常关闭. 一开始我以为是配置上那里出现了问题,所以直接就把配置删除了,然后生成了默认配置.发现还是无法解决问题.然后一个个配置查阅过去 ...
- java.lang.String (JDK1.8)
String类实现了java.io.Serializable, Comparable<String>, CharSequence这三个interface. 看了下这三个interface中 ...
- 一些hue的参考网址
CDH5.8 HUE的使用(那些年走过的坑) https://blog.csdn.net/gao123456789amy/article/details/79242713 HUE的时间问题等 http ...
- linux下redis4.0.2集群部署(利用原生命令)
一.部署架构如下 每台服务器准备2个节点,一主一从,主节点为另外两台其中一台的主,从节点为另外两台其中一台的从. 二.准备6个节点配置文件 在172.28.18.75上操作 cd /etc/redis ...
- socketserver 模块并发
socketserver是将socket封装的类. 实例: 服务端: import socketserver class Myserver(socketserver.BaseRequestHandle ...
- vue踩坑(一):打包上线
找到config→index.js 然后找到index.js的buildassetsPublicPath 这个修改为你的项目放在服务器的路径 像我的项目是放在wap 文件夹下的 这些配置完成后然后 ...
- 651. 4 Keys Keyboard复制粘贴获得的最大长度
[抄题]: Imagine you have a special keyboard with the following keys: Key 1: (A): Print one 'A' on scre ...