swiper网格布局

需要引用：

使用前需要引用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', //行布局});

实际效果：

为了不重复代码所以本代码html只写了一个swiper-slide选项，使用的话可以进行循环或者复制即可实现以下效果

注：
slidesPerColumnFill：
column:列布局

 row：行布局

swiper网格布局相关推荐

css 网格布局_我从CSS网格布局中学到的东西
css 网格布局 by Jennifer Wjertzoch 珍妮弗·维佐奇我从CSS网格布局中学到的东西 (Things I've learned about CSS grid layout) W ...
CSS Grid 网格布局全解析
一.介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情 ...
jQuery Masonry 一个 jQuery动态网格布局的插件
jQuery Masonry 是一个 jQuery动态网格布局的插件. 每个元素都是漂浮在固定的网格布局上面,就像一枚图钉定在墙上一样. 我们发现以下的15网站使用jQuery Masonry的范例. ...
【RecyclerView】十四、GridLayoutManager 网格布局管理器 ( GridLayoutManager.SpanSizeLookup 指定 item 元素占用网格个数 )
文章目录一.修改单条数据二.完整代码示例三.总体运行效果四.RecyclerView 相关资料一.修改单条数据 GridLayoutManager.SpanSizeLookup 的主要作用是 ...
【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )
文章目录一.网格布局 TableLayout 一.网格布局 TableLayout 网格布局需要设置整个布局中有多少行 , 多少列 , 每个单元格都可以设置一个组件 , 这个组件可以是单个 , 也 ...
BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
Android中的网格布局
文章目录 1 Android中的网格布局 1 Android中的网格布局重要属性: android:rowCount(行数量) android:columnCount (列数量) android:l ...
CSS的Grid网格布局
Grid网格布局就是通过设置百分比,或者默认划分的单位个数,来达到宽度自适应的效果比如,页面控件的宽度,设置自适应随着显示器的宽度的增加而增加,网页永远占满整个屏幕 .searchContentR ...
java计算器布局设计_Java图形化界面设计——布局管理器之GridLayout（网格布局）之计算器...
代码如下: import java.awt.*; import javax.swing.*; public class GridFrame extends JFrame { // 定义字符串数组,为按 ...
【Qt】Qt之网格布局
00. 目录文章目录 00. 目录 01. 概述 02. 开发环境 03. 常用函数详解 04. Qt设计师使用网格布局 05. 使用代码实现网格布局 06. 附录 01. 概述 QGridLayo ...

swiper网格布局

需要引用：

html:

css:

js:

实际效果：

swiper网格布局相关推荐

最新文章

热门文章