swiper的基础使用(二)
swiper的基础使用(二)
zhanyingwang 发表于2年前
swiper的基础使用(二)
  • 发表于 2年前
  • 阅读 32
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

这里是HTML5培训 swiper系列教程002: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        //设定可以点击翻页导航进行翻页
});
</script>


这样就在页面当中添加了一个翻页导航出来。

 

点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html

 

 

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