swiper的基础使用（五）

最新推荐文章于 2024-11-19 20:46:01 发布

原创最新推荐文章于 2024-11-19 20:46:01 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #swiper #web前端 #框架 #移动

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用Swiper框架实现页面分组显示的效果。通过设置`slidesPerView`属性来控制每组显示的页面数量，并利用`spaceBetween`属性添加slide间的间隙，从而改善用户体验。

本节讲解如何让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>

当然不要忘记引用我们的框架文件，这样运行我们的页面就会发现我们的页面在当前屏幕当中会显示一组。