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

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?