如何在我的图像 slider 上添加文本并使每个图像都不同？

Question

Banner.component.jsx

import "./banner.styles.scss";
import ImgComp from "./banner.image";
import i1 from "../../assets/banner-pics/1.jpeg";
import i2 from "../../assets/banner-pics/2.jpeg";

function Banner() {
  let bannerArr = [<ImgComp src={i1} />, <ImgComp src={i2} />];
  const [x, setX] = useState(0);
  const goLeft = () => {
    x === 0 ? setX(-100 * (bannerArr.length - 1)) : setX(x + 100);
  };
  const goRight = () => {
    x === -100 * (bannerArr.length - 1) ? setX(0) : setX(x - 100);
  };

  return (
    <div className="banner">
      {bannerArr.map((item, index) => {
        return (
          <div
            key={index}
            className="slide"
            style={{ transform: `translateX(${x}%)` }}
          >
            {item}
          </div>
        );
      })}
      <button id="goLeft" onClick={goLeft}>
        <i class="fas fa-chevron-left"></i>
      </button>
      <button id="goRight" onClick={goRight}>
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  );
}

export default Banner;

Banner.styles.scss

.banner {
  position: relative;
  width: 100%;
  height: 800px;
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  i {
    font-size: 2vw;
  }
}

.slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  transition: 0.5s;
  overflow: hidden;
}

%btn-styles {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  transition: 0.5s;

  &:hover {
    background: rgba(0, 0, 0, 0.356);
    cursor: pointer;
    i {
      color: whitesmoke;
    }
  }
}

#goLeft {
  left: 0;
  @extend %btn-styles;
}

#goRight {
  right: 0;
  @extend %btn-styles;
}

I am trying to add text over the top of this slider and for it to be different writing on each image, how would I go about putting a different text overlay on each image? I just want to put a paragraph with a button on the first image and just text on the second image.

Answer 1

You can add the texts on array and you can add some styles.

import "./banner.styles.scss";
import ImgComp from "./banner.image";
import i1 from "../../assets/banner-pics/1.jpeg";
import i2 from "../../assets/banner-pics/2.jpeg";

function Banner() {
  let bannerArr = [
     <div className="Item"><ImgComp src={i1} /><p className="custom-text">Text1</p></div>, 
     <div className="Item"><ImgComp src={i1} /><p className="custom-text">Text2</p></div>
  ];
  const [x, setX] = useState(0);
  const goLeft = () => {
    x === 0 ? setX(-100 * (bannerArr.length - 1)) : setX(x + 100);
  };
  const goRight = () => {
    x === -100 * (bannerArr.length - 1) ? setX(0) : setX(x - 100);
  };

  return (
    <div className="banner">
      {bannerArr.map((item, index) => {
        return (
          <div
            key={index}
            className="slide"
            style={{ transform: `translateX(${x}%)` }}
          >
            {item}
          </div>
        );
      })}
      <button id="goLeft" onClick={goLeft}>
        <i class="fas fa-chevron-left"></i>
      </button>
      <button id="goRight" onClick={goRight}>
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
  );
}

export default Banner;

on global style

.item{
   position: relative;
   .custom-text{
     position: abolute;
     bottom: 15px;
   }
}