标签:html5 swiper
本文为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
一般这个属性都是和分组显示做组合使用的。页面之间也最好加上间隙
本文出自 “11721999” 博客,请务必保留此出处http://11731999.blog.51cto.com/11721999/1793138
标签:html5 swiper
原文地址:http://11731999.blog.51cto.com/11721999/1793138