首次加载时，Slick Slider项目不可见

Question

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

滑块应显示带有图像和标题的列表项。当页面首次加载时，只有一个巨大的空白区域，只有在我点击该空间后，它才会做一些它应该做的事情。

这是我的代码：

.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将滑块的宽度设置为0px并将所有幻灯片对齐在0px框外。

我将display:hidden更改为height:0px, overflow-y:hiddeninstead，所以现在光滑的滑块加载应该:)

另外，我将.slick-prev { left: -5px;} .slick-next { right: -5px;}添加到我的样式表中，因为箭头对盒子的宽度造成了一些麻烦。

Answer 2

如果你的.dropdownBtn没有background-color，它将是白色的。

.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;
  background-color: black;
  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>