本节内容介绍swiper当中如何将导航变为滚动条样式。
首先我们搭建一个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> <div class="swiper-scrollbar"></div> </div>
然后到js部分添加初始化代码。
var swiper = new swiper('.swiper-container',{ spacebetween:30, grabcursor:true, slidesperview:3, centeredslides:true, scrollbar:'.swiper-scrollbar', //绑定分页导航 scrollbarhide:true //开启导航在不活动时的隐藏 });
可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar，然后在初始化当中绑定导航。就可以实现了。当然，可以关闭导航条的隐藏效果
以上就是swiper的基础教程（十二）的内容。