博客> swiper的基础使用(三)
swiper的基础使用(三)
2019-08-23 00:34 评论:0 阅读:745 zhanying
html5 swiper

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

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

在外部容器当中加入翻页导航。

页面内容
页面内容
页面内容
页面内容
页面内容
//翻页导航的div
[removed] var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true, //设定可以点击翻页导航进行翻页 direction:'vertical' //设定页面垂直翻页 }); [removed] 这样就可以使页面进行垂直的滚动。 点击进入swiper强化教程:[ Enter your link description here: ](http://h5edu.cn/htm/step/h5edu_893.html)
收藏
0
sina weixin mail 回到顶部