boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销。bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了。下面是幻灯片的原始html代码
Previous
Next
关键的步骤来了,我们需要写一个javascript命令调用hammer.js中的swipe功能
$(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')
})
})
div的id一定要对应,上面是carousel-example-generic,javascript中也要这个,否则不能实现。
需要注意的是,jquery版本最好是1.9版本的jquery-1.9.1.min.js,否则可能在电脑上可以实现手势滑动,而在手机上无法触摸滑动
javascript命令这个是关键,不会写不会改就不好玩了。做个标记,方便日后查询
以上所述是小编给大家介绍的Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...相关推荐
- html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
- 幻灯片轮播图(含自动播放和手动点击播放,代码易懂)
HTML代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
- 使用CSS实现简单的图片切换(轮播图)
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录 使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
- jQuery和CSS3商品图片预览轮播图插件
这是一款非常实用的 jQuery和 CSS3创意商品图片预览 轮播图插件.该轮播图插件以每个商品作为一个轮播图,用户可以在每个商品缩略图中查看该商品的颜色和款式.一般的商务网站都是通过图片来吸引用户, ...
- bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
- dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
- JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- html中轮换图片插件,jQuery轮播图插件
插件描述:该插件基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果 全屏轮播图 该插件基于jquery开发,现阶段很多PC网站都需要用到轮播图切换的效果,很多时候要在页面中复用轮播图, ...
- 老徐WEB:JS简单实现图片滚动效果轮播图,自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
最新文章
- linux java 构建工具有哪些,Linux ant --强大的Java开发构建工具
- python 导入库:from scipy.misc import imread出错问题
- zabbix-2.4.8使用yum一键部署zabbix
- JDBC——jdbcUtils加载配置文件赋值
- 解决jquery版本冲突问题
- IT职业教育行业报告
- 【Java基础篇】try catch finally语句包含return语句时的执行过程
- unity 畸变_unity3d 几种镜头畸变
- 《C++ Primer》关于自增自减操作符的描述错误
- 蓝桥杯 ADV-193算法提高 盾神与条状项链
- js 中使用map的两种方式
- 新时达as380服务器显示75,成为电梯高手之新时达AS380控制系统故障代码
- php寻仙记,【网站搭建】寻仙记+天空之城两款文字游戏PHP源码
- 使用麦咖啡打造安全系统
- Linux 下安装交叉编译工具链
- 内外网隔离 双网隔离DoraOS云终端双桌面云办公应用
- 脸上长了黄褐斑怎么办
- 反病毒技术及其发展趋势
- python数据分析电影论文_以腾讯5000部电影为例,告诉你Python数据分析该怎么做...
- 经济学人The right call on Huawei (20190427)
热门文章
- 设计模式之 - 简单工厂模式
- centos7 apache2.4 多站点配置
- LinkedIn公司采用超大规模数据中心设计
- 【Android开发日记】第一个任务Android Service!Service靴+重力感应器+弹出窗口+保持执行...
- 修改文档框架:word-多级列表与标题样式相结合
- doxygen相关问题 转
- happy 99 (转载)
- 《中国编程挑战赛--资格赛》赛题及解答
- python线性回归模型预处理_线性回归-2 数据预处理与模型验证评估
- MapReduce基础开发之一词汇统计和排序(wordcount)