Slick Slider 覆盖了下面的元素答案

【问题标题】：Slick Slider covers up elements belowSlick Slider 覆盖了下面的元素
【发布时间】：2020-12-30 00:18:01
【问题描述】：

我光滑的滑块图像覆盖了应该位于下方的元素，我不知道为什么。我需要#features 坐在#slideshow 下面，但现在它被掩盖了。我不确定是什么使滑块与页面上它下方的元素重叠。我不想只想用 CSS “推”#features div，比如使用 bottom: -50px 或其他什么，因为我的目标是响应式设计。我需要幻灯片滑块和幻灯片占据与图像相同的高度。希望这是有道理的！这是我的代码：

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;
}

【问题讨论】：

标签： css slider display slick.js overlap

【解决方案1】：

我发现了 2 个问题 -

使用 height: 50% 代替 height: 50vh。（参考线 - 19）。这将解决您的问题。
使用父 div 包装所有幻灯片图片。让它命名 - class='slick'（参考线 - 53）。这个 .slick 类将迭代它的所有图片。如果您的滑块运行良好，则无需执行此部分。

我已经附上了下面的代码-

<!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>

【讨论】：