Search code examples
csssliderdisplayslick.jsoverlap

Slick Slider covers up elements below

My slick slider images are covering up the elements that are supposed to sit below, and I'm not sure why. I need #features to sit below #slideshow, but right now it's covered up. I'm not sure what's making the slider overlap the elements below it on the page. I don't want to just "push" the #features div down with CSS, like by using bottom: -50px or whatever because I'm aiming for responsive design. I need the slideshow slider and slides to take up the same amount of height that the images do. Hopefully this makes sense! Here's my code:

HTML:

<div id="slideshow">
    <div class="slide"><img src="images/Need Space.jpg"></div>
    <div class="slide"><img src="images/Open Lot.jpg"></div>
    <div class="slide"><img src="images/IMG_0713a.jpg"></div>
    <div class="slide"><img src="images/IMG_0714a.jpg"></div>
</div>
<div id="features" class="flex">
    <div>Safe</div>
    <div>Secure</div>
    <div>24-Hour Access</div>
</div>
<div id="description">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS:

    /* SLIDESHOW */
#slideshow {
  width: 100%;
  height: 50vh;
  margin-bottom: 5vh;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
}

.slick-initialized .slick-track {
    display: flex;
    align-items: center;
}

/* FEATURES */
#features div {
  margin: 5vw;
  padding-bottom: .5vh;
  font-weight: bolder;
  font-size: 2.5vh;
  letter-spacing: .25vw;
  border-bottom: 1px solid white;
}
Solution

  • I have found 2 issues -

    1. Instead of height: 50vh, use height: 50%. (Reference line- 19). This will solve your problem.
    2. Wrap all slide pictures with a parent div. Let name it - class='slick' (reference line- 53). This .slick class will Iterate it's all pictures. If your slider operates perfectly, you don't have to do this part.

    I have attached the code below-

    <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Tutorial</title>
    
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <style>
          /* SLIDESHOW */
        #slideshow {
          width: 100%;
          height: 50%;
          margin-bottom: 5vh;
        }

        .slide {
          width: 100%;
          height: 100%;
        }

        .slide img {
          width: 100%;
        }

        .slick-initialized .slick-track {
            display: flex;
            align-items: center;
        }

        /* FEATURES */
        
        #features div {
          margin: 5vw;
          padding-bottom: .5vh;
          font-weight: bolder;
          font-size: 2.5vh;
          letter-spacing: .25vw;
          border-bottom: 1px solid white;
          
        }
  </style>
 </head>
 <body>
   
    <div id="slideshow">
      <div class="slick">
        <div class="slide"><img src="https://dummyimage.com/vga"></div>
        <div class="slide"><img src="https://dummyimage.com/vga"></div>
        <div class="slide"><img src="https://dummyimage.com/vga"></div>
        <div class="slide"><img src="https://dummyimage.com/vga"></div>
    </div>
  </div>
  <div id="features" class="flex">
      <div>Safe</div>
      <div>Secure</div>
      <div>24-Hour Access</div>
  </div>
  <div id="description">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
  $(document).ready(() => {
    $('#slideshow .slick').slick({
        autoplay: true,
        autoplaySpeed: 500, // autoplaySpeed: 1000, or             autoplaySpeed: 2000,
        dots: true,
    });
});

$(document).ready(() => {
    $('#userReview .slick').slick({
        autoplay: true,
        autoplaySpeed: 8000,
        dots: true,
    });
});
</script>
 </body>
 </html>