多图循环轮播怎么做?(循环轮播制作方法)

排版经常会遇到这种情况,一篇文章配了n多张图,怎么排都排得不好看。今天来教大家几种玩法,让图片在推文中轮播展示!省掉图片排版的繁琐步骤,效果酷炫,图片张数还不限最重要的是操作很简单。

轮播效果展示



图片轮播


SVG组件ID:35

效果描述:多张图片无限循环的自动切换显示。


·


图片轮播-横向单方向切换


SVG组件ID:69

效果描述:多张图片无限循环,向左或向右轮播。


·


多图弹动轮播(横向)


SVG组件ID:92

效果描述:两图及两图以上的多图弹动式横向自动轮播,可设置轮播图边距、背景图或背景色、滚动方向和动画时长。


·


图片轮播-上下左右切换


SVG组件ID:157

效果描述:图片依次无限循环地向上、下、左、右滚动轮播,图片数量需要是4的倍数。


·
·


图片田字分裂对边移出轮播


SVG组件ID:157

效果描述:多张图片田字分裂对边移出切换,自动播放,可设置顺时针或逆时针播放动画。


·


·
图片横向百叶窗分裂错位移出轮播


SVG组件ID:158

效果描述:多张图片横向百叶窗式分裂切换,自动播放。


·
·
·
·


横向停顿式图片轮播


SVG组件ID:166

效果描述:多张图片无限循环向左轮播或向右轮播,每张图完整显示后会停顿一会再继续播放,播放的快慢可以进行设置。



制作方法



01 进入SVG编辑器


通过135编辑器左侧入口进入svg编辑器



或者直接在浏览器输入svg编辑器网址进入:

https://www.135editor.com/svgeditor/




02 添加组件


在SVG编辑器中搜索一款轮播组件的ID,或在『轮播』分类下查找组件,将轮播组件添加到编辑区域



鼠标移动到SVG组件上,可以查看SVG的使用教程,也可以扫码预览SVG的具体效果




03 上传图片


在SVG编辑器右侧的配置区域,将需要添加轮播效果的图片上传至组件中。



根据轮播的效果设置开始时间、轮播方向、轮播快慢等参数即可。



04 同步/导出


制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台(ps:不知道咋同步和导出的胖友,点击按钮,根据提示操作即可)



注意:


如使用导出代码功能,则需根据SVG效果的使用平台(135编辑器/微信后台),选择对应平台的代码进行复制,尽量不要直接粘贴代码,以免效果有误。




以上就是制作轮播图的方法啦,大家赶紧去SVG编辑器里上手试试吧!

文章评价
登录后可以评论
立即登录
小三儿135主笔
一个酷爱钻研排版的小编!
共221篇文章
最近文章
更多
  • 135编辑器x工信部工业文化发展中心:自媒体时代 以赛促学 搭建未来行业新风向
  • 比格设计x工信部工业文化发展中心:探索融媒体创新知识,挖掘新时代新兴人才
  • 135编辑器x天猫校园CLUB:校园排版大赛成功为600余高校学子赋能
  • 这套护士排版样式,我要安利给所有温柔的人
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
广告变现近「2000万」却志不在此! 剧情号“遇见她”目标直播带货
通过内容运营的三个阶段,让你掌握内容运营的核心
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一文详解:渠道投放工作需要的五种思维
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
用户分群模型,这么建才有用
热门素材样式
运营导航
运营工具
分享到