Elementor 专业教程 15 - Media Caroucel小工具的设置和使用方法

Elementor Media Carousel 小工具能在页面中展示各种媒体内容，如图片，视频或音频等。

Media Carousel小工具提供了许多自定义选项，如改变图像大小，设定轮播速度，添加动画效果等样式和排列方式。你可以轻松地添加，删除，重新排列媒体，并制作各种图库，多媒体展示页面。

使用Media Carousel小工具，你可以轻松创建出色的页面来展示内容，吸引用户的关注，提高用户体验。

本篇教程将详细说明Media Carousel小工具的功能设置和使用方法。

首先，将Media Carousel 小工具拖放到编辑栏内，如下图所示。

拖放小工具到编辑栏后，你会看到如下画面。

Media Carousel小工具的内容标签主要有“Slides”和“Additional Options”

Skin是选择展示方式的设置选项。你可以在以下3种预设中选择：

• Carousel（默认）
• Slideshow
• Coverflow

根据你选择的Skin，内容标签中的设置选项会有所变化。所以，我们需要根据不同的Skin选择来进行说明。

但是，下方的Slides是所有Skin共同的设置选项。所以我们首先来说明Slides内容。

Slides是指定Media Carousel内需要展示的图像或视频内容的设置选项。

每个项目就是一张幻灯片。默认预设的幻灯片有5张，所以默认预设的项目也有5个。

如果你想要增加幻灯片的数量，只需要点击下方的《+新增项目》按钮添加即可。

如果你想“复制”或“删除”特定的项目，只需点击每个项目名称旁边的“复制”或“删除”按钮即可。

点击单个项目，你可以看到里面有以下3个设置选项：

• Type
• Image
• Link

Type是选择显示内容格式的设置选项。你可以在“图像”和“视频”中选择。

◆如果你选择Type为 Image

Image是选择和替换要展示的媒体文件的设置选项。你可以在媒体库中选择已上传的图像文件，或上传新的图像文件并选择。

Link是指定点击图像时的链接设置选项。你可以在以下3个预设中选择：

• None（默认）
• Media File
• Custom URL

如果你将Link选择为“Media File”，点击图像的话图像将以灯箱的形式显示在页面中，如下图所示。

如果你将Link选择为“Custom URL”，你需要给图像添加自定义链接，如下图所示。

设置自定义链接后，用户只需点击对应的图像，就会跳转到指定的链接页面，网站，或者第三方服务。

◆如果你选择Type为 Video

当你选择Type为“Video”时，需要添加自定义Video链接，如Youtube，Vimeo等视频链接。

点击图片上的播放按钮，就会自动弹窗播放指定的视频内容。

关于视频的封面图像，以上图中使用了洋梨的图像。但是如果设置视频时，最好设置一个封面图片为好。

当选择Skin为Carousel时，包含的设置选项如下：

• Effect
• Slides Per View
• Slides to Scroll
• Height
• Width

“效果” 是用来设置媒体内容切换动画效果的选项。可以从预设的 “幻灯片（Slide）”， “淡入淡出（Fade）”， “立方体（Cube）” 中选择。

“每次展示内容个数” 是用来设置轮播中每次展示内容个数的选项。默认是展示3个内容。可以选择0到10个内容。如果设置为4，效果如下图所示。

※注意：当效果设置为 “淡入淡出” 或 “立方体” 时，此项设置将失效。另外，设置的展示数量不能超过项目总数，如果超过也将失效。

“每次滚动项目数量” 是设置每次轮播滚动多少个项目内容的选项。默认是1个。可以选择0到10个。

注意：当效果设置为 “淡入淡出” 或 “立方体” 时，此项设置将失效。另外，设置的展示数量不能超过项目总数，如果超过也将失效。当项目数量较少时，建议使用默认设置。

“高度” 是用来设置轮播框架高度的选项。可以设置0到1000之间的数值。默认高度为230。

