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自适应,也 ...
随机推荐
- Oh-My-Zsh及主题、插件安装与配置
切换zsh Manjaro linux默认安装了zsh,其他可能需要先安装 cat /etc/shells #查看本地有哪几种shell chsh -s /bin/zsh #切换到zsh 默认终端启动 ...
- ejs常用功能函数
利用<%- include filename %>加载其他页面模版: 1.缓存功能,能够缓存已经解析好的html模版: 2.<% code %>用于执行其中javascript ...
- xueping wang 记录
https://www.bbsmax.com/A/lk5aVBod1O/ https://pkgs.org/statistics/ 在firefox的调试控制台, 下面有一个独立的分割的控制台窗口, ...
- C# 将对应的xml文档赋值给指定模型(对象)
public static IList<T> XmlToEntityList<T>(string xml) where T : new() { ...
- SpringBoot后台接收前台的字符串数据
需求 将前台传入的字符串数据转为int类型. 操作 在pom.xml中添加引用. <dependency> <groupId>org.apache.commons</gr ...
- oracle 11g RAC 的基本操作(一)------启动与关闭
启动RAC 手工启动按照HAS, cluster, database的顺序启动,具体命令如下: 启动HAS(High Availability Services),必须以root用户 [root@or ...
- Sonar 配置及部署(Linux系统)
之前在windows系统上部署了sonar代码审查,由于工作需要,需要在Linux环境再部署一套. 其实,部署的大体都是大同小异的,这里罗列下各个配置,与windows部署不同的地方会重点说一下. 数 ...
- VUE之图表操作
参考 v-charts文档有详细说明,不多做介绍. 感谢博主的梳理,我在此基础之上稍作修改 效果展示: 在工作中遇到了就记录下来,留作备用,以便今后查阅: 安装 npm install vue-sch ...
- 事务,mybatis
数据库事务:一件完整的事情, 要么全部成功,要么就全部失败 金典案例:转账 A给B转账:100 A:-100 B:+100 如何开启事务: Start transaction; 之前的转账操作(如果在 ...
- 在webpack3里使用uglifyjs
环境:webpac<4的场景下,安装uglifyjs. cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加 ...