CODEWITHSUNDEEP
reactjsswiper.js
TCS
TCS

Reputation: 809

React Swiper Navigation not working how to work it?

Working on Swiper react component. But navigation or anything others are not working.

https://swiperjs.com/react

        <Swiper
          // install Swiper modules
          modules={[Navigation, Pagination, Scrollbar, A11y]}
          spaceBetween={50}
          slidesPerView={1}
          navigation={true}
          pagination={{ clickable: true }}
          className="mySwiper"
        >
        {banners.map((item, i) => (
          <SwiperSlide>
            <div className="slider-single">
              blabla
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

Here's my code above. Navigation arrows are appering. But when I click on them, It doesnt move to next slide. (It moves to next when I drag it)

Upvotes: 5

Views: 21971

Answers (6)

Arian Nargesi
Arian Nargesi

Reputation: 561

2023 Answer
You have to import Navigation module from swiper/modules

Import:

// other import statements 
import { Navigation } from 'swiper/modules'
import 'swiper/css/navigation'

Render

<Swiper
    navigation
    modules={[Navigation]}
    // rest of your props 
/>

Upvotes: 0

Lab
Lab

Reputation: 49

I will like to answer a few questions in the mind of some people.

By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first.

The extract above is from the official documentation https://swiperjs.com/react. However, the last part says 'you have to install them first', this is not asking you to do npm install of anything again.

All that is required are 2.

  1. import SwiperCore and any other module you want to use from "swiper" or "swiper/modules"

// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

  1. Install or register the imported modules as demonstrated in code snippet below

// Install Swiper modules
SwiperCore.use([Navigation, Pagination]);

Upvotes: 2

Saint
Saint

Reputation: 31

You need to import the bundled css file.

import "swiper/swiper-bundle.css";

Upvotes: 0

npm-i-Abhay
npm-i-Abhay

Reputation: 39

super simple

in your component

 <Swiper
  // install Swiper modules
  modules={[Navigation, Pagination, Scrollbar, A11y]}
  ...
  **navigation ={true}**
 ... other configs
>

Or you could instantiate a custom Build like so:

// Import Swiper and modules

import Swiper, { Navigation, Pagination, Scrollbar } from 'swiper';

const swiper = new Swiper('.swiper', {
  // Install modules
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // ...
});

Upvotes: 0

Trung Cao Tiến
Trung Cao Tiến

Reputation: 11

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

As Ezra Siton said, i think the problem is import styles commands missing.

Upvotes: 1

Ezra Siton
Ezra Siton

Reputation: 7781

Hard to answer your Q (Without full code example).

Did you install Navigation module (Y/N)?

The best idea is to compare your code to this official demo:

Swiper Navigation demo - codesandbox: https://codesandbox.io/s/13eu6

From the docs:

By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first.

// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

Upvotes: 5

Related Questions