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;