First loading image in centerMode is not filling the left side

[zuhrasofyan]

I am making slider with variable width and centerMode option set to true. The result is when it first load,the image will start at the center but leaves the left side empty. after a few second when the autoPlay starts, then the slider will fill the empty space.

[devmark]

maybe you need to make a plunkr to me. Thanks you can fork from this: http://plnkr.co/edit/9goFW6?p=preview

[zuhrasofyan]

Something like this: http://plnkr.co/edit/Ce69TO?p=preview It does not have that problem in the plnkr, but when the similar code applied to my site, the problem occurs.

[sateesh2499]

I am also having the same issue. Screenshot:

My code in controller:

$scope.imageUrls = [];
    getDataService.getToursById(tourId).then(function (response)
    {         if (response.success == true) {
                $scope.tour = response.data[0];
        for (var i = 0; i < $scope.tour.tourImageLinks.length; i++) {
            $scope.imageUrls.push($scope.tour.tourImageLinks[i].link);
        }
        $scope.slickConfigLoaded = true;
        $scope.slickConfig = {
            enabled: true,
            method: {},
            autoplay: false
            dots: false,
            infinite: true,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true
        };
}

HTML code:

<slick class="slider" settings="slickConfig" ng-if="slickConfigLoaded">
    <div ng-repeat="image in imageUrls">
        <img ng-src="{{image}}" class="slickImage" />
    </div>
</slick> 

[IvanKalinin]

Hide your gallery using ng-style="opacity: showGallery ? 1 : 0"

and add in your controller/directive

scope.slickCarousel.on('init', function() {
      scope.slickCarousel.on('setPosition', function(){
           scope.showGallery = true;
      });
});