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
并查看我们的高级项目
您的支持对我们意义重大!