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

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]);