swiper插件轮播图图片抖动【开发中的bug】

swiper插件轮播图图片抖动

家人们，这个真的困扰我好久了。应该是插件的坑。
在本地就不会出现这样的bug，一挪到测试环境，好家伙，图片像得了帕金森，恨不得溢出屏幕一样疯狂的抖动。

原因：

1、轮播图的图片宽高不一致
2、调试时浏览器页面缩小

解决办法：

1、给图片的父元素添加如下代码：

.style{
 transform: translateZ(0);
 overflow: hidden;
 padding-bottom:（图片高/宽）百分比;
 width:100%;
 height:0;
 }

2、为轮播图图片设置block，固定相同的宽和高

3、调试时记得把页面设置成100%（如果对下面的结构有影响，可以添加padding-top）

这样就可以解决啦~


\

一些写在最后的话

作为程序员，还是需要有一个地方去记录你的知识积累，毕竟大脑的记忆还是有限的，你需要去不断总结，不断积累，为了更好的沉淀。
我相信总有一天，量变总会达到质变~ 加油┗|｀O′|┛ 嗷~~