angular-carousel adds extra empty slide at end of carousel

Question

I have implemented a slider with the angular-carousel package using ng-repeat. It works correctly, but it adds an extra blank slide at the end of the carousel. I searched online and other people had a similar error, because of an extra element at the end of their carousel, but I don't have anything like that in my code. And I don't see extra elements when I inspect the dom in the browser either.

I'm using a directive to set the height of the carousel to the tallest image, but it has the same issue whether or not I use a directive. Everything works the way I want it except for the extra slide at the end of the carousel.

I'll paste my code below, please let me know if you need more info or clarification.

Thanks in advance for all the help!

The template looks like this:

<!-- Begin Image section/slider -->
<div data-ng-show="isCurrentPage('/')" data-ng-controller="HeaderController" data-ng-init="getSiteStyle();" class="clearfix">
  <ul rn-carousel rn-carousel-controls-allow-loop rn-carousel-controls rn-carousel-auto-slide="3" data-slider-directive id="upcoming-events-carousel" class="image" style="margin-left:0;margin-bottom:0;">
    <li data-ng-repeat="futureEvent in futureEvents" data-ng-if="futureEvent.eventHomepageImage">
      <div outer-height class="layer" data-slider-slide-directive>
        <a href="/{{futureEvent.eventUrl}}">
          <img class="carousel-img" data-ng-src="/app/uploads/{{ futureEvent.eventHomepageImage }}" />
        </a>
      </div>
    </li>
  </ul>
</div>

the sliderSlideDirective looks like this:

'use strict';

const jQuery = require('jquery');

const sliderSlideDirective = (app) => {
  app.directive('sliderSlideDirective', ['$timeout',
    function($timeout) {
      const sliderSlideDirectiveDefinitionObject = {
        restrict: 'A',
        scope: true,
        link: function postLink(scope, element, attrs) {
          $timeout(function() {
            //get height of current slide in list and push the height into the height array
            let elemHeight = jQuery(element[0]).height();
            //push that height onto array of heights from parent scope
            scope.$parent.sliderImgsHeights.push(elemHeight);
            //assign the tallest height in array to newHeight variable using es6 spread operator
            let newHeight = Math.max(...scope.$parent.sliderImgsHeights);
            jQuery('#upcoming-events-carousel').height(newHeight);

          });
        }
      };
      return sliderSlideDirectiveDefinitionObject
    }
  ])
};

module.exports = sliderSlideDirective;;

The controller looks like this:

'use strict';

const HeaderController = (app) => {
  app.controller('HeaderController', ['$scope', '$http', 'headerRESTResource',
    function($scope, $http, resource) {
      $scope.errors = [];
      $scope.siteStyle = [];
      $scope.sliderImgsHeights = [];

      let SiteStyle = resource();

      $scope.getSiteStyle = () => {

        SiteStyle.getSiteStyle(function(err, data) {
          if (err) {
            return $scope.errors.push({
              msg: 'could not retrieve team members'
            });
          };

          $scope.siteStyles = data;
        })


      };

    }
  ])
}

module.exports = HeaderController;

Answer 1

So after some experimenting, I found that the problem was that some of the items in the array I was returning to make the slides had a null value for their image, so no slide was created, which I thought would be taken care of by data-ng-if="futureEvent.eventHomepageImage", but the items with null for the images still add to the length of the array and angular-carousel uses the length of the array to make the offsets for the slides. So, even though it wasn't adding the blank slides, angular-carousel added extra padding to account for an image that wasn't there, because of the length of the array.

To fix it I looped over the array and pushed the images that were there into a new array and returned the new array containing only images to make the carousel.

Hope this helps anyone else who runs into the same issue :-)