同步缩略图滑块怎么做：在 Bricks 中用 BricksExtras 实现（图文教程）

本教程将一步步教你，如何在由 Bricks 驱动的 WordPress 网站中，利用 BricksExtras 插件搭建「按文章独立的、同步联动的缩略图滑块」，图片数据来自图集类型（gallery-type）的自定义字段。

我们将在上方放置主图滑块，在下方放置缩略图滑块。

Step 1：创建图集类型自定义字段

如果你使用 ACF Pro，请创建一个 Gallery（图集）类型字段；如果你使用 Meta Box，请创建一个 Image Advanced（高级图片）类型字段。

将该字段关联到你的文章类型（post type）。

Step 2：为文章填充字段

编辑你的自定义文章类型（CPT）文章，为每篇文章填充该字段。

Step 3：安装并启用 BricksExtras

安装 BricksExtras 插件。

在插件设置中启用以下两个元素：Pro Slider 与 Pro Slider Gallery。

Step 4：搭建主图滑块（Pro Slider）

为你的文章类型创建一个 Bricks 单篇文章模板（single template）并进行编辑。

添加一个 Section，在其 Container 内放入 Post Title（文章标题）与 Post Content（文章内容）元素。

再添加另一个 Section，在其 Container 内放入一个 Pro Slider 元素。

SLIDES / LAYOUT

• No. of slides to show（显示的幻灯片数量）：3（建议用 3 或 5 这样的奇数，这样在底部缩略图滑块中点击某个缩略图时，放大的图片会居中显示）
• Gap between slides（幻灯片间距）：20

INTERACTION / BEHAVIOUR

• Focus（聚焦）：center

NAV ARROWS（导航箭头）

• Icon size（图标大小）：22
• 对于 PREV ARROW（上一个箭头）与 NEXT ARROW（下一个箭头）两者：
  • Top（上）：auto
  • Bottom（下）：-70

PAGINATION DOTS（分页圆点）

• Position（位置）：
  • Top（上）：auto
  • Bottom（下）：-30

GALLERY（图集）

• 启用 Gallery mode（图集模式）。
• 在 Pro Slider 下方添加一个 Pro Slider Gallery 元素。

完成本教程后，整体结构应该如下图所示：

点击动态数据闪电图标（dynamic data bolt），选择你的图集字段。

选择你想要的图片尺寸。

Link to（链接到）：Lightbox（灯箱）。

如果你想在灯箱底部也显示缩略图导航，请勾选「Group images into lightbox」（将图片分组进灯箱）与「Thumbnail navigation」（缩略图导航）。

如果缩略图在前端没有居中，或者每次点击（为了让当前缩略图居中）似乎都会移动位置，请在模板的 Page settings（页面设置）→ Custom code（自定义代码）中添加以下 CSS：

.pswp__thumbnail-nav-wrapper {
  left: 50% !important;
  transform: translate(-50%, 0);
  
  .pswp__thumbnail-nav {
    transform: none !important;
  }
}

Step 5：搭建底部缩略图滑块

我们来搭建底部缩略图滑块。

复制（Duplicate）上面的 Pro Slider。

在 STYLE 选项卡的 LAYOUT 下，将左右外边距（margin）设为 auto，同时将宽度（width）也设为 auto。

SLIDES / LAYOUT

• Gap between slides（幻灯片间距）：10
• 启用「Auto slide width」（自动幻灯片宽度）。

NAV ARROWS（导航箭头）

• 设为 None（无）。

PAGINATION DOTS（分页圆点）

• 禁用（Disable）。

SYNC SLIDERS（滑块同步）

• 启用 sync（同步）。
• 复制主图滑块的 CSS ID 并粘贴到此处。
• 例如（Ex.）：

GALLERY（图集）

• 启用 Gallery mode（图集模式）。

Step 6：注册自定义图片尺寸并收尾

在缩略图滑块中，选中内部的 Pro Slider Gallery。

你可以选择较小的图片尺寸。

如果你想注册一个自定义图片尺寸，请在子主题（child theme）的 functions.php 中添加以下代码（无需开头的 PHP 标签），或者通过 code snippets 插件添加：

<?php

add_image_size( 'small-thumbnail', 75, 75, true );

然后重新生成缩略图（regenerate thumbnails）。

大功告成！到前端检查一下效果。

以下是我们开发站导出的该 Section 的 JSON 文件，供你参考：

相关阅读

• Bricks 纯 CSS 无限滚动 Logo 墙：ACF + 自定义文章类型
• 用 ACF 和 Bricks 创建动态无限 Logo 轮播
• Bricks 按 ACF Gallery 图片数量做动态条件输出

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程