swiper的基础使用（三）

最新推荐文章于 2024-11-09 18:06:32 发布

原创最新推荐文章于 2024-11-09 18:06:32 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用Swiper框架创建一个具有垂直滚动效果的页面，并添加翻页导航以辅助页面切换。通过设置JS属性，实现了垂直方向上的平滑翻页。

首先按照第一节课的内容，将一个基本的swiper页面实现。
然后在初始化的js代码当中添加属性。

当然事先不要忘记引用下载好的框架文件。
我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动，以及垂直滚动下导航的样式。

在外部容器当中加入翻页导航。
<div class="swiper-container">
<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>
<div class="swiper-pagination"></div> //翻页导航的div
</div>
<script>
var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination', //绑定翻页导航
paginationClickable:true， //设定可以点击翻页导航进行翻页
direction:'vertical' //设定页面垂直翻页
});
</script>

这样就可以使页面进行垂直的滚动。