当轮播滑块放在 div 内时，为什么我的轮播图片会消失（轮播高度为零）？

Question

我正在使用这个“Image Slider with Dots (pure JS)”代码笔，它本身在页面上运行良好，但每当我将它放在 div 中时，例如“外部 shell”滑块中的图像消失，但点仍然可见。我将在具有内容包装器的页面上使用它，这就是我如何运行进入这个高度为零的旋转木马问题，一旦它被放置在另一个 div.

这是滑块的 HTML，周围环绕着我自定义的 class“outer-shell”，这使得滑块的高度为零：

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

有很多 CSS 和 JS 以及 HTML，我认为将其链接而不是将其粘贴到此处会更容易。 “Image Slider with Dots (pure JS)”

我已经花了很多时间使用 Chrome 开发人员工具查看滑块的内部dividual 部分（尝试不同的溢出属性），我认为这归结为图片有绝对位置，因为当我取消选择 css 属性时，第一张图片会显示。我不确定外部 div 是否弄乱了页面的定位？

Answer 1

我认为你的 .dots class 有 position: absolute; 这就是为什么它显示在你的 div 中而不需要高度属性并且当你将高度添加到 outer-shell你也可以看到图片。

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

当轮播滑块放在 div 内时，为什么我的轮播图片会消失（轮播高度为零）？

Why do my carousel images disappear (zero carousel height) when carousel slider is placed inside a div?

html

javascript

css

carousel