众所周知,Advanced Custom Fields自定义字段插件（简称为ACF插件），在Wordpress做B2B风格的独立站建站中用作产品/Projects管理系统的一个优秀插件，可以替代Woocommerce类C端零售插件来使用，减少页面额外的js等脚本负载，让页面更轻量清爽。
字段配置
但是ACF插件的Gallery Thumbnail模块（类似ali国际站的主图，附图的切换模块）需要升级ACF Pro版的插件，也是一笔额外的小开支。祥助这篇文章分享一下无需代码，通过Elementor Pro自带的元素，实现类似ali国际站的主图+附图（显示为Thumb缩略图）的Gallery滑块效果的思路。
祥助这里打开ACF后台-Field Groups，添加一个新的Fields集合类型，命名我们可以按喜好取名，这里祥助命名为：产品附图Thumbnail。
- 依次添加4~6个Thumbnail 字段模块，这里的字段会显示在我们在ACF里设置的Products或Projects等产品/项目类型的编辑页内。
2. 每个Thumb的字段，将Field Type设置为Image图片类型，并设置分配好规范化的Field Label，Field Name后保存。
3. Show this field group if的显示条件，将这个Field Groups的display条件设置为你创建的product或project等项目类型即可。
这样ACF的Gallery字段模块，我们就设置完毕了，后面编辑产品的界面就会出现这些Gallery的图片上传按钮，供我们上传对应的产品附图。
产品编辑
接下来祥助编辑一个ACF创建过的产品类型（这个大家在使用ACF的时候都会创建好，是ACF的基础操作，具体步骤后期的文章也会分享）。
- 第一张主图依然使用Post类型自带的Feature Images上传好即可
- 在产品编辑的页面就会出现我们之前字段设置步骤配置的Thumbnails附图模块，依次将几张附图上传好
这里上传的附图，将在后面被Template的模板字段调用，显示在产品详情页的前端。
模板调用
ACF的产品模板，可通过Elementor-Template-Theme Builder-Single Post去创建，本质上是走的Post页面类型的Type，和博客文章的页面类型基本一致。注：Elementor Pro请升级到官方提供的最新版本，不要使用老旧版本。
祥助在这里创建一个Single Product的模板类型，Instances condition应用条件设置为给ACF创建的Products Type，应用给产品类型。接下来开始编辑产品详情页的全局展示模板（具体的设计思路大家可以按自己的喜好来，后期祥助也会更新文章分享）
- 添加Media Carousel元素，模式选Slideshow，Item 1是第一张主图，点击Dynamic Tag动态标签，选择Featured Image（之前编辑产品的步骤我们插入的Feature主图）
2. Item2开始是作为附图显示，每个Item的动态标签都设置一个对应的Thumbnails模块，这样就对应起来了。
3. 图中有一个600px的Height高度数值，是在Desktop端的，对不同的其他设备如平板横屏，平板竖屏，移动端横屏/竖屏等设置合适的高度，大家记得按合适的尺寸进行设置即可。
思路归纳
到这里就全部操作完成了，模板保存后打开产品详情页前端就可以看到主图，附图Thumb的小图展示切换效果。鼠标点击不同的thumb缩略小图，上方的大图预览也会切换显示到小图的对应大图。
这里我们的整体操作的思路其实很简单，核心就是使用了Elementor Pro的Media Carousel的Slideshow的功能，完成了步骤的操作：
- ACF创建多个Thumbnails的Image类型模块，对应每一张附图调用的字段位置,并在产品编辑上传好每张附图
- Slideshow本身是按Thumb小图显示为缩略图的设计，完美契合了主图，附图的滑块切换效果
- Slideshow的Items分别调用Featured主图和Thumb的附图的Dynamic tag的字段
Alt标签
有个注意点，图片是调用Background image的方式进行呈现，对Seo的友好性不强，已给Elementor官方反馈改进，等官方升级。同时可以在详情页通过插入Image元素，引用主图位同样的这个链接的图片做样式展示（如左图右文），来让Google收录（一般基本是主图附图的图片，详情也会重新插入，没这么多额外图片使用）
无话可说，只是看看