swiper网格布局

最新推荐文章于 2024-03-28 11:12:25 发布

原创最新推荐文章于 2024-03-28 11:12:25 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#swiper网格布局

swiper 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用Swiper库创建网格布局，包括需要引入的CSS和JS文件，以及HTML和CSS代码示例。通过设置slidesPerColumnFill属性实现列布局效果。

需要引用：

使用前需要引用swiper.css文件以及swiper.js文件

html:

    <!-- 选项列表 -->
    <div class="lie-list">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div>
                        <img src="" alt="">
                        <span>测试测试</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

css:

.lie-list {
     width: 100%;
     height: 12rem;
     margin: 0 auto;
     padding: 0 5%;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     background-color: #fff;
     box-sizing: border-box;
 }
 
 .lie-list .swiper-container,
 .lie-list .swiper-wrapper {
     width: 100%;
     height: 100%;
 }
 
 .lie-list .swiper-slide {
     height: 100%;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     padding: 0;
     margin: 0;
 }
 
 .lie-list .swiper-slide a {
     display: flex;
     width: 25%;
 }
 /* .lie-list .swiper-slide .lie {
     width: 100%;
     height: 49%;
     display: flex;
     justify-content: space-between;
     border: 1px solid black;
 } */
 
 .lie-list .swiper-slide a div {
     width: 100%;
     height: 50%;
     display: flex;
     margin: 0;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
 }
 
 .lie-list .swiper-slide div img {
     width: 3rem;
     height: 3rem;
     border-radius: 0;
     margin-bottom: 0.3rem;
 }
 
 .lie-list .swiper-slide div span {
     /* color: #ffffff; */
     font-size: 0.9rem;
     color: #3A3A3A;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

js:

    var swiper = new Swiper('.lie-list .swiper-container', {
        slidesPerView: 4, //一行显示4个
        slidesPerColumn: 2, //显示2行
        slidesPerColumnFill: 'row', //行布局

    });