上图是将高度设置为500像素时的效果。可以根据设计需要进行自定义设置。

※注意：如果设置的高度超过图像的原始像素高度，图像会被放大显示。如果图像的原始像素不高，最好不要设置过高的高度，以免图像变模糊，影响用户体验。

“宽度” 是用来设置轮播容器宽度的选项。默认是100%的宽度。

这里的百分比是相对于编辑栏宽度的百分比，所以设置的百分比是以编辑栏宽度为标准的。可以设置0到100之间的数值。

当然，也可以使用像素单位来设置轮播框架的宽度。关于单位设置，将在其他课程中详细介绍。

当选择Skin为Slideshow时，轮播Box的布局会变化，同时会扩大显示轮播Box的最左边图像。如下图所示：

Slideshow的Effect与Carousel的Effect的说明相同，请参考Carousel的说明。

Slideshow的Height是指定扩大显示图像内容部分的高度设置选项。可设置0到1000之间的数值。默认数值约为450。上图是将数值设置为300时的效果。根据添加的内容原始大小来调整显示大小即可。

Slideshow的Slides per View是指定下方滑动图像每次展示内容数量的设置选项。 默认是5。可根据项目数量进行选择。

Ratio是指定下方滑动图像显示纵横比的设置选项。可在以下预设中选择：

• 1:1
• 4:3
• 16:9
• 21:9（默认）

上图是将纵横比设置为1比1时的效果。

Centered Slides选项用于选择是否启用轮播Box中间图像的扩大显示。默认是关闭。

关闭状态时，默认扩大显示轮播Box最左边的图像。开启此项后，可以将轮播Box中间的图像扩大显示。

当选择Skin为Coverflow时，设置内容与Carousel的设置相同。所以请参考Carousel的设置。

Arrows选项用于选择是否显示左右切换箭头。默认是显示，也可选择关闭。

Pagination选项用于选择分页导航的显示方式。分页器可让用户快速确认整体页面数量以及正在阅读的页面信息，因此建议显示分页导航。分页导航可在以下4个预设中选择：

• None：不显示分页导航
• Dots（默认）：圆点分页导航
• Fraction：数字分页导航
• Progress：进度条分页导航

点数和数字分页导航比进度条分页导航更直观地显示页面总数，但设计感不如进度条。可根据页面设计进行选择。

切换持续时间（Transition Duration）是指定轮播动画从开始到结束的持续时间的设置。默认预设500毫秒，即0.5秒。

自动播放（Autoplay）是选择是否开启自动轮播的设置选项，默认是开启。关闭自动轮播时，需要用户点击箭头或者分页器才能滑动内容。

自动播放速度（Autoplay Speed）是指定自动轮播速度的设置选项。默认是5000毫秒，即每5秒轮播一次幻灯片内容。

无限循环（Infinite Loop）是选择是否无限循环播放媒体内容的设置选项，默认是开启。开启无限循环时，图像将从左到右无限循环播放媒体内容。选择关闭时，媒体内容从左到右播放一次后，在最后的媒体内容暂停播放。

悬停时暂停（Pause on Hover）是选择鼠标悬停时是否暂停轮播的设置选项，默认是开启。开启后，当鼠标悬停于媒体内容上方时，轮播将自动暂停。

交互时暂停（Pause on Interaction）是选择是否在用户操作时暂停轮播的设置，默认是开启。此项功能是当“悬停时暂停”选择关闭时才发挥效果的。当“悬停时暂停”选择关闭时，用户的鼠标悬停于媒体上边图像也会自动播放。这时如果用户操作轮播媒体内容时，媒体还在轮播的话，用户的操作就变得没有意义了。因此这时需要开启“交互时暂停”功能，在用户操作时，暂停自动轮播。等用户不再操作时，再开启自动轮播。

覆盖层（Overlay）是选择是否显示媒体内容覆盖层选择是否显示媒体项目的覆盖内容。可在“Text”和“Icon”中选择。

