How to posititon text in a slick slider and ensure it does not move around-CodePudding

I'm currently trying to overlay text over the image in my slick slider, however even though I have overlaid the text when I resize the window the text seems to move around in the image. How do I fix this? Is there a different way to overlay text over an image in an image carousel? please do advise, my code pen is also linked below

This is my codepen https://codepen.io/rahil8533/pen/OJzpzxo HTML code

<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
  </head>
<body>

  <section >
    <div>
      <img src="https://s26.postimg.cc/7ayxq3q5l/cg5.jpg">
     <div >
        <h2>Covid 19 measures on campus</h2>
      </div>
    </div>
    <div>
      <img src="https://s26.postimg.cc/zccz3svft/cg6.jpg">
      <div >
        <h2>2Covid 19 measures on campus</h2>
      </div>
    </div>
    <div>
      <img src="https://s26.postimg.cc/7g2ozrxgp/cg4.jpg">
      <div >
        <h2>3Covid 19 measures on campus</h2>
      </div>
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
            autoplay: true,
        arrows: false
      });
    });
  </script>
</body>
</html>

CSS code

 html, body {
      margin: 0;
      padding: 0;
    }

    .slider {
        width: 50%;
        margin: 0px auto;
    }

    .slick-slide {
      position: relative;
      margin: 0px 0px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
    
.slick-dots li button:before {
    font-size: 10px; !important
}

    .slick-prev,
    .slick-next {
    left: 0;
    right: 0;
    }
.content{
  position: absolute;
    width: 100%;
    height: 100%;
    top: 5px;
    left: 0;
    line-height: 100vh;
    text-align: center;
    z-index: 99;
}```

CodePudding user response：

Change the content in the CSS to :

.content {
    position: relative;
    width: 100%;
    height: 100%;
    top: -65px;
    left: 5;
    text-align: center;
    z-index: 99;
    margin-bottom:-65px
}

The relative position will change position on resize accordingly. The margin-bottom makes sure the dots are also in place.

CodePudding user response：

The issue is that the height of your h2 textbox follows the height of the window. Add the setting adaptiveHeight: false to your slick code as well as the following css and js updates.

You must update your h2 and .content with the following css styles:

  .content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    line-height: 1;
    z-index: 99;
  }

  h2 {
    position: relative;
    display: flex;
    text-align: center;
    align-items: center;
    margin: 0;
    justify-content: center;
  }

Update your JavaScript to the following:

      <script type="text/javascript">
        $(document).on('ready', function() {
          $(".regular").slick({
            dots: true,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            arrows: false,
            adaptiveHeight: false
          }).on("setPosition", function (event, slick) {
             $(".content > h2").css("height", slick.$slides.height()   "px");
          });
        });
      </script>

The codepen can be found here.