我正在使用這個“帶點的影像滑塊（純 JS） ”代碼筆，它本身在頁面上作業得很好，但是每當我將它放在一個 div 中時，例如一個“外殼”，滑塊中的影像就會消失，但是點保持可見。我將在具有內容包裝器的頁面上使用它，這就是我遇到旋轉木馬放置在另一個 div 中時高度為零的問題的方式。
這是滑塊的 HTML，它周圍有我的自定義類“外殼”，這使得滑塊的高度為零：
<div class="outer-shell">
<!-- this slider can be used multiple times on the same page -->
<!-- don't change class names because slider will not work -->
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
除了 HTML 之外，還有相當多的 CSS 和 JS，我認為將其鏈接而不是粘貼在這里會更容易。“帶點的影像滑塊（純 JS） ”
我花了很多時間使用 Chrome 開發人員工具查看滑塊的各個部分（嘗試不同的溢位屬性），我認為這歸結為影像具有絕對位置，因為當我取消選擇 css 屬性時，第一個影像會顯示。我不確定外部 div 是否弄亂了頁面的定位？
uj5u.com熱心網友回復：
我認為你的 .dots 類有position: absolute;這就是為什么它顯示在你的 div 中而不需要一個 height 屬性，當你向外殼添加高度時，你也可以看到影像。
<div class="outer-shell">
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
.outer-shell{
height: 100%;
max-width:80%;
margin:0 auto;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/446184.html
標籤：javascript html css 旋转木马