Apple同款|长图横滑排版,让布局更自由


长图横滑

Slide Show

图文布局中的 CSS 滑动排版,通常其滑块会以等分的方式呈现,因而设计师切片时也一般直接采用平均切片导出。

但有时,我们会希望切图各自保持一定的完整性,形成非等分切片组成的横向超长图,正如 Apple 公众号在《待签收:Apple Park 新鲜送达》、《AirPods Max 高调奏响。》等推送中的处理方式——那我们应该套用 E2.COOL 编辑器的哪个组件来实现类似效果呢?

(滑动上方画面体验)

长图横滑

SVG 编辑器中的这一组件,特性在于允许你上传特定数量的多个切片,但不要求你保持这些切片宽度的统一性,平台自动会将它们分配就位。

不过注意,不限制切片宽度不等同于设计师可以过分随意切图,因为微信公众平台对于过宽的图片,是会高强度压缩尺寸的!原则上,我们建议你对切片的宽度上限控制在 2500px 以内,并通过该组件的筛选器合理选择数量。

E2.COOL 的专业级会员/企业级会员可使用该组件,即刻前往黑科技编辑器,在「滑动模块」大类中找到「长图横滑(默认10图)」畅快体验!

企业级会员额外可以通过自定义参数功能精确控制首屏画幅显示范围!具体方法是,在自定义参数功能中输入百分数,由此控制了整体滑动宽度相对首屏宽度的倍数。例如我们的最终滑动量跨过 10 屏,那么输入的自定义参数为 1000,因为 1000% 为 10 倍。

当然,如果你需要自由度更大的滑块布局方式,完全自主决定每个切片的漂浮位置,那么就必须结合「自由布局」大区的组件完成了。由此其操作的难度会更高,建议你先点击阅读《视频|想玩转「自由布局」组件的运营人看过来!》学习。


任何公众号运营中的疑难杂症,都欢迎邀请我们回答哦。

这里是黑科技编辑器(e2.cool),会的比别人多一点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容