<!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. 什么是ELK

    为什么用到ELK: 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太慢怎么办 ...

  2. 汇编-5.0-[BX]和loop指令

    1.要完整的描述一个内存单元,需要两种信息:1.内存单元的地址:2.内存单元的长度(类型). 2."()"表示一个寄存器或一个内存单元中的内容.如:(ax)表示ax中的内容. &q ...

  3. java实现消息队列的两种方式

    https://blog.csdn.net/fenfenguai/article/details/79257928

  4. （4.2）mysql备份还原——备份概述

    1.什么情况下会用到备份呢? [1.1]灾难恢复 [1.2]单位审计:数据库在过去某一个点是什么样的 [1.3]跨机房灾备:异地备份 [1.4]认为的DDL或者DML语句,导致主从库的数据消失 [1. ...

  5. 003-pro ant design 前端权限处理-支持URL参数的页面

    前天需要增加MD5引用 https://www.bootcdn.cn/blueimp-md5/ 1.修改权限文件(CheckPermissions.js)使用自定义权限 2.配置异常页面 2.1.创建 ...

  6. PHP 判断括号是否闭合

    一开始的思路就是判断每种括号的开闭数量是否相等,其实虽然也能实现但是搞得太复杂了: 后来查了查,只需设一个常量,左括号  +1,右括号   -1,闭合的话为0,没闭合的话不为0, 出现<0即为顺 ...

  7. 用lua扩展你的Nginx（整理）-----openresty

    用lua扩展你的Nginx(整理) 首先得声明.这不是我的原创,是在网上搜索到的一篇文章,原著是谁也搞不清楚了.按风格应该是属于章亦春的文章. 整理花了不少时间,所以就暂写成原创吧. 一. 概述 Ng ...

  8. DLNg改善深层NN：第一周DL的实用层面

    1.为什么正则化可以减少过拟合? //答:可以让模型参数变小,减小模型的方差. 在损失函数中加入正则项,在正则化时,如果参数lamda设置得足够大,那么就相当于权重系数W接近于0 ,就会减少很多隐藏单 ...

  9. gerrit上的commit msg中关联jira单号(含gerrit的安装)

    这个问题折腾了很久,前期后后大概一个月吧,终于搞定了,查了很多资料,有的不完整,有的完全就不能用,有的没说完整,所以一定要记录下来,我的心血啊. 由于公司在用的gerrit的是正式环境中的,大家都在使 ...

  10. 【产品案例】我是如何从零搭建起一款健身O2O产品的？

    作者: Wander_Yang 我在年初参与到“SHAPE”这款健身产品的研发中,也算是第一次以产品经理的身份,从0开始负责一个产品的建立. 产品是一款O2O的智能健身连锁店,目前产品已经上线8个月, ...