用的是vue-awesome-swiper 在vue项目中,参数方法与swiper一致。使用场景如下:

左侧小图一共八张,默认显示的是三张,始终保持activeimg在中间,提升用户体验度。swiper容易就是为三张图片的高度。

在官方文档实例中,居中如下。

这样的话,第一张图片也是居中的,它的上面就会空出一张图片的高度空白,看上去非常扎心。

官方的实例中,左侧也是空白了一张图的。也看见很多小伙伴在下面评论说到这个问题。本着不轻易将就的态度去尝试解决。

其实解决思路就是,在第一张或者最后一张的时候手动去设置位移的距离。

注意不能将silde的高度写死,设置了slidesPerView:3,slide会自适应的去适应容易的高度(三张图片的高度)。

上门的init是解决初始化时候第一张图片会居中,上面空白出一个slide的位置。所以直接设位移为0

每个计算出的sildeH 去三位小数精确,与dom中的slide高度0.1px都不差。

最终以这种方式完美解决了展现方式,不会留白造成空缺,主要是为了兼容到第一张和最后一张图片。

后续: 在与elementui 的表格或者loading加载一起使用的时候,初始化的放大镜图片会以body来定位top值。导致放大镜图片上移。

解决:不直接插在document.body里,然后在整个商品图模块的外层div添加相对定位。

对于修改了依赖,也只能在我本地生效,所以干脆直接把picZoom.vue.拉到项目里来。代码也不多。

实在是项目赶时间,其实完全可以自己写一个放大器组件的,用惯了vue原生的js丢的差不多了是件很糟糕的事。

swiper轮播始终居中active图片的更多相关文章

  1. 微信小程序之swiper轮播图中的图片自适应高度

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...

  2. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  3. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  4. swiper轮播图(逆向自动切换类似于无限循环)

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  5. 一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

    Bootstript轮播冲突 解决方法: 使用不同的id <div id="myCarousel1" class="carousel slide"> ...

  6. 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示

    在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...

  7. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  8. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  9. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

随机推荐

  1. Unity 将一个类序列化并以 ".asset" 类型存储在 Resources 文件夹下

    概念: 序列化 (Serialization)将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读取或反序列化对象的状态 ...

  2. RNN学习资料

    1. Recurrent Neural Networks Tutorial, Part 2 – Implementing a RNN with Python, Numpy and Theano htt ...

  3. @enable跟@import注解

    参考文章: 讲@import的相关内容:https://blog.csdn.net/u012437781/article/details/78626134 讲为什么registrar没有注入:http ...

  4. POJ 3522 ——Slim Span——————【最小生成树、最大边与最小边最小】

    Slim Span Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 7102   Accepted: 3761 Descrip ...

  5. linux内核态和用户态小结

    一 内核态和用户态的区别 当进程执行系统调用而陷入内核代码中执行时,我们就称进程处于内核状态.此时处理器处于特权级最高的(0级)内核代码.当进程处于内核态时,执行的内核代码会使用当前的内核栈.每个进程 ...

  6. Xtrareport 多栏报表

    首先看下布局designer 细节: 分组一定要用到GroupHeather 设置好有 右边会出现 接下来是代码部分 Form1中代码 using DevExpress.XtraReports.UI; ...

  7. Java的类成员变量、实例变量、类变量,成员方法、实例方法、类方法

    总是被这些相似的概念搞晕,查阅了资料后做个小总结,以变量为例,方法辨析类似. 1.多胞胎名字汇总辨析 成员变量和成员方法是范围最大的定义,提到成员变量就可以理解成你所定义在一个类体中的各类变量的统称, ...

  8. 位运算(2)——Number of 1 Bits

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...

  9. sqlserver门户设置

    ------ insert by wandz 20180918 门户模板表 start ------set identity_insert oa_portal_template on;begin de ...

  10. ZIP文件流压缩和解压

    前面写了一篇文章 "ZIP文件压缩和解压", 介绍了" SharpZipLib.Zip " 的使用, 最近的项目中,在使用的过程中, 遇到一些问题. 比如, 现 ...