“滑动图尺寸不一致，可以吗？”

大多数左右滑动效果，一般都要求滑动图尺寸一致。

但并不是所有素材都能切成尺寸一致的滑动图，比如滑动图中有需要贯穿两屏的GIF图时，或者因为滑动图的图案太复杂，切图后不容易无缝拼接时。

以上情况可能不能切图或者只能在合适的位置切图，从而导致滑动图无法做到尺寸一致。

没关系，i排版SVG编辑器的「双层滑动-前景左滑(不等尺寸图片)」组件（编号：10046）可以帮助你。

左滑看下NIKE这个效果：

这个组件对于滑动图的要求只需要高度一致，宽度无需一致，上传素材后，可手动调整滑动图每屏显示范围。NIKE只在空白处进行的切图：

再看下雷克萨斯的应用效果：

 

对应素材，滑动图尺寸不一致：

为了保证在尺寸不一致的情况下也能实现自己想要的滑动效果，我们在设计素材时就要提前构思，下面以雷克萨斯的排版为例，一起看下详细教程吧。

详细教程：

工具：i排版SVG编辑器，网址：SVG.iPaiban.com

组件：双层滑动-前景左滑(不等尺寸图片)

编号：10046（组件）

第1步：选择组件

登录i排版SVG辑器后，点击编辑器右侧「组件」按钮，在「滑动」分类中找到「双层滑动-前景左滑(不等尺寸图片)」组件，或者直接搜索组件编号10046，点击选择。

第2步：上传图片素材

点击右侧「换图」按钮上传底图，点击「+」号批量上传滑动图。

滑动图的宽度没有要求，高度需保持一致。

底图尺寸需与第一屏显示的滑动图范围一致。想要正确确定底图大小，就需要在设计素材时构思好。如下所示，我们想要滑动的第一屏显示红框大小，那么底图的尺寸就是红框大小：

第3步：调整滑动图显示宽度

容器宽度显示百分之几百，表示所有滑动图会显示几屏。比如上传4张滑动图，容器宽度默认显示400，表示这4张滑动图将会显示4屏。

现在我们已经提前构思好了这些滑动图的滑动范围，本文示例中所有滑动图的的总宽度为5020px，第一屏滑动图的宽度为1000px，那么滑动屏数为5020÷1000=5.02屏，取前三位数字，容器宽度填502即可。

也就是：

所有滑动图的的总宽度÷第一屏滑动图的宽度=滑动图显示的屏数（即容器宽度，取前三位数字填写，不要小数点）

第4步：导入公众号后台

点击页面最右侧「预览草稿」可随时预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。

使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。

当这种支持滑动图尺寸不一致的效果能够添加超链接时，又一个重要用途就出现了，那就是用作底部的拓展阅读/往期回顾：

 

详细教程：首屏就能看到第2张滑动图，这种滑动排版是怎么做的？

更多拓展阅读样式：《公众号图文拓展阅读样式大全》

● SVG交互排版👇🏻

 

iPaiban 团队可提供运营服务、视频制作、创意策划、多种风格设计、SVG交互开发等服务，如需定制，请添加玉兔微信（ID：playhudong15）沟通咨询。需要接入全球领先AI大模型的也可联系我们。