微信推文排版——制作自己想要的滑动相框

通常为了减少推文的篇幅，我们会使用滑动相框来放置大量图片。但第三方推文排版神器提供的滑动相框限定只能放置3~4张图片，对于活动、会议、广告宣传类等需要放置大量图片的推文而言，还是不够用的。所以，怎么修改配件来满足我们的需要呢？

操作方法

（01）首先要知道微信后台的图文编辑器开发环境是能渲染HTML5（H5）代码的，也正是因为如此市面上才有大量的针对微信公众号的第三方编辑器，却看不到针对其它自媒体平台的第三方编辑器。我们平时在微信推文里看到的各种配件，都是由H5生成并被腾讯的浏览器渲染的结果。

（02）先将滑动画框放到135编辑器平台上。

（03）打开浏览器的开发者工具。（F12或者右键“查看网页源代码”）,找到相应起作用的标签、代码。

（04）因为放置图片的容器限定了最大宽度max-width:400%,只能放四张图片，所以要对容器最大宽度进行修改。

（05）通过开发者工具可以看到，每张图片都嵌套了3个<section>标签、3个容器。所以我们之后还要边插入其它图片边调试，每个图片容器的宽度。

（06）此时就有了多余负空间，要进一步修改里面的代码。但仅仅在135操作已不适合，所以要复制粘贴代码到文本编辑器上进行修改，本文以Notepad++为例。

（07）确定好每张图片所被嵌套的容器，所起作用的代码后，就仅复制那部分代码。为了方便识别，最好写上注释。

（08）复制全部代码到135上，查看效果

（09）此时很有可能会发现，图片排序混乱。是因为每放置图片的容器（<section style="display: inline-block; width: 10%; vertical-align: top;">）的宽度过大且新添加的代码没有放对位置（代码框架不合理），有些图片被挤下去了。所以我们要减少每张图片的容器宽度（将width减到9%），而且要对应着空白位置来粘贴代码。

（10）再次复制代码带135上看效果

（11）排列整齐以后，再删除原来添加的注释，就搞定啦。

（12）放到微信公众号后台，右键点击“图片替代”就好了。如果每张图片因高度不同而不整齐，还可以裁剪哦。

（13）总结一下，要会通过开发者工具，找到起作用的代码区域；调整好每个容器的宽度，使之没有多余的留白。

特别提示

做好注释，区分原来的代码和新复制的代码

如果不确定是那个代码块起作用，最好先在浏览器控制台上，修改部分代码来确定

最好懂点css、html的基础知识。道理是一样的

可以举一反三，制作自己喜欢的个性样式，但是要懂一些前端设计的知识。建议去W3Cschool或菜鸟教程上学习。