css - 将 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;
}

解决了