swiper使用中一些点的总结
最近做了PC端改版,要求移动端有更好的体验,一些产品滚屏的展示,就用了swiper插件,以方便用户在移动端访问可以滑动翻屏展示。
本次项目中使用的是swiper2.0版本。
首先要引入swiper的js库和css库(此处不做赘述)
然后在此生成一个swiper实例,以供举例子
var mySwiper = new Swiper('.swiperLookBig', {
pagination: '.pagination',
loop: true,
paginationClickable: true
});
1.swipePrev()和swipeNext()方法,滑动到上一个模块/下一个模块
比如我点击某按钮执行滑到上一模块,就可以这样写:
$('.arrow-left').live('click', function (e) {
e.preventDefault();
mySwiper.swipePrev();
});
2.setWrapperTranslate(x,y,z) 手动设置wrapper的位移
比如我希望swiper向左便宜300px 我就可以这样写:
mySwiper.setWrapperTranslate(-300,0,0); 我在项目中的实际应用是点击小图之后显示相对应的大图,我就计算一下小图对应的index,然后乘以一下大图每屏的宽度 然后来实现对应图片的展示。本来activeLoopIndex可实现,但是可能因为大图
是默认隐藏的元素,对activeLoopIndex的计算不太准确,后来才尝试使用了此方法,效果还不错。
3.activeLoopIndex : 在loop模式下返回当前活动块的索引。
swiper使用中一些点的总结的更多相关文章
- better-scroll和swiper使用中的坑
better-scroll 1.我的 better-scroll 初始化了, 但是没法滚动. 按照文档使用后,发现可以原生滚动,但是不能弹性滑动,后面发现是最外层容器没给设置固定高度 ,设置固定 ...
- Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;
Swiper 是一个开源免费的移动触摸插件. 在使用中遇到这样一个问题,记录一下. page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小 ...
- Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...
- 使用Swiper快速实现3D效果轮播
最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...
- ORA-02020 : 过多的数据库链接在使用中-Windows环境解决步骤
一.现象 编译存储过程时报ORA-02020错误. 错误详细信息:ORA-04052在查找远程对象 xx@yy时出错 ORA-00604 : 递归 SQL 级别 1 出现错误 ORA-02020 : ...
- Subsonic使用中
使用中,遇到各种奇葩问题,依依汇总. 1.引用了Subsonic层后,一运行就开始报错,提示未能找到文件!! //引用后,目标框架可能会被改变,subsonic的默认框架是2.0,请检查框架是否 ...
- swiper插件 纵向内容超出一屏解决办法
1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...
- swiper的初步使用
1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...
- 关于移动端swiper的2种样式重置
手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...
随机推荐
- mfc双缓冲绘图
1.要求 在界面加载本地图片并显示,每过100ms改变一张图片显示 2.现象 通过定时器控制CImage,Load,Draw,Destroy,会非常的卡顿.因为Load图片时,会是非常大的数据[所有C ...
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- SPOJ 1811 LCS - Longest Common Substring
思路 和SPOJ 1812 LCS2 - Longest Common Substring II一个思路,改成两个串就有双倍经验了 代码 #include <cstdio> #includ ...
- IIC为什么要配置为开漏输出呢?
开漏输出只能输出低电平,类似于三极管的集电极,要输出高电平需要上拉电阻才能输出 当集电极接上拉电阻后,(1)基极为高电平,三极管导通,集电极的电位就会被拉低: (2)基极为低电平,三极管不导通,集电极 ...
- Maven构建 SpringMVC+Spring+MyBatis 环境整合
目录 1. Maven 项目搭建 2. Maven 插件生成 MyBatis 代码 3. 待续 ... 开发环境 开发环境请尽量保持一致,不一致的情况可能存在问题. JDK 1.7 MyEclipse ...
- 剑指offer 14:链表中倒数第k个节点
题目描述 输入一个链表,输出该链表中倒数第k个结点. /* public class ListNode { int val; ListNode next = null; ListNode(int va ...
- 【NET Core】Nuget包发布流程
1.新建一个.NET Core类库 2.新增一个方法,并编译项目 3.下载Nuget.exe,与刚才新建的类库放在同一目录下 下载地址:https://www.nuget.org/downloads ...
- Python开发 基础篇
2019-02-01 产生验证码: 用户输入的值和显示的值相同时显示Correct,否则继续生成随机验证码等待用户输入 def check_code(): import random checkcod ...
- chordDiagramFromMatrix()函数与circos.link()函数结合绘制箭头线
chordDiagramFromMatrix(matp2,annotationTrack="grid", grid.col = c(re ...
- MySQL 8.0.12 基于Windows 安装教程(超级详细)
MySQL 8.0.12 基于Windows 安装教程(超级详细) (一步一步来,装不了你找我!) 本教程仅适用Windows系统,如果你原本装了没装上,一定要先删除原本的数据库,执行:mysqld ...