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}
navigation
>
{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>
);
};
This is my code and picture of UI I want to build. I use Swiper and I have two custom navigation buttons outside Swiper container. How can I use those custom navigation buttons to navigate slide?
