将 Swiper 分页移动到 Swiper 容器的顶部

Posted 2023-03-10

【中文标题】将 Swiper 分页移动到 Swiper 容器的顶部

【英文标题】：Move Swiper Pagination to Top of Swiper Container

【发布时间】：2017-08-15 05:19:47

【问题描述】：

我想将分页项目符号从底部移到查看区域的顶部。

<div class="swiper-container">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
</div>

目前，分页项目符号显示在所有包装器或 javascript 附加的幻灯片内容下方。我希望它出现在上面。

更多信息：https://framework7.io/docs/swiper.html#default-swiper-with-pagination

【参考方案1】：

想通了 - 相当简单，但我还不知道我的 CSS。

.swiper-pagination 
    bottom: 95%;

修改底部或顶部属性。

【参考方案2】：

这对我来说效果更好，因为我的幻灯片大小不一：

.swiper-pagination 
    top: 2px;

【参考方案3】：

仅在 swipper-wrapper 上添加填充底部并在分页时删除底部

html

<div class="swiper-container">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
</div>

css

.swiper-wrapper
    padding-bottom: 30px;


.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction
    bottom: 0px !important;

解决了

【参考方案4】：

html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

如果您使用带角度的 https://www.npmjs.com/package/ngx-swiper-wrapper 并且您的 div.swiper-slide 之一具有不同的高度，则最好使用此属性：

css

.swiper-pagination 
    bottom: calc(100% - 2rem);

由于某些原因，当我尝试使用 .swiper-pagination 类的顶部 css 属性时，它使用 ngx-swiper-wrapper 禁用了 div.swiper-slide 内的点击事件。