我想將分頁(yè)項(xiàng)目符號(hào)從底部移動(dòng)到查看區(qū)域的頂部。

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

目前，分頁(yè)項(xiàng)目符號(hào)顯示在所有包裝器或JavaScript附加幻燈片內(nèi)容的下方。我希望它出現(xiàn)在那上面。

更多信息:https://framework 7 . io/docs/swiper . html # default-swiper-with-pagination

僅在swipper-wrapper上添加底部填充，并在分頁(yè)時(shí)移除底部填充

超文本標(biāo)記語(yǔ)言

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

鋼性鑄鐵

.swiper-wrapper{
    padding-bottom: 30px;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 0px !important;
}

解決

弄明白了——相當(dāng)簡(jiǎn)單，但是我還不知道我的CSS。

.swiper-pagination {
    bottom: 95%;
}

修改底部或頂部屬性。

這對(duì)我更有效，因?yàn)槲业幕脽羝笮〔灰?

.swiper-pagination {
    top: 2px;
}

試試這個(gè):

打開swiper & gt模塊& gt分頁(yè)& gt無分頁(yè)

在最上面一行:“root {...} sits，取消對(duì)swiper-pagination-bottom和- swiper-pagination-top行的注釋

編輯這些變量的值，如下所示

:root {
        --swiper-pagination-bottom: auto;
        --swiper-pagination-top: 8px;
}

如果您使用CDN來導(dǎo)入模塊，

添加上面的代碼作為選項(xiàng)參數(shù)，如下所示

const params = {
injectStyles: [`
    :root {
        --swiper-pagination-bottom: auto;
        --swiper-pagination-top: 8px;
    }
...
}

初始化swiper - complete主javascript文件代碼可能看起來像這樣

const swiperEl = document.querySelector('swiper-container')

const params = {
    injectStyles: [`
    :root {
        --swiper-pagination-bottom: auto;
        --swiper-pagination-top: 8px;
    }

    ...
      `],

    pagination: {
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
    },
}

Object.assign(swiperEl, params)

swiperEl.initialize();

....

希望對(duì)你這邊有用！

超文本標(biāo)記語(yǔ)言

<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一起使用，并且其中一個(gè)div.swiper-slide具有不同的高度，則最好使用該屬性:

鋼性鑄鐵

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

由于某些原因，當(dāng)我試圖在。swiper-pagination類，它用ngx-swiper-wrapper禁用了div.swiper-slide中的click事件。

不確定這是否會(huì)對(duì)任何人有所幫助，但是我可以通過設(shè)計(jì)Swiper容器的w/flex/flex-direction:column；，那么我只是通過設(shè)置它的順序來重新排序分頁(yè)的東西:-1；

感謝貢獻(xiàn)一個(gè)堆棧溢出的答案！

請(qǐng)務(wù)必回答問題。提供詳細(xì)信息并分享您的研究！但是要避免…

尋求幫助、澄清或回應(yīng)其他答案。根據(jù)意見發(fā)表聲明；用參考資料或個(gè)人經(jīng)歷來支持他們。要了解更多，請(qǐng)查看我們關(guān)于撰寫精彩答案的提示。