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

Try importing Navigation from the Swiper lib. And then Swiper.use()

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

const swiper = new Swiper(...);

Answer 2

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

Answer 3

I had this problem while working with Next.JS , React . I spent almost a day figuring out what is wrong. Until I found that I should import the library using SwiperCore . The documentation is kinda straight forward to it.

import SwiperCore, { Navigation } from 'swiper';
SwiperCore.use([Navigation]);

So basically, there's no fancy in here, it is just the library splice its code into smaller pieces so the things that you only really need will be include to your bundled. (Though tree-shaking is already a thing now).

So I added this to my _app.tsx , and the native function will be included to all the swiper using a navigation.

Answer 4

As said in documentation

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

Answer 5

if you are writing java Script in different file like script.js and adding it to the main html,..and then you are using you are using swiper cdn, you have to add the cdn before custom js file....