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或者友情 ...
随机推荐
- 批处理学习笔记2 - 编写批处理的for循环
批处理中的for循环集成的功能比较多,可以直接对文件操作. ====================================================================== ...
- [k8s]通过svc来访问集群podhttp://api:8080/api/v1/namespaces/default/services/mynginx/proxy/
以往的套路是,安装完成k8s集群后-->安装dns-->安装ingress以便外面访问(或者映射nodeport方式) 如果你不想做任何关于ingress/nodeport一些操作.想通过 ...
- 【Android】将Xamarin For VS升级为4.0.1.145版
分类:C#.Android.VS2015 创建日期:2016-03-18 一.卸载原来安装的Xamarin for VS 4.0.0.1717版 下面是Xamarin for VS发布的版本简介: - ...
- 【Android】7.6 FrameLayout(帧布局)
分类:C#.Android.VS2015: 创建日期:2016-02-11 一.简介 帧布局是显示多个层次图的有效手段.比如第3章介绍的百度地图就是利用帧布局来实现的,它将图层分为22级分别缓存到指定 ...
- C++ 容器类 vector使用
vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法: 1.文件包含: ...
- C++ 11 Lambda表达式、auto、function、bind、final、override
接触了cocos2dx 3.0,就必须得看C++ 11了.有分享过帖子:[转帖]漫话C++0x(四) —- function, bind和lambda.其实最后的Lambda没太怎么看懂. 看不懂没关 ...
- GPIO实验(一)
目标:点亮LED1.看原理图,找到对应的引脚和寄存器2.a.配置寄存器为输入/出引脚 GPFCON[9:8]=0b01 b.设置输出高/低电平 GPDAT[4]=0b0 1.预处理2.编 ...
- Windows下 Pycharm连接Github 教程
Pycharm连接Github 绑定账号 1.File->Settings->Version Control->Github Settings.png 会出现github,然后在旁边 ...
- 【Unity笔记】经典的鼠标点击射线检测碰撞
void Update (){ )){ //从摄像机发出到点击坐标的射线 Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); Ra ...
- Java命令学习系列(三)——Jmap
Java命令学习系列(三)——Jmap 2015-05-16 分类:Java 阅读(479) 评论(0) Jmap jmap是JDK自带的工具软件,主要用于打印指定Java进程(或核心文件.远程调试服 ...