本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示。
 
第一步，我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。

<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 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 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 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 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 class="swiper-slide">第八页</div><div class="swiper-slide">第九页</div></div><div class='swiper-pagination'></div></div>

之后我们到js当中初始化我们的swiper

<script>var swiper = new Swiper('.swiper-container',{pagination:'.swiper-pagination',paginationClickable:true,spaceBetween:10,slidesPerView:3,slidesPerColumn:3   //将swiper页面多行显示为：3行});</script>

那么可以看出我们这次没有太大的变化，实现样式依然是在初始化当中添加一条属性---------slidePerColumn
一般这个属性都是和分组显示做组合使用的。页面之间也最好加上间隙

点击进入swiper强化教程：http://www.h5edu.cn/index.php?c=index&a=step&lessonid=893