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.

Pulchi

What does your console say? – Phenacetin

The console says nothing.. – Pulchi

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(...);

Prajna

Would be nice if you explained your answer, or provide a full code sample at least. – Marcellmarcella

The full code sample is written above, the ellipsis line is just to give a sense of location within the code. – Prajna

I've been searching for so long and this is the only thing that worked for me. Thanks for sharing this! – Dumuzi

Answer 2

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

Shiah

Answer 3

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

Vaden

Answer 4

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.

Gynecology

Answer 5

I found solution

If you want use for example Navigation you need to import module Navigation.

import Swiper from "swiper"
import {Navigation} from 'swiper/modules'

const swiper = new Swiper('.swiper', {
    modules: [Navigation],
    speed: 400,
    autoplay: true,
    navigation: {
        nextEl: '.swiper-button-next-modified',
        prevEl: '.swiper-button-prev-modified'
    }
});
swiper.init()

You can read more about modules for swiper there

Severini

Answer 6

This is in the documentation but the syntax has changed from the above answer. I'm using v10x, (and somehow skipped right over this when reading the docs).

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

// init Swiper:
const swiper = new Swiper('.swiper', {
  // configure Swiper to use modules
  modules: [Navigation, Pagination],
  ...
});

or you can use the bundle

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// import styles bundle
import 'swiper/css/bundle';

// init Swiper:
const swiper = new Swiper(...);

Pomposity

Answer 7

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

Incomprehension

<script src="unpkg.com/swiper@8/swiper-bundle.min.js"></script> <script src="script.js"></script> – Incomprehension

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Hygro