Why do my carousel images disappear (zero carousel height) when carousel slider is placed inside a d-CodePudding

I am using this "Image Slider with Dots (pure JS)" codepen which works very well on the page by itself, but whenever I place it inside a div for example an "outer shell" the images in the slider disappear, but the dots stay visible. I am going to be using it on a page that has a content wrapper so that's how I ran into this issue of the carousel having zero height once it is placed inside another div.

Here is the HTML of the slider with my custom class "outer-shell" around it, which makes the slider have zero height:

<div >
    <!-- this slider can be used multiple times on the same page -->
<!-- don't change class names because slider will not work -->
<div >
    <div >
      <!-- 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  style="left: 0;"> 
        <span>Image 1</span>
      </div>
      <div >
        <span>Image 2</span>
      </div>
      <div >
        <span>Image 3</span>
      </div>
      <div >
        <span>Image 4</span>
      </div>
    </div>
    <div ></div>
  </div>
</div>

There's quite a bit of CSS and JS along with the HTML, I thought it would be easier to have it linked rather than pasting it here. "Image Slider with Dots (pure JS)"

I have spent a good amount of time using Chrome Developer Tools looking at the individual pieces of the slider (trying different overflow properties), and I think it comes down to the images have an absolute position, because when I deselect the css property the first image would show. I am not sure if the outer div is messing up the positioning of the page?

CodePudding user response：

i think your .dots class have position: absolute; that is why it is shown inside your div without needed a height property and when you add height to outer-shell you can see images too.

<div >
 <div >
  <div >
    <!-- 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  style="left: 0;"> 
      <span>Image 1</span>
    </div>
    <div >
      <span>Image 2</span>
    </div>
    <div >
      <span>Image 3</span>
    </div>
    <div >
      <span>Image 4</span>
    </div>
  </div>
  <div ></div>
 </div>
</div>

.outer-shell{
  height: 100%;
  max-width:80%;
  margin:0 auto;
}