博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap幻灯轮播如何支持触屏左右滑动手势?
阅读量:6609 次
发布时间:2019-06-24

本文共 941 字,大约阅读时间需要 3 分钟。

  最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销。bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了。下面是幻灯片的原始html代码

  

  关键的步骤来了,我们需要写一个javascript命令调用hammer.js中的swipe功能

  div的id一定要对应,上面是carousel-example-generic,javascript中也要这个,否则不能实现。   需要注意的是,jquery版本最好是1.9版本的jquery-1.9.1.min.js,否则可能在电脑上可以实现手势滑动,而在手机上无法触摸滑动   javascript命令这个是关键,不会写不会改就不好玩了。做个标记,方便日后查询

转载地址:http://gqsso.baihongyu.com/

你可能感兴趣的文章
Unity5.1 新的网络引擎UNET(十五) Networking 引用--中
查看>>
用任务计划管理计划任务对付任务计划-禁止WPS提示升级
查看>>
Android——SlidingMenu学习总结
查看>>
React-Native 之 GD (十六)首页筛选功能
查看>>
UI概念体系要素
查看>>
SSISDB5:使用TSQL脚本执行Package
查看>>
performSelectorInBackground V.S detachNewThreadSelector?
查看>>
linux,Centos,bash: service: command not found
查看>>
【转】UIColor对颜色的自定义
查看>>
php编译报错 configure: error: Please reinstall the libcurl distribution - easy.h should be in <curl-...
查看>>
asp.net后台进程做定时任务
查看>>
Ural_1671. Anansi's Cobweb(并查集)
查看>>
Web墨卡托坐标与WGS84坐标互转
查看>>
给vs2012换肤
查看>>
java接口中多继承的问题
查看>>
索引笔记《二》确定需要建立索引的列
查看>>
libjpeg的问题
查看>>
MySQL数据库学习笔记(八)----JDBC入门及简单增删改数据库的操作
查看>>
git 显示多个url地址推送
查看>>
Java Web之Filter
查看>>