• 选择Text时

选择Text时可在以下选项中选择文本内容。

• Title：图像标题
• Caption：说明文字
• Description：说明

上述文本可在媒体库对每个媒体文件进行设置。

关于图像的详细说明请参考《Elementor 基础教程 – 图像小工具的设置和使用方法》

Animation是选择鼠标悬停时覆盖内容显示动画效果的设置选项。可在以下预设动画中选择。

• Fade（默认）
• Slide Up
• Slide Down
• Slide Right
• Slide Left
• Zoom In

具体效果请看以下视频。

选择Icon时

选择Icon时，可在预设的4个Icon中选择显示在覆盖内容中的图标。如下图

根据喜好或者设计需要进行选择即可。

图像尺寸是指定加载显示图像大小的设置选项。

更多关于图像尺寸的详细说明，请参考Elementor图像小工具的说明。

Image Fit是指定媒体内容显示适应方式的设置选项。可在以下预设中选择：

• Cover（默认）：所有的图像将以相同的大小显示
• Contain：所有的图像会根据原有的大小全部显示
• Auto：和Cover相同，但是会受到图像尺寸的影响。

选择任意一个方式，媒体内容的显示方式会发生变化。如下图：

在选择显示方式时，需要考虑图像原有的大小，以及轮播Box的高度等因素综合判断后选择。

Lazy Load是选择是否延迟加载媒体内容的设置选项。开启后可加快页面的加载显示速度。

如果不是特别大的图像，区别不是很大。默认关闭即可。

Media Caroucel的样式标签主要包含以下4个设置项：

1. Slides
2. Navigation
3. Overlay
4. Lightbox

Slides是自定义Media Carousel外观样式的设置选项。包含以下设置选项：

• Space Between：指定媒体内容之间的间距大小。
• Background Color：指定轮播Box的背景颜色。
• Border Size：指定轮播Box的边框大小。
• Border Radius：指定轮播Box的边框半径大小。
• Border Color：指定轮播Box的边框颜色。
• Padding：指定轮播容器的内边距大小。

更多关于图像的详细设置说明，请参考Elementor图像小工具的说明。

Navigation是自定义导航标识外观样式的设置选项。包含以下设置选项：

–Arrows

• Size：指定箭头导航大小的设置。
• Color：指定箭头导航颜色的设置。

-Pagination

• Position：指定圆点导航的显示位置。可在“Inside”和“OutSide”中选择。
• Size：指定圆点导航图标大小的设置。
• Color：选择和替换圆点导航默认颜色。
• Active Color：选择和替换圆点导航当前页面的颜色

-Play Icon

• Color：选择和替换视频播放按钮的颜色
• Size：指定视频播放按钮的图标大小
• Shadow：给视频播放按钮添加阴影效果。

Overlay是自定义覆盖图层样式的设置选项。包含以下设置选项：

• Background Color：选择和替换覆盖图层背景颜色
• Text Color：选择和替换文本或图标颜色
• Icon Size：指定图标大小的设置。

※在内容标签的Overlay中选择“Text”时，样式标签的Overlay的Icon将变成排版设置。

LightBox是设置灯箱外观样式的设置项。包含以下设置选项：

• Color：选择和替换灯箱背景颜色。
• UI Color：选择和替换灯箱箭头和关闭按钮的默认状态颜色
• UI Hover Color：选择和替换灯箱箭头和关闭按钮的悬停状态颜色。
• Video Width：指定媒体内容显示宽度的设置。以画面宽度为准的百分比。

更多关于样式的颜色，排版，阴影，动画效果等详细设置可参考《Elementor 通用教程 – 小工具样式标签的通用设置和使用方法》

高级设置是所有小工具通用的设置项，具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是Media Carousel小工具的功能和使用方法的说明。

希望本编内容能对您使用Elementor有帮助。