博客> swiper的基础使用(九)
swiper的基础使用(九)
2019-08-22 23:41 评论:0 阅读:656 zhanying
html5 swiper

本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示。

第一步,我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。

第一页
第二页
第三页
第四页
第五页
第六页
第七页
第八页
第九页
第一页
第二页
第三页
第四页
第五页
第六页
第七页
第八页
第九页
第一页
第二页
第三页
第四页
第五页
第六页
第七页
第八页
第九页

之后我们到js当中初始化我们的swiper [removed] var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, spaceBetween:10, slidesPerView:3, slidesPerColumn:3 //将swiper页面多行显示为:3行 }); [removed] 那么可以看出我们这次没有太大的变化,实现样式依然是在初始化当中添加一条属性---------slidePerColumn 一般这个属性都是和分组显示做组合使用的。页面之间也最好加上间隙 点击进入swiper强化教程: Enter your link description here:

收藏
0
sina weixin mail 回到顶部