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自适应,也 ... 
随机推荐
- SonarQube安装文档
			1.SonarQube 1.1 SonarQube介绍 SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误. SonarQube是否可以使用自定义规则由开发人员的开 ... 
- linux服务基础(二)之httpd2.2基础配置
			一.安装httpd服务 CentOS6 默认安装httpd2.2版本 CentOS7 默认安装httpd2.4版本 # yum install httpd 二.安装后相关文件说明 配置文件: /etc ... 
- Ubuntu如何启用root用户登录
			默认安装Ubuntu都是不允许以root用户进行登录的,想要以root用户进行登录需要进行一些操作,主要是以下几个步骤: 第一步 在终端输入命令:sudo passwd root 以普通用户登录系统, ... 
- 解决来自美国IP的攻击过程
			1.因为最近接口文档confluence服务总是自动关闭. 解决方法: 1.查看阿里云上的报警提示,看到来自外国的Ip的攻击.这时我选择把攻击的IP加入黑名单. 加入黑名单的方法:https:// ... 
- Keras + LSTM 做回归demo
			学习神经网络 想拿lstm 做回归, 网上找demo 基本三种: sin拟合cos 那个, 比特币价格预测(我用相同的代码和数据没有跑成功, 我太菜了)和keras 的一个例子 我基于keras 那个 ... 
- C# Selenium 破解腾讯滑动验证
			什么是Selenium? WebDriver是主流Web应用自动化测试框架,具有清晰面向对象 API,能以最佳的方式与浏览器进行交互. 支持的浏览器: Mozilla Firefox Google C ... 
- 怎么样启用红米手机5的ROOT权限
			红米手机5能如何拥有了root超级权限?各位清楚,android机器有root超级权限,一旦手机拥有了root相关权限,就能够实现更强的功能,举个栗子各位公司的营销部门的妹纸,使用较多营销工具都需要在 ... 
- time series 时间序列 | fractional factorial design 部分要因试验设计
			作业: 1) A plot of data from a time series, which shows a cyclical pattern – please show a time series ... 
- requests库爬取猫眼电影“最受期待榜”榜单 --网络爬虫
			目标站点:https://maoyan.com/board/6 # coding:utf8 import requests, re, json from requests.exceptions imp ... 
- 集合基本操作 Python DAY2
			集合本身具有两个特性 1.去重 2.关系测试 列表转集合的两种写法: list_1=[1,2,3,4,1,2,7,8,] list_1=set(list_1) #方法二 list_2=set([1, ... 
