swiper的基础使用（九）

最新推荐文章于 2025-08-18 14:56:35 发布

原创最新推荐文章于 2025-08-18 14:56:35 发布 · 973 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

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

swiper介绍专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用Swiper库创建一个具有分组显示功能的轮播组件，并通过设置slidesPerColumn属性来实现多行展示效果。

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

<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 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 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 class='swiper-pagination'></div>
        </div>

之后我们到js当中初始化我们的swiper

<script>
            var swiper = new Swiper('.swiper-container',{
               pagination:'.swiper-pagination',
               paginationClickable:true,
               spaceBetween:10,
               slidesPerView:3,
               slidesPerColumn:3   //将swiper页面多行显示为：3行
            });
        </script>

那么可以看出我们这次没有太大的变化，实现样式依然是在初始化当中添加一条属性---------slidePerColumn
一般这个属性都是和分组显示做组合使用的。页面之间也最好加上间隙