标签:
本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的free模式。
第一步,我们还是要创建一个swiper的基础页面。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<img src="logo.png"></div> <div class="swiper-slide">H5EDU 2<img src="logo.png"></div> <div class="swiper-slide">H5EDU 3<img src="logo.png"></div> <div class="swiper-slide">H5EDU 4<img src="logo.png"></div> <div class="swiper-slide">H5EDU 5<img src="logo.png"></div> <div class="swiper-slide">H5EDU 6<img src="logo.png"></div> <div class="swiper-slide">H5EDU 7<img src="logo.png"></div> <div class="swiper-slide">H5EDU 8<img src="logo.png"></div> <div class="swiper-slide">H5EDU 9<img src="logo.png"></div> <div class="swiper-slide">H5EDU 10<img src="logo.png"></div> </div> <div class="swiper-pagination"></div> </div>
然后就要在初始化当中添加我们的free模式的属性了
<script> var swiper = new Swiper(‘.swiper-container‘,{ pagination:‘.swiper-pagination‘, paginationClickable:true, slidesPerView:3, spaceBetween:30, freeMode:true //free模式开启 }); </script>
实现之后我们来观看效果,free模式就是可以将翻页位置在任意位置停止。不再限制在页面当中
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
标签:
原文地址:http://www.cnblogs.com/zhanyingwang/p/5613179.html