Как заставить текст на React Bootstrap 4 Карусель оставаться, пока движутся картинки? - PullRequest
Новая
       51

Как заставить текст на React Bootstrap 4 Карусель оставаться, пока движутся картинки?

0 голосов
/ 03 мая 2020

По сути, это тот же вопрос, что и , этот , но для компонента React Bootstrap Карусель .

Итак, у меня есть работающая карусель, но я хочу, чтобы поверх нее был текст, который не перемещается при изменении изображений.

Это мой рабочий Carousel фрагмент кода - как вы можете видеть, я добавил свой оверлейный текст внизу l oop. Он остается на вершине, как я хочу, но он также добавляет дополнительный пустой элемент карусели, который я не хочу. (Я пытался сделать эту работу в js -fiddle и codesandbox.io, но я недостаточно умен ...) 

import React from "react";
import Carousel from "react-bootstrap/Carousel";
import "./styles.css";

export default function App() {
  let carouselImgs = [
    {
      title: "Test1",
      img: "https://images.app.goo.gl/FrGs95rzsNfc6YkW8"
    },
    {
      title: "Test2",
      img: "https://images.app.goo.gl/tPkFSMH796PmV3pq9"
    }
  ];
  return (
    <Carousel className="App" interval={3000}>
      {carouselImgs.map(carouselImg => (
        <Carousel.Item
          key={carouselImg.title}
          className="oneness-container mb-2"
        >
          <img src={carouselImg.img} className="img-fluid rounded-lg" alt="" />
          <Carousel.Caption>
            <div className="bottom-center">
              <h3 className="rounded px-2 py-1 d-inline">
                {carouselImg.title}
              </h3>
            </div>
          </Carousel.Caption>
        </Carousel.Item>
      ))}
      {<h1 className="overlay">Overlay title</h1>}
    </Carousel>
  );
}

CSS из .overlay: 

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
}

Мне нравится комментарий к , который отвечает - что говорит об этом: 

<div id="carousel" class="carousel slide">
     <!-- Wrapper for slides -->
        <div class="carousel-inner" >
                  <!-- items -->
        </div>
</div>

... поместите [div оверлея] внутри carousel-inner, но все еще в div, отдельном от ваших div'ов "item" ...

Но, к сожалению, я не знаю, как попасть внутрь carousel-inner, так как компонент React Bootstrap не ' так не показывай.

...