最近做了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使用中一些点的总结的更多相关文章

  1. better-scroll和swiper使用中的坑

    better-scroll  1.我的 better-scroll 初始化了, 但是没法滚动. 按照文档使用后,发现可以原生滚动,但是不能弹性滑动,后面发现是最外层容器没给设置固定高度   ,设置固定 ...

  2. Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;

    Swiper 是一个开源免费的移动触摸插件. 在使用中遇到这样一个问题,记录一下. page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小 ...

  3. Vue.js 使用 Swiper.js 在 iOS 11 时出现错误

    前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...

  4. 使用Swiper快速实现3D效果轮播

    最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...

  5. ORA-02020 : 过多的数据库链接在使用中-Windows环境解决步骤

    一.现象 编译存储过程时报ORA-02020错误. 错误详细信息:ORA-04052在查找远程对象 xx@yy时出错 ORA-00604 : 递归 SQL 级别 1 出现错误 ORA-02020 : ...

  6. Subsonic使用中

    使用中,遇到各种奇葩问题,依依汇总. 1.引用了Subsonic层后,一运行就开始报错,提示未能找到文件!!    //引用后,目标框架可能会被改变,subsonic的默认框架是2.0,请检查框架是否 ...

  7. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  8. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  9. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

随机推荐

  1. go-switch特点

    程序中遇到有枚举分支逻辑时,需要用到 switch 代替多个 if else 判断. 学习过程遇到一些与C#不同点,记录下. 语法: switch expr { case x1 : //expr为x1 ...

  2. SPOJ 8093 JZPGYZ - Sevenk Love Oimaster

    思路 可以用复杂度不对的做法水过去 相当于求parent树子树中的颜色种数,可以离线后树状数组(HH的项链,询问右端点排序之后维护last),dsu on tree,莫队都可以 但是也可以记录每个点上 ...

  3. c# 集合去重并筛选

    (from context in retDataList group context by context.ResourceId into g select g.OrderByDescending(b ...

  4. Jmeter 常见错误

    常见错误 https://testerhome.com/topics/10950 接口测试 https://blog.csdn.net/github_27109687/article/details/ ...

  5. 11_vim

    vim编辑器 文本编辑器,字处理器linux重要哲学思想之一:使用纯文本格式来保存软件的配置信息,大多数情况下都是如此,而且一切皆文件此前学过nano,sed..nano入门简单,但功能简陋 vi:V ...

  6. 远程和Ubuntu服务器进行Socket通信,使用python和C#(准备篇)

    服务器在阿里云上,和一般的本地配置方案不太一样,所以网上的博客里没有解决办法,本人在这里记录一下,方便大家交流. 由于数据要保存到MySQL数据库中,使用python对数据进行操作,爬到数据直接进行保 ...

  7. webpack创建页面的过程

    1.项目文件夹中创建各类型文件放置的文件夹,如:iTestingWeb文件夹下创建src dist文件夹,用途:src为源码 dist为生成后的文件放置位置,然后在源码文件夹中进一步按文件类型增加文件 ...

  8. JS 自由变量---JS 学习笔记(三) 补充

    自由变量:在 A 中作用域要用到的变量  x,并没有在 A 中声明,要到别的作用域中找到他,这个变量 x 就是自由变量.代码示例如下: var x = 20; function A (b) { ret ...

  9. JS-NaN的数据类型

    NaN 的数据类型:not a number .是数字类型但是不是数字 例: var x = Number('abcd'); //结果是NaN alert( typeof (x) ); //结果是nu ...

  10. java小白也能懂的面向对象

    类是对一组具有共同特征和行为的对象的抽象描述. 理解 [1]类是专门用于描述现实生活中的事物的. [2]类描述的事物都具有共同的特征和行为. [3]类就是我们通常所说的 “类型” ,描述的是一个群体性 ...