After successfully creating a basic responsive slider with vanilla JavaScript, I have encountered an issue that I cannot seem to resolve on my own. I am reaching out to the community in the hopes of finding some assistance.
Please take a look at the demo of the slider on CodePen:
The problem lies in the fixed height set on the .pc-mslider container. Removing this fixed height causes the slider to collapse upon loading as the height is not defined. However, setting the height leads to issues when resizing the window, resulting in either excessive space at the bottom or hidden content.
I am seeking a solution to overcome this challenge.
My attempt to address the issue involved removing the height and calculating it based on the first slide using the following code snippet:
// Set the initial height based on the first slide
const slider = document.querySelector('.pc-mslider');
const firstSlideHeight = slides[0].offsetHeight;
slider.style.height = `${firstSlideHeight}px`;
Unfortunately, this approach did not work as intended, as it added an inline style of "height: 0px" to .pc-mslider.