第一步，我们还是要创建一个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基础使用（八）的内容。