Swiper React | How to create custom navigation/pagination components using React refs?

Question

SwiperJS documentation states that navigation prevEl/nextEl can either be of type "string" or "HTMLElement". Using string selectors is easy enough as:

const MySwiper = (props) => (
  <Swiper
    navigation={{
      prevEl: '.prev',
      nextEl: '.next',
    }}
    {...props}
  >
    <SwiperSlide>slide 1</SwiperSlide>
    <SwiperSlide>slide 2</SwiperSlide>
    <div className="prev" />
    <div className="next" />
  </Swiper>
)

However, how would this be correctly implemented with React refs? Using HTML nodes instead of string selectors allows for navigation prevEl/nextEl to be scoped to each rendered instance of MySwiper.

const App = () => (
  <div>
    <MySwiper className="mySwiper1" />
    <MySwiper className="mySwiper2" />
  </div>
)

In the App example above, navigation prevEl/nextEl from .mySwiper2 should not trigger sliding of .mySwiper1, which is what would happen with string selectors.

My current sad & hacky workaround:

const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const navigationNextRef = React.useRef(null)

  return (
    <Swiper
      navigation={{
        // Both prevEl & nextEl are null at render so this does not work
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
      onSwiper={(swiper) => {
        // Delay execution for the refs to be defined
        setTimeout(() => {
          // Override prevEl & nextEl now that refs are defined
          swiper.params.navigation.prevEl = navigationPrevRef.current
          swiper.params.navigation.nextEl = navigationNextRef.current

          // Re-init navigation
          swiper.navigation.destroy()
          swiper.navigation.init()
          swiper.navigation.update()
        })
      }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}

score 23 · Answer 1 · answered Feb 22 '22 at 17:46

While Pierrat's answer did initially solve it for me, I was encountering a bug where the navigation buttons wouldn't do anything until after I'd paused and restarted the Swiper.

To fix, I created my own functions for handling the updates and used those instead.

const MyComponent = () => {
  const sliderRef = useRef(null);

  const handlePrev = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slidePrev();
  }, []);

  const handleNext = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slideNext();
  }, []);

  return (
    <div>
      <Swiper ref={sliderRef}>
        <SwiperSlide />
        ...slides
        <SwiperSlide />
      </Swiper>
      <div className="prev-arrow" onClick={handlePrev} />
      <div className="next-arrow" onClick={handleNext} />
    </div>
  )
}

i encountered the same bug as you did at pierrat.dev's solution and this solved my problem. thanks. — Ziya Karagöz, Oct 11 '22 at 09:19

score 21 · Answer 2 · answered Sep 18 '21 at 22:11

just watch out for a little mistake with onBeforeInit into sample of Amine D.

corrected code:

const MySwiper = () => {
  const navigationPrevRef = React.useRef(null)
  const navigationNextRef = React.useRef(null)
  return (
    <Swiper
      navigation={{
        prevEl: navigationPrevRef.current,
        nextEl: navigationNextRef.current,
      }}
     onBeforeInit={(swiper) => {
          swiper.params.navigation.prevEl = navigationPrevRef.current;
          swiper.params.navigation.nextEl = navigationNextRef.current;
     }}
    >
      <SwiperSlide>slide 1</SwiperSlide>
      <SwiperSlide>slide 2</SwiperSlide>
      <div ref={navigationPrevRef} />
      <div ref={navigationNextRef} />
    </Swiper>
  )
}

"TS2339: Property 'prevEl' does not exist on type 'boolean | NavigationOptions'. Property 'prevEl' does not exist on type 'false'." — cordial, Dec 21 '22 at 14:34
To solve @cordial 's TS issue: `import {NavigationOptions} from 'swiper/types/modules/navigation'` and use a cast: `const navigation = swiper.params.navigation as NavigationOptions` — Alec, Aug 04 '23 at 10:28

score 17 · Answer 3 · answered Feb 23 '21 at 22:18

I think I fixed the issue, I also faced the same problem, but finally, let's start

 1. import SwiperCore, { Navigation} from 'swiper'
 2. SwiperCore.use([Navigation])
 3. i will use your exmaple:     

    const MySwiper = () => {
      const navigationPrevRef = React.useRef(null)
      const navigationNextRef = React.useRef(null)
      return (
        <Swiper
          navigation={{
            prevEl: navigationPrevRef.current,
            nextEl: navigationNextRef.current,
          }}
         onBeforeInit={{
              swiper.params.navigation.prevEl = navigationPrevRef.current;
              swiper.params.navigation.nextEl = navigationNextRef.current;
         }}
        >
          <SwiperSlide>slide 1</SwiperSlide>
          <SwiperSlide>slide 2</SwiperSlide>
          <div ref={navigationPrevRef} />
          <div ref={navigationNextRef} />
        </Swiper>
      )
    }

that's it, so if you check Swiper duc there is a page only for API, where you can find a section talking about events that swiper provide, anyway i hope this was helpful

thanks for the ```onBeforeInit``` , helped me because swiper was showing prev and next slide buttons but click action was not working — ProblemsEverywhere, Oct 04 '22 at 17:53

score 14 · Answer 4 · answered Oct 19 '22 at 16:48

Important update: Swiper v8.4.4

Most of the answers to this question refer to the API v6, but a later version (which is at the time of writing this answer is v8.4.4) for example doesn't have a swiper.params.navigation.prevEl instead you should access navigation property directly from the swiper instance like so: swiper.navigation.prevEl.

Here's an updated example using React v18 + Swiper v8.4.4 (not recommended)

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

import 'swiper/css';

const Carousel = () => {
  const navigationNextRef = useRef(null);
  const navigationPrevRef = useRef(null);

  return (
    <div>
      <Swiper
        modules={[Navigation]}
        navigation={{
          prevEl: navigationPrevRef.current,
          nextEl: navigationNextRef.current,
        }}
        onBeforeInit={(swiper) => {
          swiper.navigation.nextEl = navigationNextRef.current;
          swiper.navigation.prevEl = navigationPrevRef.current;
        }}
      >
        <SwiperSlide>
          Slide 1
        </SwiperSlide>

        <SwiperSlide>
          Slide 2
        </SwiperSlide>
      </Swiper>
      <div>
        <button ref={navigationNextRef}>Next</button>
        <button ref={navigationPrevRef}>Prev</button>
      </div>
    </div>
  );
};

Reference the swiper and control it from wherever you want!

Even though the example above works, sometimes the references didn't get the right value, so instead of creating two refs for navigation and/or using a setTimeout() to assign the right values, you can reference the swiper itself and control it using slideNext() and slidePrev(), see James Hooper's answer, you can omit the use of useCallback() in the mentioned answer like so:

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

import 'swiper/css';

const Carousel = () => {
  const swiperRef = useRef();

  return (
    <div>
      <Swiper
        modules={[Navigation]}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
      </Swiper>
      <div>
        <button onClick={() => swiperRef.current?.slidePrev()}>Prev</button>
        <button onClick={() => swiperRef.current?.slideNext()}>Next</button>
      </div>
    </div>
  );
};

Typescript:

Here's the same example above using Typscript:

/* eslint-disable import/no-unresolved */

// The rule above to shut ESLint from complaining
// about unresolved Swiper's CSS imports
// Why? see: https://github.com/import-js/eslint-plugin-import/issues/2266


import { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Swiper as SwiperType, Navigation } from 'swiper';

import 'swiper/css';

const Carousel = () => {
  const swiperRef = useRef<SwiperType>();

  return (
    <div>
      <Swiper
        modules={[Navigation]}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
      </Swiper>
      <div>
        <button onClick={() => swiperRef.current?.slidePrev()}>Prev</button>
        <button onClick={() => swiperRef.current?.slideNext()}>Next</button>
      </div>
    </div>
  );
};

Thank you for this. I was wondering if there is a way to get the swiper instance at the root component like this. In the docs I can only find the `useSwiper()` so far. — Guinevere, Dec 28 '22 at 08:14
@Guinevere You can create the ref in the root component and pass it down, or alternatively you can use `Forwarding Refs`. https://reactjs.org/docs/forwarding-refs.html — Yassine Sedrani, Dec 28 '22 at 11:26

score 6 · Answer 5 · answered Oct 13 '20 at 08:12

6

Passing refs directly is apparently not possible in Swiper v6.2.0.

I created a Github issue as well for anyone ending up here where the library author answered. https://github.com/nolimits4web/swiper/issues/3855

answered Oct 13 '20 at 08:12

maeertin

421
1
4
6

Robin Hossain · Answer 6 · 2021-09-14T09:43:50.687

As per the previous answers, the following one is the complete code. That may help you to implement as you want.

import React from "react";
import SwiperCore, { Navigation } from 'swiper';
import { Swiper, SwiperSlide } from "swiper/react";

SwiperCore.use([Navigation]);

const MySwiper = () => {
      const navigationPrevRef = React.useRef(null)
      const navigationNextRef = React.useRef(null)
      return (
        <Swiper
          navigation={{
            prevEl: navigationPrevRef.current,
            nextEl: navigationNextRef.current,
          }}
         setTimeout(() => {
          // Override prevEl & nextEl now that refs are defined
          swiper.params.navigation.prevEl = navigationPrevRef.current
          swiper.params.navigation.nextEl = navigationNextRef.current

          // Re-init navigation
          swiper.navigation.destroy()
          swiper.navigation.init()
          swiper.navigation.update()
        })
        >
          <SwiperSlide>slide 1</SwiperSlide>
          <SwiperSlide>slide 2</SwiperSlide>
          <div ref={navigationPrevRef} />
          <div ref={navigationNextRef} />
        </Swiper>
      )
    }

const App = () => (
  <div>
    <MySwiper className="mySwiper1" />
    <MySwiper className="mySwiper2" />
  </div>
)

ReactDOM.render(<App/>, document.getElementById('root'));

score 3 · Answer 7 · edited Dec 11 '22 at 14:32

2022 Solution source

Here is latest version solution for adding custom pagination or navigation

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

And:

<Swiper
    modules={[Pagination]}
    pagination={{
        el: '.custom-pagination',
        clickable: true
    }}
    navigation={{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }}
>

And you can put your element anywhere you want with any styles!

<div className="custom-pagination"></div>

maybe you want to add ```

``` elements to your answer. Thanks. — Abdulkadir KG, Feb 28 '23 at 06:35

score 1 · Answer 8 · answered Sep 19 '22 at 14:25

Works in this way:

  const prevRef = useRef(null);
  const nextRef = useRef(null);
  return (
    <Swiper
      onInit={(swiper) => {
        swiper.params.navigation.prevEl = prevRef.current;
        swiper.params.navigation.nextEl = nextRef.current;
        swiper.navigation.init();
        swiper.navigation.update();
      }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <div ref={prevRef}>Prev</div>
      <div ref={nextRef}>Next</div>
    </Swiper>
  );

score 1 · Answer 9 · answered Oct 07 '22 at 13:41

Here is the best solution

 import React, { useRef } from "react";
 // For Typescript 
 // import SwiperCore from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";


 const SliderComponent = () => {
 const swiperRef = useRef();

// For Typescript!
// const swiperRef = useRef<SwiperCore>();  


const sliderSettings = {
  440: {
    slidesPerView: 1,
    spaceBetween: 30,
  },
  680: {
    slidesPerView: 2,
    spaceBetween: 30,
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 30,
  },
};

return (
    <div>
      <button onClick={() => swiperRef.current?.slidePrev()}>Prev</button>

      <Swiper
        slidesPerView={3}
        breakpoints={sliderSettings}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
        }}
      >
        <SwiperSlide>
          Slide 1
        </SwiperSlide>
        <SwiperSlide>
          Slide 2
        </SwiperSlide>
        <SwiperSlide>
          Slide 3
        </SwiperSlide>
        <SwiperSlide>
          Slide 4
        </SwiperSlide>
        <SwiperSlide>
          Slide 5
        </SwiperSlide>
      </Swiper>

      <button onClick={() => swiperRef.current?.slideNext()}>Next</button>
    </div>
  );
};

export default SliderComponent;

score 1 · Answer 10 · answered Dec 13 '22 at 10:25

This code is from an answer from the creator of the library and it's what has worked for me.

  const prevRef = useRef(null);
  const nextRef = useRef(null);

  return (
    <Swiper
      onInit={(swiper) => {
        swiper.params.navigation.prevEl = prevRef.current;
        swiper.params.navigation.nextEl = nextRef.current;
        swiper.navigation.init();
        swiper.navigation.update();
      }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <div ref={prevRef}>Prev</div>
      <div ref={nextRef}>Next</div>
    </Swiper>
  );

score 0 · Answer 11 · answered Jun 25 '22 at 06:43

0

Use id instead of class

 `navigation={{
     prevEl: "#prev_slide",
     nextEl: "#next_slide",
  }}`

answered Jun 25 '22 at 06:43

Mahadi Hasan

19
2

score 0 · Answer 12 · answered Oct 20 '22 at 10:43

0

For react / ts

navigation={true}
onNavigationNext={(swiper: any) => (navEvent(swiper, "N"))}
onNavigationPrev={(swiper: any) => (navEvent(swiper, "P"))}

answered Oct 20 '22 at 10:43

Rifat Islam

51
1
3

score 0 · Answer 13 · answered Apr 26 '23 at 12:23

For those who none of these solutions worked for your case (like me): Just use React Refs, but keep in mind that React refs are null on the first render. So you need to trigger a re-render during the swiper initialization, and all will work as expected:

 //Add a state that will trigger a re-render later
 const [_, setInit] = useState(false)

 const prevRef = useRef(null);
  const nextRef = useRef(null);
  return (
    <Swiper
       //assign the refs to the swiper navigation buttons
        navigation={{
          prevEl: prevRef.current,
          nextEl: nextRef.current,
        }}
        //trigger a re-render by updating the state on swiper initialization
        onInit={() => setInit(true)}    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <div ref={prevRef}>Prev</div>
      <div ref={nextRef}>Next</div>
    </Swiper>
  );

score 0 · Answer 14 · answered Aug 04 '23 at 16:04

We had a similar issue in Vue where this code wasn't working:

<swiper-container
  navigation-prev-el=".button-prev"
  navigation-next-el=".button-next"
>
  <!-- content -->
</swiper-container>

<button class="button-prev" />
<button class="button-next" />

It wasn't working because when the <swiper-container> is rendered, the buttons still haven't been rendered, because they're later in the DOM.

The solution was simple: move the buttons higher up the DOM so they exist by the time the <swiper-container> is rendered:

<button class="button-prev" />
<button class="button-next" />

<swiper-container
  navigation-prev-el=".button-prev"
  navigation-next-el=".button-next"
>
  <!-- content -->
</swiper-container>