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

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