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=".0.5/swiper-bundle.min.js"></script>
<link rel="stylesheet" href=".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>

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/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare/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>

• javascript
• html
• swiper.js

Share Improve this question Follow edited Feb 3 at 7:19 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Feb 3 at 4:11 lucastheisslucastheiss 311 bronze badge 1

• I suggest you to delete the irrelevant parameters in the testing. – John Shang Commented Feb 3 at 8:12

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

Swiper.js is working really bad lately but as others said you should

add swiper-button-prev and swiper-button-next class in button to display the navigation arrows

but this might not work so inspect the swiper and find the arrows see you can change the position or size of buttons to put it where you want.

you can use keen slider too it's better and have less errors.

What was going wrong was: First the buttons didn't have the class swiper-button-next/prev in them, I thought the js would automatically put the corret styling.

Then when I modified the classes to the way they should be, the arrows were in a completely random position, not related to the swiper container, then I just needed to add position: relative to the swiper parent container. Then everything went fine. Thanks for the answers!