How to create custom navigation buttons for swiper in react?

[hosseinfallah72]

Swiper react has a documentation in witch it is not explained how to add custom navigation buttons.

I tried this and it didn't work

I'm using swiper 8.0.5

<Swiper
                modules={[Navigation, Pagination, Scrollbar, A11y]}
                spaceBetween={50}
                slidesPerView={1}
                onSlideChange={() => console.log('slide change')}
                onSwiper={(swiper) => console.log(swiper)}
                navigation={{
                    prevEl: '.prev',
                    nextEl: '.next',
                }}
                pagination={{ clickable: true }}
            >
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/1.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/2.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/3.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/4.jpg" /></SwiperSlide>
                <SwiperSlide><img className="m-auto" src="/Images/Swiper/5.jpg" /></SwiperSlide>
            </Swiper>
        </div>

[Arhell]

https://swiperjs.com/react#usage

https://swiperjs.com/swiper-api#using-js-modules