I have implemented an owl-carousel for my website's carousel functionality. The design of my carousel is similar to the one showcased here: . During my research, I found a solution on Stack Overflow which I integrated into my code with a directive in the controller provided below:
.directive('owlCarousel', function(){
return {
restrict: 'E',
transclude: false,
link: function (scope) {
scope.initCarousel = function(element) {
// provide any default options you want
var defaultOptions = {
autoplay:true,
autoplayTimeout:2500,
loop:false,nav : true,
responsiveClass:true,
margin: 30,
responsive:{
0:{items:1},
767:{items:3},
992:{items:4}
}
};
var customOptions = scope.$eval($(element).attr('data-options'));
// combine the two options objects
for(var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
// init carousel
$(element).owlCarousel(defaultOptions);
};
}
};
}).directive('owlCarouselItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
// wait for the last item in the ng-repeat then call init
if(scope.$last) {
scope.initCarousel(element.parent());
}
}
};
}]);
Everything seems to be working fine, except for one issue. The height of the last item in the carousel extends beyond the other items below it.
If you take a look at the display above, you will notice the height discrepancy of the last item. Can someone please guide me on how to resolve this issue and identify the root cause? Any assistance would be greatly appreciated.