博客> swiper的基础使用(五)
swiper的基础使用(五)
2019-01-22 16:22 评论:0 阅读:490 zhanying
html5 swiper

本节讲解如何让swiper页面分组显示。 有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。

第一步我们依然是编写一个基础的swiper页面。

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

然后在js当中进行页面的初始化并且添加属性,为了观看效果更佳。 我们在页面当中添加了slide的间隙。 [removed] var swiper = new Swiper('.swiper-container',{ slidesPerView:3, //页面分组显示,这里显示为3组 spaceBetween:30 //slide间隙 }); [removed] 当然不要忘记引用我们的框架文件,这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。

点击进入swiper教程: Enter your link description here:

收藏
0
sina weixin mail 回到顶部