swiper轮播箭头垂直居中
取消懒加载
for (var i in $('.p01-s9 .lazyload')) {
$('.p01-s9 .lazyload').eq(i).attr('src',$('.p01-s9 .lazyload').eq(i).attr('data-src'));
}
$('.p01-s9 .lazyload').removeClass('lazyload').addClass('lazyloaded');
//轮播箭头垂直居中
function reactiveGallaryArrowTop($swiper) {
var outerHeight = $($swiper).find(".swiper-wrapper").height();
var imgHeight = $($swiper).find(".swiper-slide").find("img").height();
var percentage = 0.5*imgHeight/outerHeight * 100;
var prevArrow = $($swiper).find(".prev");
var nextArrow = $($swiper).find(".next");
prevArrow.css({
"top": percentage + '%'
});
nextArrow.css({
"top": percentage + '%'
});
}
//swiper调用
on: {
imagesReady: function() {
$('.p01-s5 img').load(function() {
reactiveGallaryArrowTop('#p01-s5');
});
},
resize: function() {
$('.p01-s5 img').load(function() {
reactiveGallaryArrowTop('#p01-s5');
});
}
}
swiper轮播箭头垂直居中的更多相关文章
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
- 视频swiper轮播
关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- swiper轮播图(逆向自动切换类似于无限循环)
swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...
- Swiper轮播图
今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码: <!DOCTYPE html> <html lang="en"> < ...
- 微信小程序_(组件)swiper轮播图
微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...
- Swiper轮播隐藏再显示后不动
公告用Swiper轮播方式,在某些不需要显示公告的页面进行隐藏,在需要展示公告的页面进行显示时候,公告不能正常轮播,在条件里加入重新设置轮播方法等网上的一些方法仍然不行,最后解决方法: this.my ...
- Swiper轮播手动后不动
最近项目首页轮播图用了Swiper轮播,今天突然发现轮播图动画初始正常但是手动换过之后就不动了,解决方法有两种,具体根据采用的情况为准: 1.autoplayDisableOnInteraction: ...
随机推荐
- python 数组元素个数
list=[1,2,3,{1,4,5,6,7}] print(len(list)) 输出4
- 使用KEIL C51实现的简单合作式多任务操作系统内核(单片机实现版本)
基于网上网友的代码,自己在单片机上实现, 特此记录分享之. 基于https://blog.csdn.net/yyx112358/article/details/78877523 //使用KEIL C5 ...
- html 中 获取百度代码
1.登录百度地图api,地址:http://api.map.baidu.com/lbsapi/creatmap/index.html 2.设置你的地理位置,以北京大学为例子如图:
- vim常用的骚操作
1.设置~/.vimrc syntax on 支持语法高亮 set nu 显示行号set nonu 不显示行号 set ai 设置自动缩进 set ...
- Linux 应用程序编程基础
一个计算机应用程序在内存中可以分成两个部分:存放代码的代码段和存放数据的数据段.代码段存放用户编写的代码;数据段存放栈和堆. 相关内存管理函数 #include <stdlib.h> vo ...
- imp需要
导入全部: imp user/password@10.10.10.10:1521/orcl file = C:\Users\Administrator\Desktop\20170404230000.d ...
- [CSP-S模拟测试48]反思+题解
状态很垃圾的一场考试.感觉“这么多分就够了”的心态很是在给自己拖后腿. 打开题面,第一页赫然写着:$Claris' Contest$. 吓得我差点手一抖关掉.不过后来想想似乎强到变态的人出的题都不是很 ...
- 重新学习MySQL数据库11:以Java的视角来聊聊SQL注入
本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...
- 力扣算法——134GasStation【M】
在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] 升.你从其中的一个加 ...
- img点击放大的js实现
业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...