swiper的使用（一）

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> 

以上就是swiper的使用（一）的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

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