swiper的基础使用（三）

首先按照第一节课的内容，将一个基本的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> 

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

以上就是 swiper的基础使用（三）的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于swiper的基础使用（三）的详细内容...