Issue with loading images from local JSON in ngx-slick carousel - Angular 7

Question

I have a master details component who load a content from a local JSON and change JSON object and Url on buttons click (next/prev) via pipe in Anguar 7. Also I use ngx-slick carousel. On init page loading image isn`t show (you can see just a slider dots like on screenshot below), when go to next page and than on previous one via buttons image show normally. This is only happens when set adaptiveHeight option to true in the carousel setting otherwise everything is great. But I need that option set to true, because images not have same size.

Slider Issue preview - just show a blue dot

Slick list div preview here - div with slick-list class have a height of 1px in inline style.

After Google / StackOverflow research I found that is might because image loading before slider. I try different ways to solve this but unfortunately with no success. :(

Component Url: https://github.com/markostalma/markostalma-dev/blob/master/src/app/work/work-single/work-single.component.ts

Pipe Url: https://github.com/markostalma/markostalma-dev/blob/master/src/app/pipes/master-details.pipe.ts

One of site url to see issue: https://www.markostalma.ninja/selected-work/gizmosphere-infographic

Thanks in advance!

Answer 1

Bug Fixed! This is solution for now.

  // Fix slider adaptive height bug on init
  slickInit(slideEvent) {
    slideEvent.slick.$slider.find('img').first().on('load', () => {
      let height = $('.slickImg-item').height();
      $('.slick-list').height(height);
      console.log("Slider Init");
    });