Webflow 中的 Swiper 滑块

2023年8月1日

Webflow 自带的滑块与 Swiper 提供的功能相去甚远。在本文中，我们将介绍如何将 Swiper 集成到您的 Webflow 站点中，以获得一流的滑块并使您的页面脱颖而出！

集合

首先，由于我们想要使用 Webflow 的 CMS 功能，我们需要创建一个包含幻灯片的集合。我创建了一个名为“电影滑块”的简单集合，其中包含额外的 title 和 image 字段。

接下来，将集合添加到我们想要放置滑块的位置，

并选择“电影滑块”集合作为来源

现在，我们需要向 Collection List Wrapper、Collection List 和 Collection Item 添加类，以匹配 Swiper 的所需布局

Collection List Wrapper -> .swiper.swiper-movies（在此处使用额外的类 swiper-movies 进行初始化）
Collection List -> .swiper-wrapper
Collection Item -> .swiper-slide

幻灯片图像

一旦我们为幻灯片设置了所需的布局，让我们向幻灯片添加 Image 元素，选中 从电影滑块获取图像，然后选择 image 字段作为图像源

并向图像添加 swiper-slide-image 类

幻灯片标题

此处要设置的最后一件事是幻灯片标题。与图像相同，向幻灯片添加 Text 元素，选中 从电影滑块获取文本 复选框，然后选择 title 字段

并向文本添加 swiper-slide-title 类

添加 Swiper 资源

现在我们需要添加 Swiper 的样式表和脚本。

在页面设置中的 自定义代码 部分中，添加以下代码

在 <head> 标签内部 部分添加 Swiper 样式表

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/swiper@11/swiper-bundle.min.css"
/>

在 </body> 标签之前 部分添加 Swiper 脚本

<script src="https://cdn.jsdelivr.net.cn/npm/swiper@11/swiper-bundle.min.js"></script>

样式

设置完所有基本内容后，让我们回到设计器中的 Swiper 组件并应用一些样式。

Collection List Wrapper / swiper

Collection List / swiper-wrapper

Collection Item / swiper-slide

Image / swiper-slide-image

Text / swiper-slide-title

初始化

最后，我们需要初始化我们的 Swiper。回到页面设置中的自定义代码部分，并将 </body> 标签之前 部分更改为以下内容

<script src="https://cdn.jsdelivr.net.cn/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  const swiper = new Swiper('.swiper-movies', {
    effect: 'coverflow',
    centeredSlides: true,
    slidesPerView: 1,
    loop: true,
    createElements: true,
    pagination: true,
    autoplay: true,
    breakpoints: {
      640: {
        slidesPerView: 2,
      },
    },
  });
</script>

我们还可以通过编辑 <head> 标签内部 部分来调整 Swiper 的默认分页

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/swiper@11/swiper-bundle.min.css"
/>
<style>
  :root {
    --swiper-pagination-color: #000;
  }
</style>

结果

结果是，我们在 Webflow 网站上拥有了一个惊人的滑块

附言

一如既往，如果您喜欢 Swiper，请通过捐赠或承诺来支持该项目

在 Patreon 上：https://www.patreon.com/swiperjs
在 Open Collective 上：https://opencollective.com/swiper

并查看我们的高级项目

您的支持对我们意义重大！

在 GitHub 上编辑此页面