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

【问题标题】：Move Swiper Pagination to Top of Swiper Container将 Swiper 分页移动到 Swiper 容器的顶部
【发布时间】：2017-08-15 05:19:47
【问题描述】：

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

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

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

【问题讨论】：

标签： css pagination swiper html-framework-7

【解决方案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 内的点击事件。

【讨论】：