Adding items Dynamically to the variable-width carousel not working

[lalithnarayan]

I've been trying to add elements to the carousel dynamically and once the items are added the carousel isn't functioning

ul.clearfix(slick settings="slickConfig") li.vid-clipbrd-inner-date-list(ng-repeat ='ClipboardItem in clipboardataSorted' ')

[jvgeee]

Have you tried adding ng-if="clipboardataSorted.length" (or whatever) so that the slider is initialised only when you have the data to load in? Seems like the dynamic slides would only work when they can calculate the actual dimensions needed on init.

[gfdickinson]

I am having the same issue. I tried the tactic from the docs of adding ng-if to the directive, and then toggling the value to cause the slider to be readded to the dom. I think that this was failing because the digest cycle did not have a chance to complete by the time that ng-if was reset to true. If I allow some time to go by before setting ng-if back to true, the slider is rebuilt.

[cgatesman]

You need to allow the boolean set to false to be digested. The example given is not quite accurate. Try something more like this:

    $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
    $scope.numberLoaded = true;
    $scope.numberUpdate = function(){
        $scope.numberLoaded = false; // disable slick

        //number update

        $timeout(function() {
            $scope.numberLoaded = true; // enable slick
        });
    };