如何在 WordPress 中使用滑块效果显示前后图像

假设您是一名健身博主，并希望通过分享您身体转变前后的图像来激励您的观众。 如果您可以使用前后图像滑块来显示差异，而不是将图像并排放置，那就太酷了。

等待！ 什么是前后图像滑块？

它是一个图像滑块，可将一个图像堆叠在另一个图像上，并使用交互式滑块来显示图像。 如果滑块水平移动，则当滑块移动到最右侧时会显示第一个图像，而当滑块向左移动时将显示第二个图像。

这种滑块对于比较两个相似的图像非常方便。 因此，它对许多专业人士（如摄影师、美容师、设计师、医生和牙医）很有用。

如果您是 WordPress 用户并且想知道如何在您的网站上使用它，那么您来对地方了。 在本文中，我将分享如何在网站上使用滑块效果添加前后图像。

因此，事不宜迟，让我们开始吧。

订阅我们的 YouTube 频道

如何在图像滑块之前添加

有许多免费和高级插件，您可以使用它们在网页上添加前后图像滑块。

但是，我们将在本文中使用Twenty20 Image Before After 插件。 稍后，我还会提到一些流行的免费和付费替代品。

在插件之前安装Twenty20 Image

2020 是一个免费插件，可在 WordPress 插件库中找到。 它允许您在帖子、页面和侧边栏中添加前后图像滑块。 它还支持流行的页面构建器，如 Elementor 和 WPBakery。

要安装此插件，请转到 Plugins -> Add New 并搜索Twenty20 Image Before-After。 找到插件后，只需安装并激活它：

在您的帖子或页面中添加前后图像

Two20 插件不附带任何设置页面。 所以你可以在安装插件后开始做脏活。

现在，在 WordPress 5.0 更新之后，您可能正在使用 Classic 或 Gutenberg 编辑器。 所以让我向您展示这个插件如何在两个编辑器上工作。

古腾堡编辑

到目前为止，Twenty20 插件还没有块，但您可以使用其短代码功能并将代码添加到短代码块中。

让我们看一下短代码的示例：

[twenty20 img1=”3442″ img2=”3442″ 方向=”水平” offset=”0.4″ align=”none” width=”100%” before=”Before” after=”After”hover=”false”]

让我解释一下每个参数：

• img1 – 在这里您必须添加第一张图像的图像 ID（不是图像 URL）。
• img2 – 添加第二张图片的 ID（而不是图片 URL）。
• 方向- 这允许您决定是在水平方向还是垂直方向上使用滑块。 因此，该值将是水平的或垂直的。
• offset – offset 的值应该在 0.1 到 1 之间。
• align - 这决定了前后图像的对齐方式。 值可以是 none、left 或 right。
• 宽度- 图像的宽度可以是百分比或像素。
• 之前- 您可以在此处添加之前图像的标题。
• after - 添加后图像的标题。
• 悬停- 此参数决定是否要在鼠标移动时移动滑块。 它接受真值或假值。

不知道如何找到图片的ID？ 从 WordPress 仪表板的左侧边栏中转到媒体 -> 库，然后单击图像。 现在检查您的网络浏览器的地址栏：

在上面的示例中，您可以在 URL 中看到 item = 50。 因此，50 是该特定图像的 ID。

好的！ 现在您知道如何使用Twenty20 简码，创建（或编辑）您想要添加前后图像滑块的帖子或页面。 然后，添加一个新块并搜索短代码小部件：

复制我在上面示例中使用的代码，将其粘贴到短代码框中并根据您的要求进行调整：

就是这样。 您现在可以预览帖子（或页面）并检查它是否正常工作。

经典编辑器

如果您使用的是经典编辑器，您将在安装插件后看到一个新按钮添加二十 20。 单击该按钮，将打开一个弹出窗口，要求您选择两个图像：

选择两个图像并单击插入后，将打开一个新窗口，询问您生成短代码的一些详细信息：

完成设置后，您可以单击“插入简码”按钮。

您也可以稍后对此短代码进行更改 - 只需按照古腾堡编辑器部分中的示例进行操作即可。

在侧边栏中添加前后图像

2020 插件还允许您在网站的侧边栏中添加前后图像。 它带有一个小部件，可以为您做很酷的工作。

前往外观 -> 小部件。 现在找到Twenty20 小部件并将其拖到侧边栏区域。 此小部件的设置与上一节类似 - 只是您有两个额外的按钮用于选择（或上传）前后图像。

完成后，保存小部件设置，然后检查您的网站。 很简单，不是吗？

一些替代插件

虽然我喜欢Twenty20 插件，因为它简单且免费，但您可能更喜欢其他的东西。 因此，我决定分享这个插件的一些免费和高级替代品：

1. Divi 的前 + 后图像

如果您是 Divi 用户，Divi 插件的 Before + After Images 最适合您的需求。 它是轻量级的、响应式的并且支持延迟加载。 它创建了一个新模块，可帮助您将前后图像添加到您的网站。 这个免费插件将与 Divi Builder 插件、Divi 主题和 Elegant Themes 的其他主题一起使用。

价格 – 免费 | 更多信息

2.多用途前后滑块

多用途 Before After Slider 是启用了触摸和滑动功能的高级插件。 它带有一个易于使用的管理面板，可帮助您根据需要调整每个图像滑块，并且不需要使用短代码。 您可以创建无限的前后图像并在帖子、页面和侧边栏上使用它们。

价格 – 18 美元 | 更多信息

3. 智能前后查看器

Smart Before After Viewer 是一个完全响应和触摸友好的高级插件。 它允许您在前后图像上添加自定义标签文本。 您可以毫不费力地更改标签的位置和颜色。 此插件还允许您在单个页面上添加多个图像。

价格 – 18 美元 | 更多信息

尾注

前后图像滑块是显示两个相同图像之间差异的好方法。 您可以按照本教程在 WordPress 网站上使用此类滑块。

那么，您是否使用过本文中提到的任何插件？ 或者，您想推荐一个适合实现相同目标的特定插件吗？ 在评论部分告诉我们。

精选图片来自 __/shutterstock.com