CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
Nuru Salihu
Nuru Salihu

Reputation: 4928

owl-carousel issue with angularjs ng-repeat

Please i am using owl-carousel for my carousel. My carousel is very similar to the one here http://thebootstrapthemes.com/live/thebootstrapthemes-zenclassified/ . I came across a similar solution Here and Here . i then added a similar directive in my controller 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());
            }
        }
    };
}]);

The above works for me except. The last item's height increase beyond the other items below.

You can see the last item display above. Please how do i resolve that and what is the cause ? Any help would be appreciated.

Upvotes: 1

Views: 1042

Answers (1)

brickleberry
brickleberry

Reputation: 522

Try this 

.directive('owlCarousel', function(){
    return {
        restrict: 'EA',
        transclude: false,
        link: function (scope, element, attrs) {
            scope.initCarousel = function() {
                // 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}
                    }
                };
                $(element).owlCarousel(defaultOptions);
            };
        }
    };
}).directive('owlCarouselItem',[function() {
     return function(scope) {
     if (scope.$last) {
        scope.initCarousel();
     }
    };
  }]);

Refer to this question Here Its what worked for me.

Upvotes: 3

Related Questions