Есть слайдер swiper(react). Мне нужно чтобы div с классом wrapperTitle был перед компонентом swiperSlide, чтобы в html разметке сперва был div с классом wrapperTitle, а потом сам элемент с изображениями(swiper-wrapper), где находиться коллекция изображений. На скриншоте wrapperTitle находится в конце, мне нужно чтобы он был перед swiper-wrapper. Я не сильно еще разобрался с react-swiper, по-этому прошу помощи.
<div className={styles.wrapperCard}>
<Swiper
slidesPerView={4}
spaceBetween={30}
simulateTouch={false}
loop
modules={[Navigation]}
navigation={{
clickable: true,
}}
className={styles.swiper}>
<div className={styles.wrapperTitle}>
<h2 className={styles.title}>Our you have to buy</h2>
<h1 className={styles.title}>Product</h1>
</div>
{cards.map((card) => (
<SwiperSlide key={card.id} className={styles.swiperSlide}>
<Card
id={card.id}
img={card.img}
title={card.title}
price={card.price}
isAdd={(object) => objectCard(object)}
/>
</SwiperSlide>
))}
</Swiper>
</div>
className={styles.wrapperTitle}
внутри компонентаSwiper
?ButtonNext
ButonPrev
. На них вешаете событие onClick и там переключаете слайды. stackoverflow.com/a/73984522/11334182