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%;
}

修改底部或顶部属性。

Answer 3

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

.swiper-pagination {
    top: 2px;
}

Answer 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 与 angular 一起使用，并且您的 div.swiper-slide 之一具有不同的高度，则最好使用此属性：

css

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

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

将Swiper Pagination移至Swiper Container顶部

4 个答案: