Move Swiper Pagination to Top of Swiper Container

Question

I would like to move the pagination bullets to the top of the viewing area, from the bottom.

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

Currently, the pagination bullets show below all wrapper or JavaScript appended slide content. I would like it to appear above that.

More info: https://framework7.io/docs/swiper.html#default-swiper-with-pagination

Gingras

Answer 1

only add padding bottom on swipper-wrapper and remove bottom on pagination

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

solved

Anthology

Answer 2

This worked better for me, as my slides are of uneven size:

.swiper-pagination {
    top: 2px;
}

Idona

Answer 3

Figured it out - fairly simple, but I don't know my CSS yet.

.swiper-pagination {
    bottom: 95%;
}

Modify the bottom or top properties.

Gingras

This works for me, I am not sure why messing with the top: 2px will cause the entire slider to fail. – Esperance

Answer 4

Try this:

1. open swiper>modules>pagination>pagination.less

2. at the top line where the :root {...} sits, uncomment the line --swiper-pagination-bottom and --swiper-pagination-top

3. edit the value of those variables to the following

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

If you use CDN to import the module,

1. add the code above as option parameter as below

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

2. initialize the swiper - complete main javascript file code may look something like this

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();

....

Hope it works on your side!

Hafiz

Answer 5

swiper-container {
  --swiper-pagination-bottom: 20px;
}

Syncrisis

Answer 6

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>

If you're using https://www.npmjs.com/package/ngx-swiper-wrapper with angular and if one of your div.swiper-slide has a different height, it's better to use this property :

css

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

For some reasons, when I tried to use the top css property on .swiper-pagination class, it disabled click event inside the div.swiper-slide with ngx-swiper-wrapper.

Zoologist

Answer 7

not sure if this will be helpful to anyone, but I was able to do this by just styling the Swiper container w/ flex / flex-direction: column;, then I just re ordered the pagination stuff by setting it's order to order: -1;

Lax

Answer 8

For Swiper Element in an project using SCSS this can be done by overriding the CSS variable. For example, in my Angular Ionic project

:host {
    --swiper-pagination-top: 2px;
}

Bacterin