<!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. php 的Boolean类型

    1. bool值不用区分大小写 $flag = Ture; $flag = TRUE $flag = true; 2. 其他类型在运算中转换为bool值 var_dump((bool) '0'); / ...

  2. 使用Nginx搭建集群

    反向代理: 1.首先启动一个项目,启动后可以通过http://localhost:8080/getResult访问到接口,如图: 2.修改nginx配置文件,监听www.ouyan.com的80端口, ...

  3. 【JMeter】插件安装

    安装插件的方法有两种,一种是传统的方式,即官网下载,本地配置,重启jmeter.现在有一种快捷的方法可以自定义安装插件-插件管理器 JMeter 插件管理器的使用方法很简单:不要手动安装各种插件,它提 ...

  4. basename 命令

    basename命令的作用是获取脚本的名字 basename 作用:从给定的包含绝对路径的文件名中去除路径,然后返回剩下的文件名 [root@salt-client- sh1]# basename / ...

  5. 20171018 在小程序页面去获取用户的OpenID

    1. 在小程序的.js 文件中增加代码 //加载页面时到后台服务去获取openID onLoad: function (options) { //OpenId wx.login({ //获取code ...

  6. MySQL中drop,delete与truncate的区别

    drop直接删掉表 truncate删除表中数据,再插入时自增长id又从1开始 delete删除表中数据,可以加where字句. (1) DELETE语句执行删除的过程是每次从表中删除一行,并且同时将 ...

  7. 使用DigitalOcean控制台访问Droplet（远程服务器）

    介绍 大多数用户将使用SSH,PUTTY或安装的控制面板管理他们的DigitalOcean Droplet. 但是,可能会出现阻止您使用这些方法访问Droplet的情况. 例如,更改网络或服务配置文件 ...

  8. pycharm 如何设置方法调用字体颜色

    一.pycharm 如何设置方法调用字体颜色 1.打开pycharm编辑器,file > settings > editor > color scheme > python & ...

  9. 多线程之共享变量.md

    共享变量 - 共享变量:当多个线程同时访问一个变量的时候,会产生共享变量的问题 - 案例11 - 解决变量:锁.信号灯: - 锁(Lock): - 是一个标志,表示一个线程在占用一些资源 - 使用方法 ...

  10. 初学git

    初学git,总结了一点东西,可能有理解和操作的不到位的地方,还有就是这个是我之前写在word上的,因为CSDN上不能直接上传,所以拷贝的过程中也可能有其他问题.发的的朋友还望指正... 1.找到“参与 ...