本节讲解如何让swiper页面分组显示。
有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求，在swiper当中就包装了一个屏幕显示一组页面的方法，只需要在swiper页面的初始化当中添加一条属性即可。
第一步我们依然是编写一个基础的swiper页面。<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>
</div>然后在js当中进行页面的初始化并且添加属性，为了观看效果更佳。
我们在页面当中添加了slide的间隙。
<script>
var swiper = new Swiper('.swiper-container',{
slidesPerView:3, //页面分组显示，这里显示为3组
spaceBetween:30 //slide间隙
});
</script>
当然不要忘记引用我们的框架文件，这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。
以上就是 swiper的基础使用（五）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
899
收藏
