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要素の中に私のリストを回すが、それは何も変更didntは、リスト要素からクラスを削除しようとしましたクレイジー。

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

あなた.dropdownBtnは何background-colorを持っていない場合、私はそれlooks like this

Answer 1

今 'プレビュー' クラスを削除し、UPDATE、それが白になります。ので、スリックセットの幅を同様dropdownContentは、ページが最初に読み込まdisplay:hiddenにあったとして

seasons DIV：

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

Answer 2

私の同僚は、この問題に対する解決策を見つけましたスライダを0pxにして、すべてのスライドを0pxボックスの外側に揃えます。

は、私はそれは矢印はボックスの幅とのトラブルのビットを引き起こしていたので、また

が、私は、私のスタイルシートに.slick-prev { left: -5px;} .slick-next { right: -5px;}を追加しました:)なければならないように、今、代わりにheight:0px, overflow-y:hiddenに滑らかなスライダ負荷をdisplay:hiddenを変更しました。