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

Question

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

<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

Answer 1

仅在 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;
}

解决了

Answer 2

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

.swiper-pagination {
    bottom: 95%;
}

修改底部或顶部属性。