【swiper轮播插件】解决swiper轮播插件触控屏问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link charset="UTF-8" rel="stylesheet" href="css/spinner.css">
<style>
.swiper-container {
width: 100%;
height: 1.41rem;
overflow: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', // 水平切换选项
autoplay:true,
observer:true,
observeParents:true,
autoplayDisableOnInteraction:false,
touchRatio : 0.5,//触摸变慢
effect : 'cube',
dynamicBullets:true,
})
</script>
</body>
</html>
【swiper轮播插件】解决swiper轮播插件触控屏问题的更多相关文章
- angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper npm install --save swiper 或者 bower install --save swiper 引入文件 ...
- swiper,一个页面使用多个轮播
代码示例: <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper. ...
- swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势
<script> var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', //horizontal横 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- jQuery插件实践之轮播练习(一)
所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...
- Flexslider插件实现图片轮播、文字图片相结合滑动切换效果
插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...
- WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现
原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- 4.图片左轮播图(swiper)
一.html部分 二.js部分 三.源代码部分 <body> <div id="box"> <img src="imges/111.jpg& ...
- Angular中使用Swiper不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类, ...
随机推荐
- 简单的document操作
1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" ...
- html多文件上传,可支持预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- UIView和layer的区别
每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提供.两者都有树状层级结构,layer 内部有 SubLayers ...
- head 命令 读取文件的前n行,默认查看文件的前十行
head 命令 读取文件的前n行 默认查看文件的前十行 head /etc/passwd # 默认查看文件的前十行 /etc/passwd # 查看文件的前两行
- RN NetInfo使用
代码: class NetInfoView extends Component { getNetInfo() { //如果是andorid的程序,需要在xml添加获取网络请求权限 NetInfo.fe ...
- entry.define编程思路
0.lua将文字传给场景脚本. 1.场景脚本将pattern.define文件中的PAT当作子弹(水泡弹,带颜色) 2.用户的问题作为客户端的请求,发送给服务器端 3.服务器端接受客户端的问题请求 4 ...
- nginx 启动报错403
nginx 安装完成以后启动的时候报403, 网上找的答案是在配置文件nginx.conf里面加上 user root owner;这个要加在配置文件的第一行才行,否则还是会报错,配置文件截图为: 参 ...
- webpack打包多个入口文件
打包后的目录结构: webpack.config.js // path 模块提供了一些用于处理文件路径 const path = require('path'); // fs模块用于对系统文件及目录进 ...
- (转)以太坊(Ethereum ETH)的奖励机制
如果问一块显卡它最恨什么,那么答案一定是以太坊.以太坊,矿工为之疯狂,显卡为之颤抖,游戏玩家为之骂娘. 然而,除了购买矿机.连接矿池.卖币套现之外,是否有人关注过以太坊的奖励机制呢? 且听我慢慢道来. ...
- java实现的加密解密
void encode(File enfile, File defile) throws Exception { String Algorithm = "DES"; byte[] ...