javascript - 首次加载时，Slick Slider Items 不可见

Question

我对所有这一切仍然非常陌生，所以如果这个问题很愚蠢，我很抱歉。

slider 应该显示带有图像和标题的列表项。首次加载页面时，只有一个巨大的空白区域，只有在我单击该区域后，它才会在某种程度上执行它应该执行的操作。

这是我的代码:

.preview {
  overflow: hidden;
  width: 150px;
  height: auto;
  margin: 10px;
}

.preview:hover,
.arrow:hover {
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.dropdownBtn {
  text-decoration: none;
  display: block;
  color: white;
  padding: 10px 20px;
  margin: 5px 20px;
  width: fit-content;
}

.dropdownBtn:hover {
  background-color: #37264a;
}

.dropdownContent {
  display: none;
}

.dropdownBox:hover .dropdownContent {
  display: block;
}

.dropdownElement {
  display: inline-block;
}

.dropdownElement>img {
  display: block;
  width: 100px;
}

.dropdownElement>a {
  display: block;
}

<div class="dropdownBox">
  <a class="dropdownBtn" href="#">Season 1</a>
  <ul class="dropdownContent">
    <li class="dropdownElement  preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 1 Rose</a></li>
    <li class="dropdownElement  preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 2 The End of the World</a></li>
    <li class="dropdownElement  preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 3 The Unquiet Dead</a></li>
    <li class="dropdownElement  preview"> <img src="bilder/thumbnail-placeholder.jpg"><a href="#"> 4 Aliens of London</a></li>
  </ul>
</div>

我尝试将我的列表变成多个 div 元素，但这并没有改变任何东西，从列表元素中删除类最终疯狂地分散了它。

我的 CSS 哪里有缺陷？ 如果有人找到它，将不胜感激!

here's what the page looks like when it's first loaded and this is what it looks like after I click on the empty space

更新我删除了“预览”类，现在它是looks like this

Answer 1

我的同事找到了解决这个问题的方法:

seasons div 以及 dropdownContent 在页面首次加载时处于 display:hidden 状态，因此 Slick 设置了 slider 到 0px 并将所有幻灯片对齐到 0px 框外。

我将 display:hidden 更改为 height:0px, overflow-y:hidden，所以现在光滑的 slider 加载正常了:)

此外，我将 .slick-prev { left: -5px;} .slick-next { right: -5px;} 添加到我的样式表中，因为箭头在框的宽度。