How to use navigation button outside swiper container to navigate slide

[nhinbm]

I have UI like this. And this is my code

const Inspiration: React.FC = () => { return ( <div> <div className="section-header"> <h3 className="section-title">Inspiration</h3> <img src="images/wave.svg" className="wave" alt="wave" /> <div className="slick-arrows-top"> <button type="button" data-role="none" className="carousel-topNav-prev slick-custom-buttons" aria-label="Previous" > <i className="icon-arrow-left"></i> </button> <button type="button" data-role="none" className="carousel-topNav-next slick-custom-buttons" aria-label="Next" > <i className="icon-arrow-right"></i> </button> </div> </div> <div className="row post-carousel-twoCol post-carousel"> <Swiper slidesPerView={2} spaceBetween={20} loop={true} slidesPerGroup={1} > {EDITOR_POST && EDITOR_POST.map(item => ( <SwiperSlide key={item.key}> <InspirationPost key={item.key} pathCategory={item.pathCategory} title={item.title} pathPost={item.pathPost} pathImage={item.pathImage} date={item.date} ></InspirationPost> </SwiperSlide> ))} </Swiper> </div> </div> ); };

How can I use two navigation button outside swiper to navigate slide.

[nsonidotdev]

For everyone facing same issue you can get Swiper instance with useRef. Pass onSwiper prop to the Swiper component. This event runs when swiper initializes itself and then you can call functions to control swiper programmatically.

import { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperType } from "swiper/types";

const dummyItems = [
    {
        key: 1,
        slide: <div>content 1</div>
    },
    {
        key: 2,
        slide: <div>content 2</div>
    },
    {
        key: 3,
        slide: <div>content 3</div>
    },
];

const Inspiration: React.FC = () => {
    const swiperRef = useRef<SwiperType>();

    return (
        <div>

            <div className="section-header">

                <h3 className="section-title">Inspiration</h3>
                <img src="images/wave.svg" className="wave" alt="wave" />
                <div className="slick-arrows-top">

                    <button
                        onClick={() => {
                            swiperRef.current?.slidePrev()
                        }}
                        type="button"
                        data-role="none"
                        className="carousel-topNav-prev slick-custom-buttons"
                        aria-label="Previous"
                    >
                        <i className="icon-arrow-left"></i>
                    </button>
                    <button
                        onClick={() => {
                            swiperRef.current?.slideNext()
                        }}
                        type="button"
                        data-role="none"
                        className="carousel-topNav-next slick-custom-buttons"
                        aria-label="Next"
                    >
                        <i className="icon-arrow-right"></i>
                    </button>
                </div>
            </div>
            <div className="row post-carousel-twoCol post-carousel">

                <Swiper
                    onSwiper={(swiper) => {
                        swiperRef.current = swiper;
                    }}
                    slidesPerView={2}
                    spaceBetween={20}
                    loop={true}
                    slidesPerGroup={1}
                >

                    {dummyItems &&
                        dummyItems.map((item) => (
                            <SwiperSlide key={item.key}>
                                {item.slide}
                            </SwiperSlide>
                        ))}
                </Swiper>
            </div>
        </div>
    );
};