swiper的使用(一)
swiper的使用(一)
zhanyingwang 发表于2年前
swiper的使用(一)
  • 发表于 2年前
  • 阅读 26
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

这里是HTML5培训 swiper系列教程001: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>​

http://www.h5edu.cn/index.php?c=index&a=step&lessonid=893

共有 人打赏支持
粉丝 4
博文 66
码字总数 28707
×
zhanyingwang
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: