Estoy usando este codepen " Imagen deslizante con puntos (JS puro) " que funciona muy bien en la página por sí mismo, pero cada vez que lo coloco dentro de un div, por ejemplo, una "capa externa", las imágenes en el control deslizante desaparecen, pero los puntos mantente visible. Lo voy a usar en una página que tiene un envoltorio de contenido, así es como me encontré con este problema del carrusel con altura cero una vez que se coloca dentro de otro div.

Aquí está el HTML del control deslizante con mi clase personalizada "capa exterior" a su alrededor, lo que hace que el control deslizante tenga una altura cero:

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

Hay bastante CSS y JS junto con el HTML, pensé que sería más fácil vincularlo en lugar de pegarlo aquí. " Control deslizante de imagen con puntos (JS puro) "

Pasé una buena cantidad de tiempo usando Chrome Developer Tools mirando las piezas individuales del control deslizante (probando diferentes propiedades de desbordamiento), y creo que se trata de que las imágenes tengan una posición absoluta, porque cuando anulo la selección de la propiedad css la primera mostraría la imagen. No estoy seguro de si el div externo está arruinando el posicionamiento de la página.