swiper调整分页器Pagination的位置

swiper调整分页器Pagination的位置

问题

**当前问题:**分页器在卡片内容当中

**期望效果:**分页器距离上方卡片有一段距离

尝试修改

发现分页器默认使用的是绝对定位,使用bottom定位位置

因此尝试修改bottom为负值使其往下偏离

结果分页器消失了

分析原因

定位发现由于swiper对.swiper容器默认设置了:overflow: hidden,因此任何超出容器的内容都会被隐藏

方法一(推荐):使用 padding-bottom 加高.swiper容器高度

css 复制代码
.swiper{
  padding-bottom: 72px;
}

方法二:设置 overflow: visible;

css 复制代码
.swiper{ overflow: visible; } 
相关推荐
keyipatience23 分钟前
CSS学习(2)|元素显示模式、盒模型、Flex 布局
javascript·css·html·css3
软件技术NINI14 小时前
圣罗兰彩妆html+css 4页
前端·css·html
2601_9516152015 小时前
网站模板 网站网页模板下载
前端·网络·html
酷炫码神16 小时前
Day 1|HTML5:一个商城首页的骨架,从 DOCTYPE 到语义化
前端·html·html5
AI源码16 小时前
鲜花商城(HTML 版)
前端·html
溪语流沙17 小时前
【Web全栈进阶】Composition API与组件通信:props深入、emit、插槽
前端·css·vue.js
Sunny_GMF19 小时前
Markdown 导出 HTML 实战:2.6MB 编辑器快照如何瘦身 71%(DOM 净化 + CSSOM 运行时裁剪)
编辑器·html·ai编程·harmonyos
zd84510150020 小时前
基于 HTML 与 Modbus TCP 构建设备仪器上位机:可行性分析与代码结构设计
前端·tcp/ip·html
传人once21 小时前
企业官网静态页基础结构如何搭
javascript·css
damoluomu21 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html