如何在元素器中创建图像旋转木马

掉 图片旋转木马小部件 进入页面,从媒体库中选择图像,为每个设备设置每视图幻灯片,然后打开自动播放。四个步骤,大约两分钟,然后 无需许可证.

That’s the short version。this recover the settings that separate a carousel that works with one that looks mightly wrong on the phone, playingflow layout, the lightbox, and the two image merross that make an otherly fine carous 完整的旋转木马小部件阵容 比较一个地方的每种类型,并且 旋转木马与滑块故障 确定命名。

你需要什么

Elementor 免费和主插件免费。 Elementor 自己的图像传送带涵盖了基本知识（字幕、灯箱和每个设备的幻灯片），但它没有 Coverflow 布局或进度式导航，因此本演练使用了 主插件图像旋转木马的,它也是免费的,并添加了字幕,一个灯箱和一个覆盖流布局。

1步:添加小部件

Elementor中打开页面,在小部件面板中搜索“图像转盘”将其拖入容器中。

Placeholder 图像渲染,因此您可以在提交任何内容之前看到形状。暂时保留它们。与一致的 placeholder 相比,设置布局比与真实照片相比更容易,真实照片的大小都不同。

2步:添加您的图像

单击图库字段并从媒体库中进行选择,或上传。订购事宜和拖放重新订购的作品,因此请将最强的图像放在第一位,因为在移动设备上,它可能是唯一有人看到的。

在内容设置下,您将找到图像大小、标题源和链接行为。

图像大小是人们在《Full and retrate》中留下的设置。 Full表示原始上传:4000px摄像头导出服务到400px幻灯片中,WordPress已经生成了更小的版本; pick medium_large 或 large 您将减少旋转木马的大部分重量,而不会产生任何明显的差异。

标题 pull from媒体库的标题或描述字段,因此如果幻灯片需要文本,请将其写在那里,而不是在小部件中查找每幻灯片文本框。

3步:导航

Arrows, 点,分数, 或者一个滚动条。根据你有多少张幻灯片来选择:

• 8张幻灯片下: dots。人们可以一眼看到整套, 跳来跳去。
• 8到20: 箭头只有。二十个点是一个涂片,而不是一个对照。
• 20岁以上: arrows加分数(“04 / 32”),数字是唯一告诉某人他们在哪里的东西。

Mobile上,查看箭头大小,桌面默认经常是30px的目标,轻点可访问的最小值是44px,在移动断点上碰一下或者完全掉落箭头,依靠刷。

第 4 步:轮播行为

这是决定旋转木马感觉是否正确的面板。

每视图幻灯片:设置三次。 击设置顶部的设备图标,给桌面、平板和移动设备自己的价值,四、二、一是安全默认值,这个单步是手机上工作的转盘和显示四个压扁缩略图的转盘的区别。

滑动滚动。 1设置为连续浏览感觉,或者匹配每视图幻灯片进行页面式分页,当幻灯片形成组时匹配更好;1对于长无差别集更好。

自动播放。 为装饰画廊打开它,如果幻灯片可点击,则将其关闭,因为有人会伸手去获取图像并点击替换它的图像悬停在悬停覆盖桌面但触摸时没有悬停。

无限循环需要足够的幻灯片。 Swiper 克隆滑动来伪造包装,它至少需要将您的每视图滑动次数增加一倍,每视图三次的四个图像将明显跳转。添加图像或关闭循环。

速度。 300到500ms,200以下看起来像是剪切而不是过渡;800以上的人开始点击两次。

覆盖流布局

将布局从标准切换到 Coverflow,侧滑片以 3D 形式旋转、变暗且后退,使中心滑片成为唯一可读的滑片。

它适合作品集和案例研究,任何一次一个图像是重点的东西。人们需要比较的任何东西都是错误的,因为整个设计的存在是为了阻止你看着邻居。

两种设置可以正确:在 30 到 40 度之间旋转(过去 50 度,侧滑片变成不可读的条),然后进行居中滑动,或者活动图像与左齐平,构图崩溃。

Coverflow是四种深度风格之一,翻转、弧线和轨道是另外三种,而 Elementor 3D 转盘指南 涵盖每个人的优点。

幻灯片的造型

样式选项卡处理幻灯片、边框半径、阴影和悬停状态之间的间距。

