bootstrap大图轮播手机端不能手指滑动解决办法
网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用:
<script>
$(function(){
var myTouch = util.toucher(document.getElementById('carousel-index'));
myTouch.on('swipeLeft',function(e){
$('.right').click();
}).on('swipeRight',function(e){
$('.left').click();
});
})
</script>
获取的id为整个大图轮播最外层的id,
$('.right')、$('.left') 为左右点击箭头的类名,如轮播不需要左右箭头,给箭头加 display:none; 就可以。
亲测很实用! 参考链接:http://blog.csdn.net/wmwyyx/article/details/46608893
bootstrap大图轮播手机端不能手指滑动解决办法的更多相关文章
- swiper入门之快速实现轮播--手机端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- [DBW]大图轮播,可通过两种方法实现
通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...
- 基于bootstrap的轮播广告页,带图片和文字
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
- bootstrap 获得轮播中的索引 getActiveIndex
今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引 ...
- Bootstrap中轮播图
Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示
在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...
随机推荐
- Spring 一二事(9) - xml 形式的 AOP
AOP在spring中是非常重要的一个 在切面类中,有5种通知类型: aop:before 前置通知 aop:after-returning 后置通知 aop:after 最终通知 aop:af ...
- [na]vrrp两用(网关冗余+服务器热备)
VRRP的两种用途 早上想了想vrrp的使用,1,网关冗余 2,服务器热备 思想稍微有点不一样.主要在于监控口 服务器的话有心跳线,用户同步一些配置和迁移一些服务.达到热备的目的.:牵涉到四个优先级: ...
- 【Android】10.2 使用Android Support Library增强组件功能
分类:C#.Android.VS2015: 创建日期:2016-02-18 一.简介 Android Support Library提供了一些非常漂亮的附加功能,由于这些库的引用办法都差不多,所以这一 ...
- 原来npm的依赖树管理不靠谱
今天删除了一个模块,结果发现项目编译无法成功,缺依赖,然后再安装也不行了.只好把node_modules清空,重新npm install,项目恢复正常. npm uninstall的时候,可能把现存某 ...
- Python asyncio文档阅读摘要
文档地址:https://docs.python.org/3/library/asyncio.html 文档第一句话说得很明白,asyncio是单线程并发,这种event loop架构是很多新型异步并 ...
- asp.net mvc 5 在没有外网win2008R2服务器部署方法
我在本地用最新的.net 4.5和asp.net mvc 5框架做了一个小应用.本地都测试打包成功. 现在要放到服务器上,这个应用只是内网用.服务器不允许连接外网.看到www.asp.net 没有mv ...
- LeetCode: Median of Two Sorted Arrays 解题报告
Median of Two Sorted Arrays There are two sorted arrays A and B of size m and n respectively. Find t ...
- SharePoint自动化系列——Upload files to SharePoint library using PowerShell.
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 日常的SharePoint站点测试中,我们经常要做各种各样的数据,今天又写了几个脚本,发现自己写的 ...
- Oracle 外键约束子表、父表
CREATE TABLE employees( employee_id NUMBER(6), last_name VARCHAR2(25) NOT NULL, ...
- linux设置开机服务自动启动/关闭自动启动命令
linux设置开机服务自动启动/关闭自动启动命令 2012-02-06 15:13 [root@localhost ~]# chkconfig --list 显示开机可以自动启动的服务[roo ...