Javascript code not getting executed on initial page load

I have written a Javascript function for resizing the Carousel according to the screen width. It's doing the job properly but the only issue is that it doesn't get initialized on the initial page load. The Carousel is only present on the homepage and when I visit it for the first time, the code doesn't get executed. However, if I reload the page it does get executed. It even gets executed when I resize my browser window. But I would like it to initialize on the first first load as well. Here's the code:

let carousel = document.querySelector('#carousel');  if (carousel) {    const size = 0.8;    window.addEventListener('resize', () => {      let width = carousel.clientWidth || carousel.offsetWidth;      let carouselHeight = (width * size) + 'px';      carousel.querySelector(".slide").style.height = carouselHeight;    }, false);  }   

https://stackoverflow.com/questions/66512559/javascript-code-not-getting-executed-on-initial-page-load March 07, 2021 at 10:05AM