Navigation arrows are not showing

Question

I've been trying to use Swiper js, it went well until I needed to use it 2 more times at different parts of the code, the problem is: the navigation arrows simply don't appear in the page and I can't find out what I've been doing wrong. There is a total of 3 times I've used swiper in the page, only the first went right.

This is the code that is not working (I haven't written any CSS to them and the JS code is inside the DOMContentLoaded event listener)

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,
    },
  },
});

<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>

Answer 1

You just need to add swiper-button-prev and swiper-button-next class in button to display the navigation arrows and you are good to go.

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