在 Bricks 中集成自定义 SwiperJS 轮播

在本教程中，我们将演示如何在 Bricks 中借助 SwiperJS 库集成一个自定义轮播，并如何通过 JSON 对象传入自定义参数。如果你还不太熟悉 Bricks 的查询循环（Query Loop），可以先阅读 在 Bricks 中将查询循环显示为三列。

引入 SwiperJS 库

首先，我们需要把 SwiperJS 库引入页面。个人习惯是根据 ACF 字段按需条件引入脚本，但你可以用任何自己喜欢的方式引入这些文件。

你不需要下载这个库，因为它已经是 Bricks 核心文件的一部分。只需用下面的代码将其入队：

// Enqueue SwiperJS
wp_enqueue_script( 'bricks-swiper' );
wp_enqueue_style( 'bricks-swiper' );

JavaScript 初始化脚本

把下面这段代码添加到你的页面——同样，用你喜欢的入队方式即可：

// Mount each SwiperJS slider after loading the page
window.addEventListener('load', (event) => {

   // Query the Swiper containers
   const swiperContainers = document.querySelectorAll('.swiper-container');

   // Check if any SwiperJS container exists on the page
   if (swiperContainers.length < 1) {
      return console.log('No swiper container found. Make sure you added the correct classes to your slider');
   }

   swiperContainers.forEach(container => {

      // Get the slider options from the data-attribute 
      let options = JSON.parse(container.dataset.swiperOptions);

      // Check if options are correctly inserted in the data-attribute
      if (!options) {
         console.log('No options found on the swiper container.');
      }

      // Initializing the slider
      let slider = new Swiper(container, options);

   });
});

DOM 结构要求

为了让脚本按预期工作，你需要遵循下面的 DOM 结构（参见官方文档），并给每个元素添加所有以 swiper- 开头的类，如下图所示。

注意：在下面的示例中，我们在 swiper-slide 块上添加了一个查询循环，用来展示某个自定义文章类型的特色图片，但这完全是可选的——你可以在幻灯片容器内放入任意元素。你也可以更改分页容器的 DOM 结构。在示例中我们用图标元素来制作箭头，但你也可以用按钮、图片等，只要确保添加了正确的类名即可。

通过 JSON 传入自定义参数

在 swiper-container 元素上，我们会添加一个名为 data-swiper-options 的自定义数据属性，你可以把所有自定义参数（查看全部参数）以 JSON 对象的形式粘贴进去。

示例一：循环分数分页

让我们用以下属性快速做一个自定义轮播：

• 无限循环
• 每屏一张幻灯片
• 自定义箭头
• 分数形式的自定义分页

参考 SwiperJS 文档，我们的参数应当包含以下配置：

{
   loop:true,
   slidesPerView:1,
   pagination:{
      el:".swiper-pagination",
      type:"fraction"
   },
   navigation:{
      nextEl:".swiper-arrow-next",
      prevEl:".swiper-arrow-prev"
   }
}

把这个对象转换成合法的 JSON。你可以打开 https://jsonformatter.curiousconcept.com/ ，把上面的 JavaScript 对象粘贴到主输入框里并转换为 JSON。结果如下：

{
   "loop":true,
   "slidesPerView":1,
   "pagination":{
      "el":".swiper-pagination",
      "type":"fraction"
   },
   "navigation":{
      "nextEl":".swiper-arrow-next",
      "prevEl":".swiper-arrow-prev"
   }
}

下面是可直接放进前面 data-attribute 的紧凑结果：

{"loop":true,"slidesPerView":1,"pagination":{"el":".swiper-pagination","type":"fraction"},"navigation":{"nextEl":".swiper-arrow-next","prevEl":".swiper-arrow-prev"}}

现在这些选项就会应用到我们的轮播上。

示例二：卡片切换效果

现在看看如何把 SwiperJS 的官方 demo 参数集成到我们的轮播里。其中一个你很难用 Bricks 原生轮播复现的流行 demo 就是 Effect Cards（卡片效果）。

我们可以在新窗口打开该轮播并查看源代码，会看到类似如下的滑块设置：

现在把这个 options 对象转换为合法的紧凑 JSON：

{"effect":"cards","grabCursor":true}

再把它放进我们的 data-swiper-options 属性中。

这样就完成了。

小结

通过入队 Bricks 自带的 SwiperJS 库、编写一段统一的初始化脚本，并用 data-swiper-options 数据属性以 JSON 传入参数，你就能在 Bricks 中轻松实现原生轮播不支持的高级效果（如卡片切换、分数分页、自定义箭头）。需要更多轮播变体时，只需调整 JSON 参数即可。

站长

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.

获取报价 →浏览全部教程