https://codepen.io/umbriel/pen/MxazRE
One interesting feature of my slideshow is that users can change the slide by swiping their mouse cursor horizontally over the slide container.
Since the children (slides) are absolutely positioned, I faced a challenge in dynamically updating the height of the parent (slideshow container).
Given that I do not know the height of individual slides, I need to calculate the tallest div and assign that height to the parent container.
Below is the code snippet to determine the height of the tallest element:
function getTallestSegment(element) {
let elementsHeight = [];
let height = 0;
element.forEach(child => {
elementsHeight.push(child.scrollHeight);
});
height = Math.max(...elementsHeight);
return height;
}
Additionally, here is the window resize script to update the parent height dynamically:
window.onresize = function(e){
Object.assign(item.style, {
height: getTallestSegment(getChildren) + "px"
});
};
While the functionality currently works when downsizing the window, as visible in the provided gif with changing height values, I am seeking a solution to make it work both ways - when expanding the window width as well!
Any suggestions on how to implement this bidirectional resizing for the parent container?
Thank you!