【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类, ...
随机推荐
- 域PC脱域
SID是什么意思SID 只是安全标识符的缩写而已.SID 的全称是“安全标识符(Security Identify)”,是为域或本地计算机中创建的每个帐户分配的唯一 ID 字符串(例如,S-1-5-2 ...
- fopen 的使用
1, fopen() 的使用,在linux环境下,我们可以使用man fopen查看使用说明: #include <stdio.h> FILE *fopen(const char *pat ...
- 【SQL】SQL存储过程相关当前理解。(@temp=……)
1.下图左侧红框中的是SQL的存储过程,是程序同SQL之间互相调用的函数.——这里先作为了解不做深入研究. 比如客户通过ATM提款机取200元钱,程序中提交取200元钱操作,后续可能会进入SQL进行一 ...
- python-面向对象-06_私有属性和私有方法
私有属性和私有方法 01. 应用场景及定义方式 应用场景 在实际开发中,对象 的 某些属性或方法 可能只希望 在对象的内部被使用,而 不希望在外部被访问到 私有属性 就是 对象 不希望公开的 属性 私 ...
- wamp3.1.0下载地址
WAMP是Windows用来搭建网站或服务器的开源软件,包含Apache + Mysql/MariaDB + Perl/PHP/Python等开发组件,方便快速便捷配置环境,很多朋友说wamp官网下载 ...
- 003-RFC关于媒体类型说明
一.概述 RFC-822 Standard for ARPA Internet text messages [ARPA互连网文本信息标准]RFC-2045 MIME Part 1: Format ...
- mongodb studio 3t 破解无限使用脚本
@echo off ECHO 重置Studio 3T的使用日期...... FOR /f "tokens=1,2,* " %%i IN ('reg query "HKEY ...
- vue中常用的两中页面刷新的方式和页面回退
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...
- python中的0,None,False,空容器
在Python中,None.空列表[].空字典{}.空元组().0等一系列代表空和无的对象会被转换成False.除此之外的其它对象都会被转化成True. 1.0等于False,这点要注意. 2.空的l ...
- Centos7 zookeeper单机/集群安装详解和开机自启
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...