Use methods with Swiper Element in React

[zewas-digital]

Hi there,

I am using swiper 10.4 and since its suggested to switch from swiper/react to swiper/elements, I wanted to ask how I use methods like slidePrev() or slideNext() with this combination.

Before I used useSwiper from swiper/react like:

  const SwiperButtonPrev = () => {
        const swiper = useSwiper();
        return <ArrowLeft onClick={() => swiper.slidePrev()} src="/images/arrowRight.svg" width="40px" height="40px" />;
    };

My Question:
How do I replace the above code so that I can use methods like .slideNext() with Swiper Element

My Code:

import { register } from "swiper/element/bundle";
import { A11y, Navigation } from "swiper";

const Grid = ({ blok }) => {
    const swiperGridRef = useRef(null);

    useEffect(() => {
        register();
        const params = {
            navigation: false,
            slidesPerView: 1,
            modules: [Navigation, A11y],
        };
        Object.assign(swiperGridRef.current, params);
        swiperGridRef.current.initialize();
    }, []);

    const SwiperButtonPrev = () => {
        const swiper = useSwiper();
        return <ArrowLeft onClick={() => swiper.slidePrev()} src="/images/arrowRight.svg" width="40px" height="40px" />;
    };

    const SwiperButtonNext = () => {
        const swiper = useSwiper();
        return <ArrowRight onClick={() => swiper.slideNext()} src="/images/arrowRight.svg" width="40px" height="40px" />;
    };
    return (
        <>
            <Wrapper columns={blok.numberOfColumns || "4"} height={blok.rowHeight}>
                {blok.content?.map((blok) => (
                    <StoryblokComponent blok={blok} key={blok._uid} />
                ))}
            </Wrapper>
            <SlideWrapper>
                <swiper-container init="false" className="mySwiper">
                    <SwiperButtonPrev />
                    <SwiperButtonNext />
                    {blok.content?.map((blok) => (
                        <swiper-slide key={blok._uid}>
                            <StoryblokComponent blok={blok} />
                        </swiper-slide>
                    ))}
                </swiper-container>
            </SlideWrapper>
        </>
    );
};

Maybe it is a simple answer and I’m just stupid.

Thanks in advance for any help.

[nolimits4web]

Swiper instance is available as swiper prop of swiper-container HTML element https://swiperjs.com/element#access-to-swiper-instance