CODEWITHSUNDEEP
javascriptswiper.js
philippblack
philippblack

Reputation: 249

JavaScript Swiper Native Navigation Function is not working

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.

Upvotes: 24

Views: 50550

Answers (7)

bobrov_site
bobrov_site

Reputation: 97

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

Upvotes: 4

PattyOK
PattyOK

Reputation: 991

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

Upvotes: 1

Hasanoor Zaman
Hasanoor Zaman

Reputation: 1

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

Upvotes: -2

Fred K
Fred K

Reputation: 13910

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

Upvotes: 17

Rich
Rich

Reputation: 4248

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.

Upvotes: 16

ecairol
ecairol

Reputation: 6553

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

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

const swiper = new Swiper(...);

Upvotes: 41

Tonio
Tonio

Reputation: 5004

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

Upvotes: 16

Related Questions