这里是 swiper系列教程002:
上上一节我们实现了一个基本的滑动页面,除了滑动什么功能都没有,那么这节课我们就要在页面当中添加其他的功能属性了。
首先按照上节课的内容,将一个基本的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强化教程: