Swiper React custom navigation components

This is a:

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: swiper@6.0.1.

• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY (IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP).

What you did

I set navigation property <Swiper navigation={{ navigation: { nextEl: (<div className='next'></div>), prevEl: (<div className='next'></div>) }}> ... </Swiper>

Expected Behavior

I want to see my own navigation buttons

Actual Behavior

The navigation isn’t there, nither the original. It’s like “navigation: false”.

Thanks in advance

[nolimits4web]

As to documentation nextEl and prevEl receive HTMLElement or string with CSS selector, so it should be:

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

[lucaskahl]

@awt0523 If you check the Typescript interface from navigation, it can receives an object with nextEl and prevEl and both can receive a CSSSelector or HTMLElement and yeah, for some reason they aren’t showing.

@MacGyver98 To get around this, I ended up creating a useRef in the swipe to access the slideNext and slidePrev methods, here’s an example.

import React, { useCallback, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper';

function Swiper() {
  const swiperRef = useRef(null);
  SwiperCore.use([Autoplay]); // don't need navigation anymore

  const prevSlide = useCallback(() => {
    swiperRef.current?.swiper.slidePrev();
  }, [swiperRef]);

  const nextSlide = useCallback(() => {
    swiperRef.current?.swiper.slideNext();
  }, [swiperRef]);

  return (
    <>
      <div className="left-floating-el" onClick={prevSlide}>
        an floating element
      </div>
      <Swiper
        ref={swiperRef}
        spaceBetween={30}
        slidesPerView={5}
        autoplay={{ delay: 5000 }}
        loop
      >
        <SwiperSlide>slide 1</SwiperSlide>
        <SwiperSlide>slide 2</SwiperSlide>
      </Swiper>
      <div className="right-floating-el" onClick={nextSlide}>
        an floating element
      </div>
    </>
  );
}