swiper的基础使用（一）

最新推荐文章于 2025-02-20 17:26:06 发布

原创最新推荐文章于 2025-02-20 17:26:06 发布 · 813 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #swiper #web前端 #框架 #移动

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何利用Swiper框架实现基本的翻页功能。通过引入必要的样式表及脚本文件，设置容器结构，并在JavaScript中进行初始化，即可轻松完成页面滑动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

swiper是一个移动端的页面滑动框架，我们可以使用这个框架来编写自己的简历。

swiper当中除了页面滑动意外，还提供了其他各种各样的功能组件，供我们使用。

以及方法和回调函数。

我们先实现一个基本的swiper页面，只有翻页功能的页面。

首先我们要先引用框架文件。swiper.css 和 swiper.js

<link rel="stylesheet" href="swiper.css">

<script src="swiper.js"></script>

再建立一个外部容器。swiper-cotainer

<div class="swiper-container">

然后在外部容器当中添加一个内部容器。swiper-wrapper

<div class="swiper-wrapper">

在内部容器当中添加每一个翻页页面

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

</div>

</div>

然后在js当中进行初始化

<script>

var swiper = new Swiper('.swiper-container');

</script>