Javascript 初始化时，Owl旋转木马使图像过大

我在尝试用AngularJS加载猫头鹰旋转木马时遇到了一个奇怪的问题

我创建所有幻灯片时重复以下步骤：

<div class="owl-carousel owl-theme" id="newsCarousel" banner-container>
    <img class="img-fluid" ng-src="{{banner.URL}}"
         ng-repeat="banner in vm.banners" banner-card>
</div>

然后使用以下指令初始化旋转木马：

app.directive('bannerCard', function ($timeout){
    return function(scope, element, attrs){
        if(scope.$last)
            return $timeout(function(){
                scope.$emit('LastBannerRendered');
            });
    };
});
app.directive('bannerContainer', function ($timeout){
    return function(scope, element, attrs){
        $timeout(function(){
            scope.$on('LastBannerRendered', function(event){
                $('#newsCarousel').owlCarousel({
                    autoplay: true,
                    loop:true,
                    autoplayTimeout: 5000,
                    items: 1,
                    nav: true,
                    dots: false,
                    navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
                });
            });
        });
    }
}); 

app.directive（'bannerCard'，函数（$timeout）{
返回函数（范围、元素、属性）{
如果（范围$last）
返回$timeout（函数（）{
范围：$emit（'lastbannerrended'）；
});
};
});
应用程序指令（'bannerContainer'，函数（$timeout）{
返回函数（范围、元素、属性）{
$timeout（函数（）{
作用域：$on（'LastBannerRendered'，函数（事件）{
$（“#新闻转盘”）。猫头鹰转盘({
自动播放：对，
循环：对，
自动播放超时：5000，
项目：1，
导航：是的，
点：错，
导航文本：[“”，“”]
});
});
});
}
}); 

到目前为止，我已经多次这样做了（同一页面中还有两个旋转木马也是这样做的，并且工作100%正常），但是这个特定的旋转木马似乎工作不正常，问题是当初始化幻灯片时，幻灯片的高度超过了2000px，这是一个惊人的数量，破坏了整体视图

当我通过控制台初始化旋转木马时，它不会变得太大，但是它没有溢出：隐藏，因此所有幻灯片都一个接一个地显示

我在这里遗漏了什么导致这个特定的旋转木马像这样运行

---

添加更多细节：图像最初以正确的大小加载，我可以看到它们大约一秒钟，然后应用某种样式使其具有此大小

在我下面的示例中不存在此问题，这可能是由于owl转盘的某些属性设置不正确，您也可以使用内联样式将主转盘的高度设置为所需的高度

我已经对您的指令做了一些更正，如果您愿意，可以忽略它们，请检查我的示例并将其实现到您的代码中

var-app=angular.module（'myApp'，[]）；
app.controller（'MyController'，函数MyController（$scope）{
这是。横幅=[{
URL:“http://via.placeholder.com/350x150"
}, {
URL:“http://via.placeholder.com/350x150"
}, {
URL:“http://via.placeholder.com/350x151"
}, {
URL:“http://via.placeholder.com/350x152"
}, {
URL:“http://via.placeholder.com/350x153"
}, {
URL:“http://via.placeholder.com/350x154"
}, {
URL:“http://via.placeholder.com/350x155"
}];
此值为0.1={
导航：对，
幻灯片速度：300，
分页速度：400，
单项：对，
过渡风格：“淡入淡出”
};
此值为0.2={
自动播放：对，
循环：对，
自动播放超时：5000，
项目：1，
导航：是的，
点：错，
导航文本：[“”，“”]
};
});
应用指令（'bannerCard'，函数（$timeout）{
返回{
限制：“A”，
控制器：“MyController”，
链接：函数（范围、元素、属性、ctrl）{
如果（范围$last）
element.parent（）.owlCarousel（ctrl[attrs.bannerCard]）；
}
}
});

您是否按照@georgeawg的建议在
angular.js
之前加载了
jquery.js
，很抱歉延迟响应，但我是。很抱歉延迟回复，当我在单独的本地项目上执行此操作时，我也不会发生这种情况。我已经设法通过增加100vw的宽度和最大高度来修复它，但是现在我得到了一个小的溢出right@Danyx我猜您可以通过将
高度
设置为
自动
并确保图像尺寸相同来解决溢出问题，如果您面临问题，请将我的JSFIDLE与问题共享，这是一个最小的问题，没有理由使用水平滚动，我只是通过添加一个
overflow-y:hidden
来解决它。谢谢你，我真的很感谢你的帮助。@Danyx不客气，你可以通过给出解决方案来解决问题！