Swiper.js多实例导航箭头不显示问题排查求助

大家好，我最近在使用Swiper.js开发时碰到了一个棘手的问题：我需要在页面不同位置创建3个Swiper实例，第一个实例的导航箭头正常显示且能工作，但后面两个实例的导航箭头完全不出现，我排查了好久都没找到原因。

下面是不工作的那两个实例的代码（我还没给它们写自定义CSS，JS代码是放在DOMContentLoaded事件监听器里执行的）：

JS代码 #

const estruturaswiper = new Swiper('.swiper-estrutura', {
  direction: 'horizontal',
  // loop: true,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 1,
  navigation: {
    nextEl: '.estrutura-next',
    prevEl: '.estrutura-prev',
  },
  pagination: {
    el: '.estrutura-pagination',
    clickable: true,
  },
});
const depoimentoswiper = new Swiper('.swiper-depoimento', {
  direction: 'horizontal',
  loop: true,
  grabCursor: true,
  centeredSlides: true,

  navigation: {
    nextEl: '.depoimento-next',
    prevEl: '.depoimento-prev',
  },
  spaceBetween: 30,
  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    640: {
      slidesPerView: 2,
    },
    1049: {
      slidesPerView: 3,
    },
    1388: {
      slidesPerView: 4,
    },
  },
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" />
<div class="swiper-estrutura">
  <div class="swiper-wrapper" id="swiper-wrapper">
    <div class="swiper-slide"><img src="assets/sala.jpg" alt="Image1"></div>
    <div class="swiper-slide"><img src="assets/escritorio.jpg" alt="Image2"></div>
  </div>

  <div class="estrutura-prev" id="estrutura-prev"> </div>
  <div class="estrutura-next" id="estrutura-next"></div>
  <div class="estrutura-pagination" id="estrutura-pagination"></div>
</div>

<div class="swiper-depoimento">
  <div class="swiper-wrapper" id="swiper-wrapper">
    <div class="swiper-slide">
      <div class="card-depoimento">
        <div class="card-depoimento-tag tag-aluno">
          <center>aluno</center>
        </div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero minima accusantium
        <div class="nome-aluno">
          Nome do aluno
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card-depoimento">
        <div class="card-depoimento-tag tag-aluno">
          <center>aluno</center>
        </div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero minima accusantium
        <div class="nome-aluno">
          Nome do aluno
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card-depoimento">
        <div class="card-depoimento-tag tag-pacientemodelo">
          <center>Paciente Modelo</center>
        </div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero minima accusantium
        <div class="nome-aluno">
          Nome do aluno
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card-depoimento">
        <div class="card-depoimento-tag tag-aluno">
          <center>aluno</center>
        </div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero minima accusantium
        <div class="nome-aluno">
          Nome do aluno
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card-depoimento">
        <div class="card-depoimento-tag tag-aluno">
          <center>aluno</center>
        </div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero minima accusantium
        <div class="nome-aluno">
          Nome do aluno
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="card-depoimento">
        <div class="card-depoimento-tag tag-aluno">
          <center>aluno</center>
        </div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero minima accusantium
        <div class="nome-aluno">
          Nome do aluno
        </div>
      </div>
    </div>

  </div>
  <div class="depoimento-prev" id="depoimento-prev">PREV</div>
  <div class="depoimento-next" id="depoimento-next">NEXT</div>
</div>

有没有大佬能帮我看看问题出在哪呀？

备注：内容来源于stack exchange，提问作者lucastheiss