将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

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

.swiper-pagination {
    top: 2px;
}

Answer 3

弄明白了-相当简单，但我还不知道我的CSS。

.swiper-pagination {
    bottom: 95%;
}

修改底部或顶部属性。