angular-slick-carousel Slides are empty at the end

I had used slick in my previous projects which didn't cause any issues but the current update gives me the following errors. I am using angular slick which loads 9 images but I get empty slides after the last one.

<slick settings="slickConfig" ng-if="slickConfigLoaded">
    <div ng-repeat="bi in carousel.imgUrl track by $index">
        <img class="img-responsive" ng-src="{{bi}}">
    </div>
    <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
    <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
</slick>

$scope.carousel = {
        imgUrl: ['photos/instructorWithStudent01.jpeg', 'photos/instructorWithStudent02.jpeg', 'photos/instructorWithStudent03.jpg', 'photos/instructorWithStudent04.jpg', 'photos/instructorWithStudent05.jpg', 'photos/instructorWithStudent06.jpg', 'photos/instructorWithStudent07.jpg', 'photos/instructorWithStudent08.jpg', 'photos/volunters.jpeg'],
        name: ''
    }
    $scope.slickConfigLoaded = true;
    $scope.currentIndex = 0;
    $scope.slickConfig = {
        method: {},
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        enabled: true,
        autoplay: true,
        draggable: false,
        autoplaySpeed: 300,
        method: {},
        event: {
            beforeChange: function (event, slick, currentSlide, nextSlide) {},
            afterChange: function (event, slick, currentSlide, nextSlide) {
                console.log(nextSlide);
            },
            init: function (event, slick) {
                slick.slickGoTo($scope.currentIndex); // slide to correct index when init 
            }
        }
    };
}

Kindly help me solve this.

Thanks, Krish