Slider has no height and doesn't display unless I set hardcoded height

Question

I'm trying to create a slider component from zeto to use on my project. The problem I'm currently facing is that the slider has 0 height unless I set hardcoded height like height: 50rem;. I can't spot what's cauising this or why.

You can find working code snippet here: https://jsfiddle.net/fj640arc/1/

You should remove height: 50rem; on .slider CSS class to see how it looks. I shouldn't hardcode an height for sliders.

Also any help help would be appreciated on responsive images for this slider. How can I improve this slider images to be able to fit on the slider properly and not break it?

Thanks!

Answer 1

When you position items, you take them out of the document flow.

You have to remove the

position: relative; declaration in the slider__item-list