图片旋转木马

一排静态图像占据空间,要求访客滚动滚过每一个图像。一个旋转木马在紧凑、可滑动的滑块中显示相同的集合,人们实际上可以触摸。 图片旋转木马 小部件在 Elementor 的主插件 从普通的 WordPress 图库构建该滑块,然后添加自动播放、灯箱、多种导航样式和覆盖流模式,所有这些都来自 Elementor 面板。

您选择图像,一次选择多少个节目,并决定访客如何在它们之间移动。没有短代码,没有单独的滑块插件。本指南将浏览小部件中的每个设置,从加载图库到设计箭头的演示以及与 Elementor 自己的旋转木马的比较,请参阅 元素器图像转盘小部件 页。

喜欢先看?本简短教程涵盖了从画廊到造型的图像旋转木马:

图像旋转木马小部件的作用 #

Widget 将精选的图像变成一个滑动轮播,它显示一个或几个图像每个视图,自行或单击前进,并在一个灯箱中打开每个图像以获得全尺寸外观,标题、边框、覆盖和箭头样式都内置。

Swiper引擎上运行,因此滑块从一开始就对触摸友好且响应灵敏,在手机上,同一个转盘回流到更少的列,如果箭头妨碍了,您可以在移动设备上隐藏它们。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• 上传到您的媒体库或准备上传的少量图像。

如何添加图像轮播小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 图片旋转木马的,或者滚动到主插件部分。将小部件拖到您的页面上。它加载为空直到您添加图像,因此图库始终是第一步。

添加并订购您的图像 #

在 内容 选项卡,打开 图像 section,然后点击图库字段,就可以启动wordpress媒体选择器了,选择你想要的图片,然后使用 编辑画廊 要按顺序拖动它们、添加标题或删除任何带有 X 图标的内容。

返回面板,图像部分为您提供另外三个控件:

• 图像分辨率: wordpress服务的大小,从缩略图到全,或设置自定义大小。中或大保持页面光线,同时仍然在滑块中看起来很锋利。
• 启用灯箱画廊: 打开此功能,访问者可以单击图像以在弹出窗口中打开其全尺寸。关闭后,图像仅显示。
• 灯箱库: fancybox 或 Elementor 自己的灯箱中选择弹出引擎,两者都将转盘图像分组,以便访问者可以在弹出窗口内跨过它们。

设置导航 #

的 导航 section 控制人们如何在幻灯片中移动。从开始 导航 dropdown,它设置了控制样式:箭头和点,箭头和分数,箭头,点,进度,或无。

• 显示滚动条: 在滑块下方添加可拖动进度条。
• 箭头位置: 将箭头放在顶部、中心或底部,然后将箭头放在其中左侧、中心或右侧。
• 放置: 将箭头设置在滑块内部或滑块外部。
• 手机上隐藏箭头: 将箭头放在小屏幕上,滑动是自然的手势。
• 下一个图标和上一个图标: elementor 图标库中的任何图标交换默认箭头。

调整旋转木马行为 #

的 旋转木马设置 段(section)是滑块运动的地方,这是决定显示多少图像、移动速度以及滑块是否循环的部分。

• 每列幻灯片: 沿垂直方向运行滑块时的行数。
• 布局: 选择标准平滑块的旋转木马或 3D 效果的 Coverflow。
• 自动高度: 让滑块高度适应当前图像。
• 自动播放和自动播放速度: 打开自动滑动并将滑动之间的延迟设置为毫秒(5000 为五秒)。
• 暂停悬停: 当光标位于滑块上方时停止自动播放。
• 滑动滚动: 每步前进多少张图像。
• 中心幻灯片、抓取光标、无拖动模式: 用于将活动幻灯片居中、显示抓取光标和自由流动的拖动滚动的选项。
• 循环: 以无尽循环的方式运行旋转木马,而不是停在最后一个图像处。

使用 Coverflow 布局实现 3D 效果 #

开关 布局 到 覆盖流 幻灯片倾斜成 3D 堆栈,活动图像位于中心平坦,邻居向后倾斜。 A 覆盖流效应 control 显示,因此您可以微调深度和旋转,它适合摄影和作品集部分,其中滑块本身是设计的一部分。

风格旋转木马 #

的 风格 tab 分为四个部分: 旋转木马项目, 灯箱, 导航、和 图案。它们一起覆盖幻灯片、弹出窗口和箭头的外观。

旋转木马项目 #

此部分为图像幻灯片设计样式。它具有正常、悬停和活动状态,因此您可以使居中幻灯片从其余部分中脱颖而出。

• 背景、边框类型、边框半径、框阴影: 每张幻灯片的标准取景。边框半径使图像角四舍五入。
• 填充和项目间隙: 每张幻灯片内部的空间以及幻灯片之间的间隙。
• 影子模式和不透明度: 非活动幻灯片的额外深度和透明度。

灯箱、叠加和标题 #

的 灯箱 部分为每个图像上的预览图标及其后面的覆盖层以及标题文本提供样式。

• 自定义预览图标: 替换默认缩放图标,并将其颜色、悬停颜色、大小和位置设置为图标间隙为左侧和顶部。
• 覆盖: 在图像上添加背景色调,当您希望图标和标题保持可读性时,这会有所帮助。
• 标题: 您在图库中添加的标题的排版、背景、颜色和悬停颜色。

导航箭头 #

的 导航 样式部分控制箭头的外观,具有正常状态和悬停状态。

• 颜色和背景: 箭头图标颜色及其后面的按钮。
• 边框类型、边框半径、填充物、尺寸: 箭头按钮的形状和尺寸,包括具有全半径的圆形按钮。
• 盒子阴影和偏移: 添加深度并用水平偏移推动箭头进出。

页面上的结果 #

Publish或preview和转盘运行现场:它自动播放通过图像, 循环如果你打开了, 并打开每一个在光箱点击。你的造型贯穿, 从圆形边框滑动到自定义箭头按钮。

常见用例 #

• 摄影和作品集 灯箱可让游客观看全尺寸镜头的画廊。
• 产品图像滑块 在登陆页面上,自动播放吸引眼球。
• 徽标或合作伙伴条 每个视图使用多个幻灯片和一个循环。
• 感言或活动照片 在紧凑、可滑动的块中。
• 英雄覆盖流滑块 对于设计前向部分。

使用图像旋转木马的技巧 #

• 将图像分辨率与幻灯片大小相匹配。 将全尺寸文件放入小幻灯片中会减慢页面速度;中型或大型通常很多。
• 保持自动播放速度舒适。 4000到6000毫秒左右,让人们有时间看而不觉得仓促。
• 使用自动播放打开悬停。 它可以阻止滑块从正在阅读标题的人下面滑出。
• 在手机上隐藏箭头。 滑动是触摸屏上的自然手势,因此箭头通常只是在那里杂乱无章。
• 用活动状态突出显示中心幻灯片。 主动滑块上的微妙边框或完全不透明会引导眼睛。

常见问题 #

包裹起来 #

的 图片旋转木马小部件 构建功能齐全的 Elementor 图像滑块,无需单独的插件:加载图库、设置自动播放和循环、打开灯箱以及为幻灯片和箭头设计样式以匹配您的设计。对于其他显示图像的方式,请查看 画廊滑块 並 可过滤图库 小部件。浏览完整内容 主插件小部件和扩展 看看还包含哪些内容。