一直觉得 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 ...
随机推荐
-
LINQ系列:Linq to Object量词操作符
量词操作符返回一个Boolean值,指示序列中是否存在部分或全部元素符号指定条件.LINQ中量词操作符包括:All.Any和Contains. 1. All All操作符判定在集合中是否所有的值都满足 ...
-
postgres 批量更新内容
在程序中遇到这样的需求, 数据库表格式如下 需要把批量更新status, 如name = fox 时, status = 1, name = boa 时,status = 2 .... 类似的 pos ...
-
Tomcat系统部署启动问题分析一例[sudo 启动]
今天的系统获取新的版本后部署时突然tomcat无法启动,而比较版本的变化内容,也就是几个jsp和js文件的变化,对于web.xml等都没有调整. 这个问题很是奇怪,下面把步骤总结一下,以避免类似的问题 ...
-
Docker create image
Dockerfile FROM java:8 MAINTAINER dudu ADD springts_1-0.0.1-SNAPSHOT.jar app.jar EXPOSE 8080 ENTRYPO ...
-
overflow:hidden清除浮动原理解析及清除浮动常用方法总结
最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...
-
Android01-布局篇
在Android中,共有五种布局方式,分别是:LinearLayout(线性布局),FrameLayout(帧布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局) ...
-
destoon分页
<?php //控制分页//分页$pagesize=4;$pagesql="SELECT COUNT(*) AS num FROM `{$DT_PRE}` company"; ...
-
scala中spark运行内存不足
用 bash spark-submit 在spark上跑代码的时候出现错误: ERROR executor.Executor: Exception in task 9.0 in stage 416.0 ...
-
快速学会在JSP中使用EL表达式
在没有学会EL表达式之前,我们想在JSP文件中获取servlet或者其他JSP页面传来的值,通常都是在JSP页面中编写java代码来实现.而在jsp页面编写Java 代码,这种做法时不规范的,将会产生 ...
-
用Pylint规范化Python代码,附PyCharm配置
Pylint一个可以检查Python代码错误,执行代码规范的工具.它还可以对代码风格提出建议. 官网:https://pylint.readthedocs.io pip install pylint ...