swiper - 如何在 SwiperJS 容器外使用分页？

Question

如何在 swiper-container 类之外使用分页？我使用 Swiper.js 和分页功能。 红色区域：可拖动区域，但我需要这个区域不可拖动。

我在 gif 中的问题

如何将分页从可拖动区域移动到不可拖动区域？

我的代码：

HTML/PHP

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <?php while ($posts_args->have_posts()) : $posts_args->the_post(); ?>
            <div class="swiper-slide">
              <?php get_template_part('template-parts/cards/card', 'article'); ?>
            </div>
          <?php endwhile; ?>
        </div>
        <div class="swiper-pagination"></div>
      </div>

Javascript：

var Slider = (function() {
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    grabCursor: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    breakpoints: {
      0: {
        slidesPerView: 1,
        spaceBetween: 10,
      },
      992: {
        slidesPerView: 2,
        spaceBetween: 15,
      },
      1200: {
        slidesPerView: 3,
        spaceBetween: 20,
      }
    }
  });
})();

标签： swiper