<!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
,
      effect : 'coverflow',// cube  // 切换效果
        autoplayDisableOnInteraction:false,
touchRatio : 0.5,//触摸变慢
effect : 'cube',
dynamicBullets:true,
})
</script>
</body>
</html>

【swiper轮播插件】解决swiper轮播插件触控屏问题的更多相关文章

  1. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  2. swiper,一个页面使用多个轮播

    代码示例: <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper. ...

  3. swiper移动端下不能正常轮播的解决方案-----此坑没躺过估计很难找到正确姿势

    <script> var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', //horizontal横 ...

  4. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  5. jQuery插件实践之轮播练习(一)

    所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...

  6. Flexslider插件实现图片轮播、文字图片相结合滑动切换效果

    插件下载: 点击下载 密码: fbeg Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素 ...

  7. WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现

    原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...

  8. 4.图片左轮播图(swiper)

    一.html部分 二.js部分 三.源代码部分 <body> <div id="box"> <img src="imges/111.jpg& ...

  9. Angular中使用Swiper不能滑动的解决方法

    Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类, ...

随机推荐

  1. 简单的document操作

    1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" ...

  2. html多文件上传,可支持预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. UIView和layer的区别

    每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提供.两者都有树状层级结构,layer 内部有 SubLayers ...

  4. head 命令 读取文件的前n行,默认查看文件的前十行

    head 命令 读取文件的前n行 默认查看文件的前十行 head /etc/passwd # 默认查看文件的前十行 /etc/passwd # 查看文件的前两行

  5. RN NetInfo使用

    代码: class NetInfoView extends Component { getNetInfo() { //如果是andorid的程序,需要在xml添加获取网络请求权限 NetInfo.fe ...

  6. entry.define编程思路

    0.lua将文字传给场景脚本. 1.场景脚本将pattern.define文件中的PAT当作子弹(水泡弹,带颜色) 2.用户的问题作为客户端的请求,发送给服务器端 3.服务器端接受客户端的问题请求 4 ...

  7. nginx 启动报错403

    nginx 安装完成以后启动的时候报403, 网上找的答案是在配置文件nginx.conf里面加上 user root owner;这个要加在配置文件的第一行才行,否则还是会报错,配置文件截图为: 参 ...

  8. webpack打包多个入口文件

    打包后的目录结构: webpack.config.js // path 模块提供了一些用于处理文件路径 const path = require('path'); // fs模块用于对系统文件及目录进 ...

  9. (转)以太坊(Ethereum ETH)的奖励机制

    如果问一块显卡它最恨什么,那么答案一定是以太坊.以太坊,矿工为之疯狂,显卡为之颤抖,游戏玩家为之骂娘. 然而,除了购买矿机.连接矿池.卖币套现之外,是否有人关注过以太坊的奖励机制呢? 且听我慢慢道来. ...

  10. java实现的加密解密

    void encode(File enfile, File defile) throws Exception { String Algorithm = "DES"; byte[] ...