组件简介
轮播图组件,是为了补充 Epub360 编辑器幻灯组件的切换方式过少问题,而开发的新组件。
组件使用方法与幻灯组件大体类似。区别是:轮播图组件在原有幻灯组件的基础上,新增了多种个性化切换方式和分页符样式,并可持续更新。
功能更新:为强化多素材加载正常运行,轮播图新增“性能优化模式”,优化轮播图片过多且素材尺寸过大导致手机性能承载不了,作品自动刷新情况,勾选“性能优化模式”前需去掉循环选项,低于20张图片素材或图片尺寸非全屏可无视本项更新内容。
功能权限
专业版及其以上版本
组件教程
一、插入轮播图组件
上线:顶部栏——图片——轮播图,插入轮播图组件。
插入后,需在素材库弹窗中选择几张图片,作为轮播图的帧。选完后点击插入。⬇️
二、元素组件属性介绍
【滑动方向】可以设置轮播图组件切换的方向为横向或竖向
【显示方式】默认为撑满,或选择缩放以填充、缩放以适合
注:对于不同的轮播图切换方式,适合使用不同的切换效果:
如“撑满”和“缩放以填充”比较适合滑动、淡入、覆盖、3D翻转、卡片等切换效果;
“缩放以适合”比较适合coverflow、重叠20%、重叠80%、中间帧放大等效果;
【切换效果】共10种,默认为“无”。无、推移、淡入效果,和“幻灯”对应的效果类似,此处不做过多讲解。⬇️
【分页样式】共5种,默认为“动态指示点”。可以调整点的颜色,以及是否显示分页符。⬇️
【初始色与激活色】当分页样式为“动态指示点”、“进度条”、“序号”时,可以通过初始色和激活色设置调整分页符的颜色。⬇️
【自动播放、循环、可滑动】与幻灯组件的设置一致。
注1:在幻灯组件中,当同时勾选自动播放和可滑动的情况下,用户在滑动幻灯组件后,幻灯将不再能自动播放,如今轮播图组件支持这一操作了。
注2:当轮播图切换方式为“重叠80%”等可以同时显示多帧的情况时,我们可能会希望一进入页面,就让中间帧的左右都有上下帧显示,要达成这种情况可以给轮播图组件勾选“循环”。⬇️
三、轮播切换方式介绍
【覆盖】切换时,上下帧有覆盖视差的效果。⬇️
【3D翻转】切换时,会有卡牌翻转的效果。⬇️
【Coverflow】切换时,中间帧最突出,前后两帧会有横向透视的视图。⬇️
【重叠20%】切换时,中间帧最突出,前后两帧会和中间帧有20%区域的重叠。⬇️
【重叠80%】切换时,中间帧最突出,前后两帧会和中间帧有80%区域的重叠。⬇️
【中间帧放大】切换时,中间帧最突出,前后两帧不会和中间帧重叠。⬇️
【卡片】切换时,中间帧最突出,前后多帧呈扇形聚拢显示。⬇️
注1:不同切换方式的显示原理为,在编辑器的轮播图尺寸范围内⬇️(见下图),根据不同切换方式,将轮播图容器几等分,因此,当切换方式为“3D翻转”、“淡入”等只显示一张图的时候,可以使用“撑满”、“缩放以适合”、“缩放以填充”等形式。
(轮播图尺寸范围示意)
但当切换方式为“重叠20%”、“重叠80%”等情况时,此时轮播图容器内会显示3张图,所以用“缩放以填充”、“撑满”等方式,图片帧则会显示不全或变形,因此,在这些切换方式下,请选择“缩放以适合”显示方式,并在编辑器内调整轮播图组件尺寸到适合的比例。⬇️
四、分页符样式
【动态指示点】⬇️ 【进度条】⬇️ 【分式】⬇️
【缩略图】⬇️ 【序号】⬇️
【初始色与激活色】当分页样式为“动态指示点”、“进度条”、“序号”时,可以通过初始色和激活色设置调整分页符的颜色。⬇️
五、素材管理面板
轮播图组件的素材管理面板为九宫格式,相较于原来尽可能的缩短了帧序列的纵向屏占比。
【排序】
根据帧序列的命名,可以进行升序和降序的排列。⬇️
注:拍序仅支持字母与数字,不支持汉字排序,请派友制作素材时注意规范素材名称。
【转换精度】
和原图尺寸有关,当原图宽度小于640px时,则该“转换精度”会禁用,当原图宽度大于640px时,则可选择精度为“原图”或“640”px。⬇️
【插入新帧】
有两种方法:
在编辑器中双击轮播图组件,进行帧的添加;
在右侧素材管理面板,点击【+】进行帧的添加。⬇️
插入的新帧会放在素材面板的最下方。
【帧操作】
查看:查看当前帧的大小、格式等信息。
替换:将当前帧替换为素材库中的其他帧。
添加子元素触发器:给当前帧添加子元素触发器,当添加成功后,图标会高亮。
删除:在帧序列中删除该帧。
拖拽:拖住某帧,可以调整帧序列的顺序。
【滚动素材管理面板】
轮播图组件的素材管理面板,最多可显示9帧,超过9帧时,则需要滚动显示。⬇️
其他
触发器-切换到指定帧
轮播图组件,支持被“切换到指定帧”触发。⬇️
注:使用“切换到指定帧”触发器时,建议轮播图切换效果改为“无”。
触发器-截屏
轮播图组件,支持参与截屏。包括竖屏或横屏的播放与截屏。⬇️
注:轮播图组件选择不同切换方式时,其每帧在播放器内的显示大小是不同的。
因此,轮播图组件被截屏后的显示尺寸,和其在编辑器内的显示尺寸一致,而不是和其在播放器内显示的每帧尺寸一致,制作时请注意这点。
注意事项:
1、如轮播图内的图片数量过多导致作品自动刷新,需去掉勾选“循环”,且勾选“性能优化模式”来解决,即优化性能模式不支持滑动循环。