2016-06-18 7 views
0

私はカルーセルのためにフクロウカルーセルを使用しています。私のカルーセルはここのものに非常に似ていますhttp://thebootstrapthemes.com/live/thebootstrapthemes-zenclassified/。私は同様の解決策Hereとここに来ました。次に私のコントローラーに同様の指令を追加しました。angularjsのowl-carousel問題ng-repeat

.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()); 
      } 
     } 
    }; 
}]); 

上記以外は上記のとおりです。最後のアイテムの高さは、以下の他のアイテムよりも増加します。

あなたは上記の最後の項目の表示を見ることができます。どうすればそれを解決し、原因は何ですか?どんな助けもありがとう。

+0

一度に3つのアイテムを確認しましたか?それは正常に動作していますか? – Manish

+0

@ManishSharmaリストの最後の項目がそのように表示されることがよくあります。私は3つのアイテムも試しました。 –

+0

は私が見ることができる作業コードです。これは、動的な幅のフローカルーセル作成の問題である可能性があるためです。 – Manish

答えて

1

この

.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(); 
    } 
    }; 
    }]); 

を試してみては私のために働いていたものを、そのここでこの質問を参照してください。