move pagination outside of <swiper></swiper>

In all the examples, even with custom pagination, the pagination html is contained within the <swiper></swiper> block like so…

<swiper>
  <swiper-slide></swiper-slide>
  <div class="swiper-pagination"  slot="pagination"></div>
</swiper>

Is it possible to move the pagination outside the <swiper></swiper> block? For instance, move it into the footer

<swiper>
  <swiper-slide></swiper-slide>
</swiper>
<footer>
  <div class="swiper-pagination"  slot="pagination"></div>
</footer>

[cdrandin]

I wanted to present a simple solution that seems to get the job easily with some css changes.

.swiper-container {
    overflow: visible;
}
.swiper-pagination {
    position: absolute;
    bottom: -25px; // should be fine as is, but adjust to your liking
}

assuming your html structure is the same as in the docs

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

[tbenbow]

I moved pagination outside the swiper with absolute positioning. I added padding to the bottom of the container to get around needing to set overflow to visible.

.swiper-container {
  padding-bottom: 35px;
}
.swiper-container-horizontal > .swiper-pagination {
    position: absolute;
    bottom: 0;
}