值得再思考的设定是 差距.零间隙使转盘读作一个连续的图像条,这对于全景图是正确的,对于不同的项目是错误的,16 到 24px 是幻灯片读作单独的卡片而行看起来不稀疏的范围。

悬停效果（比例、叠加、标题显示）适用于整个集合，而不是每个幻灯片。 将比例保持在 1.05 以下。 悬停时增长 15% 的幻灯片会推入其邻居，看起来像一个布局错误。 对于每个图像上的不同悬停动画，放置 图像悬停效果 网格中的小部件。

灯箱和字幕

打开灯箱,单击幻灯片,在页面上打开全尺寸图像,其自己的下一个和之前的控件将步入整个转盘。

这就是使用传送带而不是网格进行摄影的原因。 传送带是索引；灯箱是查看器。 图像标题及其媒体库标题显示在灯箱中的照片，因此在发布之前将其填写。 如果您希望在页面上显示为缩略图而不是隐藏在单击后的索引，那就是 画廊滑块 相反,它需要 Pro。

1个注意事项:灯箱是服务全尺寸图像,而不是缩略图,如果您将图像尺寸设置为 medium_large 8MB的相机文件,转盘和你的原件,灯箱还是会拿8MB的版本,上传压缩原件,不只是显示屏大小。

如果您想要缩略图导航

Image Carousel 是单行,没有缩略图条带驱动一个大的预览,如果那两部分布局是你所追求的,导入 维特琳板画廊 相反,这是免费设计之一 滑块模板集合:缩略图条下方的单板,带有标题面板,其中包含可编辑的帧数据表,适用于地点、时间、镜头、光圈、快门和 ISO。它是为摄影而构建的。相同的预览加缩略图形状是大多数人要求视频转盘时所指的,并且 视频转盘和画廊滑块指南 涵盖该版本。

想要类别选项卡而不是滑动行吗?那是一个不同的小部件。 可过滤图像库 将图像放入网格中,并在有人单击选项卡时对其进行过滤。

现场演示

要导入它:主插件 → Widget Builder → 导入 Widget,将 JSON 拖入,它出现在 Elementor 收藏夹下。它在免费插件上运行,无需 Pro 许可证。相同的集合有 基座英雄滑块、每滑动链接的全血英雄滑块,同样可以免费导入。 总共二十个命名设计其中八个免费。

箭头造型

尺寸、颜色、背景、边框半径和位置:旋转木马内部、外部或与边缘重叠。

(carousel)外定位的箭头需要水平房间,而全宽容器上则没有,它们会夹住,要么保持容器比视口窄,要么将箭头定位在里面。

的结果

Call it done之前,先通过蜂窝加载实际手机上的页面,而不是浏览器的设备模拟器,它调整了视口大小,但保留了桌面的连接和GPU。大多数转盘问题只出现在真实网络上的真实硬件上。

保持每张图像的高度相同

传送带以自己的比例显示每个图像，因此在风景旁边的肖像照片在较短的幻灯片下留下了一个间隙。 干净的修复是在上传之前将图像裁剪成一倍。 如果不能，例如向小部件添加一个CSS类 same-height，并将其粘贴到您的自定义 CSS 中：

.same-height .swiper-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

然后每张幻灯片都是 260 像素高，浏览器裁剪任何不适合的东西。

如果你想要一个连续的滚动

图像轮播一次移动一步，即使自动播放也能。 一条不停地滑行的条是选框，并且 Elementor 选框指南 显示了三种构建一种方式。

给每张图片自己的链接

的 图片旋转木马小部件 打开灯箱中的每个图像，没有链接字段。 Elementor 自己的传送带有一个自定义 URL 设置，但它会将每张幻灯片发送到相同的地址。 当每个项目需要自己的目的地（例如客户端徽标或合作伙伴徽章）时，使用徽标滑块构建行。

两个错误使旋转木马变慢

提供全尺寸图像。 Covered over,而且是大,摄影现场十滑转盘全尺寸可以20MB,同一个转盘在 large 2MB以下,没有人能分辨。

将其放在折叠上方并自动播放。 轮播成为您最大的内容丰富油漆,自动播放意味着浏览器在页面加载中对性能最敏感的第二秒内正在动画化。如果轮播必须在顶部,请关闭自动播放并静置,直到页面沉降为止。

标志与照片是不同的工作。它们以不匹配的形状和颜色出现,需要晚上才能坐成一排,这是 标志旋转木马演练 穿过。

常见问题