Swiper - Section swiper-pagination custom

Question

这个问题我已经纠结了一段时间，直到我终于来这里分享我的问题，如果有人可以为我澄清一下。

我在下面有一段代码，我想使用 swiper js 并借助将幻灯片分页看起来像具有幻灯片放映功能的工作表，现在的问题是分页部分在两者中都不起作用部分。

代码 HTML：

<div class="container">
    <div class="row align-items-center">
    <div class="col-lg-6 col">
                    <div class="swiper mySwiper tabs">
                        <div class="swiper-pagination  position-relative">
                        </div>
                        <div class="swiper-wrapper ">
                          <div class="swiper-slide mt-4" data-hash="slide1">
                          ...
                            </div>
                          <div class="swiper-slide mt-4" data-hash="slide2">
                          ...
                          </div>
                          <div class="swiper-slide mt-4" data-hash="slide3">
                          ...
                          </div>
                          <div class="swiper-slide mt-4" data-hash="slide4">
                          ...
                          </div>
                          <div class="swiper-slide mt-4" data-hash="slide5">
                            ...
                          </div>
                        </div>
                </div>
    </div>
    <div class="col-lg-6 col">
                    <div class="position-relative d-flex align-items-center justify-content-center">
                        <div class="swiper mySwiper slide">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide main_slide_img" data-hash="slide1">
                                    ...
                                </div>
                                <div class="swiper-slide main_slide_img" data-hash="slide2">
                                    ...
                                </div>
                                <div class="swiper-slide main_slide_img" data-hash="slide3">
                                    ...
                                </div>
                                <div class="swiper-slide main_slide_img" data-hash="slide4">
                                    ...
                                </div>
                                <div class="swiper-slide main_slide_img" data-hash="slide5">
                                    ...
                                </div>
                            </div>
                            <div class="position-absolute " id="slide_controls">
                                <div class="swiper-button-next btnControls"></div>
                                <div class="swiper-pagination">
                                </div>
                                <div class="swiper-button-prev btnControls"></div>  
                            </div>
                        </div>
                    </div>
    </div>
    </div>
  </div>

代码JS：

var swiper = new Swiper(".tabs", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class="${className}">${(index + 1)} <i>Slide  </i></span>`;
    },
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

var swiper2 = new Swiper(".slide", {
  slidePreview: 1,
  spaceBetween: 0,
  pagination: {
      el: '.swiper-pagination',
      clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});