0

Есть слайдер 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>
6
  • а для чего вам блок className={styles.wrapperTitle} внутри компонента Swiper?
    – qwerty
    Commented 7 окт. 2022 в 13:29
  • У react swiper, ширина,длина 100% от внутреннего контента. А так как у самого swiper стиль overfllov: hidden, я не могу за его предели swiper разместить текст или кнопки навигации. А если точнее позиционировать элементи внутри swiper, но за его пределы
    – Alexsander
    Commented 7 окт. 2022 в 13:40
  • ну кнопки навигации элементарно стилями ставятся на любое место. А на счет текста все равно не понял . Тест будет относится к каждому слайду ? или для всего слайдера? если для всего слайдера вынесите его перед самим свайпером
    – qwerty
    Commented 7 окт. 2022 в 13:42
  • Вы меня не правильно поняли. Я это делаю из-за кнопок навигации. Они находятся внутри swiper как html, но стилями они должны быть за пределами swiper, а у swiper overflove: hidden. Я добавил изображение для более понятной полноты проблемы
    – Alexsander
    Commented 7 окт. 2022 в 13:53
  • убираете все из свайпера. Делаете просто 2 компанента ButtonNext ButonPrev. На них вешаете событие onClick и там переключаете слайды. stackoverflow.com/a/73984522/11334182
    – qwerty
    Commented 7 окт. 2022 в 14:03

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.