angularowl-carousel-2

ngx-owl-carousel-o isn't sized properly on page load

I'm working on an app where one of the carousels I'm using on the home page isn't loading properly:

enter image description here

Someone else described having the same problem here:

i'm having the same problem. The carousel items don't get initialized properly on page load. Only when the page size changes or when i refresh the page on desktop. On mobile, it's even worse. The carousel displays incorrect amount of items, and page refresh doesnt fix it. Adding [id] doesnt fix this bug

Solution

  • After a lot of Googling I found the solution here: manually trigger a resize event when the component finishes loading:

    ngAfterViewInit(): void {
  window.dispatchEvent(new Event('resize'));
}