How to wait for the images to load and then start the carousel?

[mmswi]

Hello,

I'm having these issues: the slick carousel doesn't seem to load if the images take longer to load.

How can I initialize the slick carousel after the content is loaded?

If you look on my website, you will see that the images are one under the other. Here is the live exampe: http://mmswi.com/gademm/index.html#/product/51Petit

On my localhost the carousel works fine, but only after I cache it. At the first page load, the images appear one under the other.

In this other plugin (https://github.com/vasyabigi/angular-slick), I see the carousel has something like . Does your plugin have something similar?

Thanks for the help, Mihai

[mmswi]

Update: decided to use the other carousel (https://github.com/vasyabigi/angular-slick), until I get an answer here, so I can show the customer the website progress.

[devmark]

Hello. Sorry for delay.

please make sure inject angular-slick plugin in head html attribute If you load slick plugin first, i don't think you will get one under the other problem.

if you load plugin in footer section: you have to use angular ready function to make sure slick is loaded

    $rootScope.viewLoaded = false;
    angular.element(document).ready(function() {
      console.log('page completed');
      $timeout(function() {
        $rootScope.viewLoaded = true;
      }, 2000);
    });

demo: http://plnkr.co/edit/pl7hsu0JlPtAvpFsxjOC?p=preview

also you can try something like:

slick plugin data-lazy function

have a demo: http://plnkr.co/edit/sL71LFvGunFlKYZAFqUM?p=preview

<img src="http://placehold.it/1024x400" data-lazy="http://cdn.urbanislandz.com/wp-content/uploads/2011/10/MMSposter-large.jpg" alt="">       

$scope.slickPanels = {
      lazyLoad: 'ondemand',
};

you can replace http://placehold.it/1024x400 to loading gif

---

[mmswi]

Hello devmark,

Thanks for the quick reply!

I will try this solution today or tommorow and let you know the result!

Thanks