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或者友情 ...
随机推荐
- 【Android】3.20 示例20—全景图完整示例
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 1.展示全景图的方式 有以下展示全景图的办法: (1)利用地理坐标展示全景图. (2)利用全景图ID ...
- 我为什么鼓励程序员写blog
工程师该怎样才能突破自己的能力瓶颈?写 blog! 工程师该怎样精进自己在职涯上所需要的能力?写 blog! 工程师该怎样才能保持学习与成长的动能?写 blog! 工程师该怎样才能证明自己的潜力与特质 ...
- 使用编辑器上传代码到数据库,数据库中的代码有html代码,前台显示html乱码处理
网页出现乱码的解决办法 String content = teacher_mytask_detaillist.get(1)+"";//获取到数据库中的字段值,进行相应的替换 con ...
- ubuntu下超强的截图工具scrot
Scrot ,是一个命令行下使用的截图工具,支持全屏.窗口.选取.多设备.缩略图.延时,甚至可以截图完毕之后指定某程序打开截好的图片. 终端安装: sudo apt-get install s ...
- 在开发中写一些tool来提升自己的效率
比如说,我在调试一个web-project的时候,因为eclipse默认编译好的.class文件放在/build/classes/中,但是我希望随时把这些class文件放到/WEB-ROOT/WEB- ...
- LeetCode: Spiral Matrix II 解题报告-三种方法解决旋转矩阵问题
Spiral Matrix IIGiven an integer n, generate a square matrix filled with elements from 1 to n2 in sp ...
- Python 并行分布式框架 Celery
Celery 简介 除了redis,还可以使用另外一个神器---Celery.Celery是一个异步任务的调度工具. Celery 是 Distributed Task Queue,分布式任务队列,分 ...
- poj2452
题意:就是说给你一段区间,要你找出一段最长的区间,在这段区间的所有数都大于区间的第一个数.小于区间的最后一个数......输出区间的长度,若是长度为0则输出-1. 4 5 4 3 6 4 6 5 4 ...
- 纯css3实现图片三角形排列
当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览 ...
- Maven学习:项目之间的关系
Maven不仅可以定义一个项目中各个模块之间的关系,还可以更延伸一步定义项目与项目之间的关系. 定义父子项目的好处还是挺多的.