How to place text over sliding images-CodePudding

Whenever I run this code on the HTML page, it shows the box with the text on the first sliding image for a brief second, then it disappears for some reason. Here is the HTML for the sliding images.

.containerSlider {
  position: relative;
}

.text-block {
  position: absolute;
  bottom: 100px;
  right: 150px;
  background-color: black;
  color: white;
}

<section>
  <div id="containerSlider">
    <div id="slidingImage">
      <img src="https://via.placeholder.com/100" alt="image4">
      <div >
        <p>This is a text to see if this works</p>
      </div>
    </div>

    <div id="slidingImage">
      <img src="https://via.placeholder.com/100/ffcccc" alt="image1">
      <div >
        <p>This is a text to see if this works</p>
      </div>
    </div>

    <div id="slidingImage">
      <img src="https://via.placeholder.com/100" alt="image2">
      <div >
        <p>This is a text to see if this works</p>
      </div>
    </div>

    <div id="slidingImage">
      <img src="https://via.placeholder.com/100/ffcccc" alt="image3">
      <div >
        <p>This is a text to see if this works</p>
      </div>
    </div>
  </div>
</section>

and the Javascript for the Slider is

<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js”></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
    $(document).ready(function () {
        $('#containerSlider').slick({
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
        });
    });
</script>

CodePudding user response：

You have to add position:relative to the div you want your text to be placed in. In your case, .containerSlider contains the complete slider but we want to target individual slides which in this case are .slidingImage.

So, after updating your CSS to something like the code below, I believe I got what you wanted.

#slidingImage {
  position: relative;
  width: fit-content;
}

p {
  position: absolute;
  bottom: 10%;
  background-color: black;
  color: white;
}

  <section>
      <div id="containerSlider">
        <div id="slidingImage">
          <img src="https://via.placeholder.com/100" alt="image4" />
          <div >
            <p>This is a text to see if this works</p>
          </div>
        </div>

        <div id="slidingImage">
          <img src="https://via.placeholder.com/100/ffcccc" alt="image1" />
          <div >
            <p>This is a text to see if this works</p>
          </div>
        </div>

        <div id="slidingImage">
          <img src="https://via.placeholder.com/100" alt="image2" />
          <div >
            <p>This is a text to see if this works</p>
          </div>
        </div>

        <div id="slidingImage">
          <img src="https://via.placeholder.com/100/ffcccc" alt="image3" />
          <div >
            <p>This is a text to see if this works</p>
          </div>
        </div>
      </div>
    </section>

CodePudding user response：

.slidingImage {
  height: 100px;
  width: 100px;
  color: white;
  overflow-wrap: break-word;
  display: flex;
  justify-content:center;
  align-items:center
  background-repeat: no-repeat;
  margin-bottom: 10px
}

<div  style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>
<div  style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>
<div  style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>
<div  style="background-image: url(https://via.placeholder.com/100)">
    <p>This is a text to see if this works</p>
</div>

here