BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 :
1. jQuery Mobile (http://jquerymobile.com/download/)
1
2
3
4
5
6
|
$( "#carousel-generic" ).swipeleft( function () { $( this ).carousel( 'next' ); }); $( "#carousel-generic" ).swiperight( function () { $( this ).carousel( 'prev' ); }); |
2. TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)
1
2
3
4
|
$( "#carousel-generic" ).swipe({ swipeLeft: function () { $( this ).carousel( 'next' ); }, swipeRight: function () { $( this ).carousel( 'prev' ); }, }); |
3.hammer.js (http://eightmedia.github.io/hammer.js/) +
jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)
1
2
3
4
5
6
|
$( '#carousel-generic' ).hammer().on( 'swipeleft' , function (){ $( this ).carousel( 'next' ); }); $( '#carousel-generic' ).hammer().on( 'swiperight' , function (){ $( this ).carousel( 'prev' ); }); |
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)的更多相关文章
- 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...
- Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
Bootstrap 的 carousel.js 插件并没有支持手势. 3种解决方案 : jQuery Mobile (http://jquerymobile.com/download/) $(&quo ...
- Bootstrap 轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap 轮播(Carousel)详解
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...
- 第二百四十八节,Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap轮播(carousel)插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本 ...
- Bootstrap 轮播插件
一.轮播 //基本实例. <div id="myCarousel" class="carousel slide"> <ol class=&qu ...
- Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换
为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...
随机推荐
- JS对像和数组的遍历
零. 通用遍历方法 0.1 for...in... let obj = {0:"a", 1:"b", 2:"c"}; for (let ke ...
- 组件化框架设计之AOP&IOC(四)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 本篇文章将从以下两个方面来介绍组件化框架设计: [AOP(面向切 ...
- 简单写入excel
import pymysql,xlwt def to_excel(table_name): host, user, passwd, db = '127.0.0.1', 'root', '123', ' ...
- Q480S-I7 D1 笔记本使用 VS2015 运行性能探查器会导致电脑自动重启?
漏洞导致 https://www.freebuf.com/vuls/159642.html 使用以下两句 无法修复该问题,建议升级 win10 系统,使用 vs2017 reg add "H ...
- 详解Twitter开源分布式自增ID算法snowflake(附演算验证过程)
详解Twitter开源分布式自增ID算法snowflake,附演算验证过程 2017年01月22日 14:44:40 url: http://blog.csdn.net/li396864285/art ...
- spring(三):spring中BeanPostProcessor的使用
spring中实现BeanPostProcessor的后置处理器 ApplicationContextAwareProcessor 进入该实现类内部 可以看到:该类帮我们组建IOC容器,判断我们的be ...
- ajax请求超时解决方案
设置timeout的时间,通过检测complete时status的值判断请求是否超时,如果超时执行响应的操作. var ajaxTimeoutTest=$.ajax({ url:'',//请求地址 t ...
- Centos7 安装 clamav
环境 CentOS: 7.x 下载 下载地址 :http://www.clamav.net/downloads,使用目前最新版本为:clamav-0.101.3 使用 wget 下载 wget htt ...
- springBoot+mysql+mybatis demo [基本配置] [遇到的问题]
springBoot+mysql+mybatis的基本配置: 多环境 application.properties spring.profiles.active=dev spring.applicat ...
- linux下清空文件内容
在命令行下#cat /dev/null >listener.log