Swiper-如何让swiper页面分组显示

最新推荐文章于 2025-07-03 11:42:32 发布

ZhangXD_BLOG

最新推荐文章于 2025-07-03 11:42:32 发布

阅读量7.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Swiper 文章标签： swiper

本文链接：https://blog.csdn.net/u012054869/article/details/51823744

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