JavaScript Swiper Native Navigation Function is not working

Question

I´m using swiper to make a slider on my website. Unfortunately the navigation isn´t working in Chrome.. The buttons appear but don´t do anything.

This is my code:

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
      <div class="swiper-slide">
      </div>
    </div>

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



  <script src="js/swiper/swiper.min.js"></script>

  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView: 3,
      spaceBetween: 5,
      loop: true,
      centeredSlides: true,
    });
  </script>

I hope someone can help me, since I could not find any information relating this topic.

Answer 1

I had exactly the same issue and could not understand.

This question helped me understand that the problem was there until the windows was resized.

Adding:

observer: true, 
observeParents: true

To the Swiper config solved the problem for me