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:hidden，所以现在光滑的滑块按原样加载:)

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

Answer 2

如果您的.dropdownBtn没有background-color，则会为白色。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: