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

火币交易所 2022年11月07日 08:22 74 Connor

说到图片滑动，无论哪个方向的滑动或者多少层的滑动，对素材的要求一般都是滑动图需尺寸一致。

但也不是所有滑动都有这个要求，我们来看苹果这个：

没动就看到了第2张滑动图的一部分，此时无需用箭头或文字提示我们就知道向左滑动可以查看更多。

这种滑动一般不要求滑动图尺寸一致，而只需高度一致即可。

当然如果我们切图时像下面一样切成尺寸一样的，也能排出同样的效果。但是请注意，像苹果这种每张滑动图都插入链接的就不行了，另外如果滑动图是GIF也不行，为了保持图片尺寸一致我们不可能对一张完整的GIF切分吧？

那今天给大家推荐的就是可以使用不等尺寸的双层滑动组件「Apple-双层滑动-前景左滑(不等尺寸图片滑动)」（编号：10380）和「双层滑动-前景右滑(不等尺寸图片)」（编号：10097），其中左滑的还有可添加超链接（编号：10377）以及小程序（编号：11121）的版本。

使用上方组件上传滑动图后，我们可以任意调整一屏显示的滑动图范围，如下所示：

展开全文

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com

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

编号：10377（组件）

第1步：选择组件

第2步：上传图片素材并添加链接

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

底图尺寸需与第一屏显示的滑动图范围一致。比如下面5张图片分4屏显示，那么底图尺寸就是红框所示尺寸。

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

接着在下面分别输入点击图片要跳转的链接即可。

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

容器宽度显示百分之几百，表示所有滑动图会显示几屏。

比如上传5张滑动图，容器宽度默认显示500，表示这5张滑动图将会显示5屏；调整为400，则表示这5张滑动图将会显示4屏；调整为200，则表示这5张滑动图将会显示2屏。

第4步：导入公众号后台

效果满意后接着点击「同步至微信后台」同步到自己的公众号就可以了。

局部导入可参考：《iPaiban Pro小助手v2.0安装和使用教程》（原文链接：）

现在新用户注册登录iPaiban Pro 黑科技编辑器，在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）。

认准编辑器网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始创作SVG交互排版（又称公众号交互图文、互动图文、黑科技排版、互动式排版）

突然！中国足协公布了处罚决定，球员失去了妻子和士兵

发表评论