<!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. 关于安装SVN Service 出错 Service 'VisualSVN Server' failed to start. Please check VisualSVN Server log in Event Viewer for more details

    关于安装SVN Service 出错 Service 'VisualSVN Server' failed to start. Please check VisualSVN Server log in ...

  2. wps去广告

    彻底解决WPS弹出热点广告.WPS购物图标的办法 方法一:(一定有效) https://www.cnblogs.com/ytaozhao/p/5654149.html 一直用WPS,但一直有一个问题迟 ...

  3. 数据库——MongoDB增删改查

    MongoDB增删改查操作 本文包含对数据库.集合以及文档的基本增删改查操作 数据库操作 #1.增 use config #如果数据库不存在,则创建并切换到该数据库,存在则直接切换到指定数据库. #2 ...

  4. max_allowed_packet引起同步报错处理

    一台MySQL的Cat数据库,每天早上1点定期删除,有4个表,删除完后,这4个表都有blob字段,很大量,部署删除job就同步报错. Got fatal error 1236 from master ...

  5. 003-RFC关于媒体类型说明

    一.概述 RFC-822   Standard for ARPA Internet text messages [ARPA互连网文本信息标准]RFC-2045 MIME Part 1: Format ...

  6. ABP-添加表

    1.在My_ABP.Core根目录下先创建一个文件夹,在该文件夹里创建一个公共的类,在里面定义所需要用到的属性 public class Person:Entity      {         pu ...

  7. Observer（__ob__: Observer） 对象添加属性

    重点通过这句话给对象添加属性: this.$set(r,'upshow',false); 在data中定义laws来装从接口中请求到数据 data(){ return{ laws:[],//法律依据 ...

  8. 在golang中使用 cgo，如何让被嵌入的c语言代码调用golang

    https://golang.org/misc/cgo/test/callback.go // Copyright 2011 The Go Authors. All rights reserved. ...

  9. sap 类的左侧导航栏

  10. [js]js的表单验证

    http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id= ...