swiper调整分页器Pagination的位置

swiper调整分页器Pagination的位置

问题

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

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

尝试修改

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

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

结果分页器消失了

分析原因

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

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

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

方法二:设置 overflow: visible;

css 复制代码
.swiper{ overflow: visible; } 
相关推荐
啾咪orJIUMI13 小时前
Vue 3 + SCSS 实现全屏系统门户:五栏展开与灯光联动
css
htzyl20614 小时前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
程序员大阳14 小时前
HTML+CSS+JS对话式实战(1)-开篇:认识我们要做的社团活动发布平台
javascript·css·html·实战·系统·平台·社团活动发布
一支蜉蝣14 小时前
Day26 XD安全学习笔记--PHP 应用&模版引用&Smarty渲染&MVC 模型&数据联动&RCE 安全
笔记·网络安全·html·php
用户2986985301415 小时前
Python 将 Markdown 批量转为 HTML:单文件与目录遍历两种实现
python·html·markdown
钱栈up15 小时前
热榜上手|HyperFrames:写HTML出MP4
前端·html
幸运小猿1 天前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
轻松西西莱尔1 天前
谷歌+斯坦福+CMU 等五家 203 页综述,我做了个HTML把主动式AI的边界跑给你看
前端·html·agent
MaAidan2 天前
用 Agent 排查线上问题:SLS 日志分析 + DB/Redis 数据验证,一条链路搞清楚
前端·bootstrap·html
砚凝霜2 天前
保姆级 | CTF Lemon:禁用右键/F12 怎么破?查看源码 + HTML 注释拿 flag
前端·html