初始化时 Owl-Carousel 超大图像

Posted 2023-05-08

【中文标题】初始化时 Owl-Carousel 超大图像

【英文标题】：Owl-Carousel oversizing images when initialized

【发布时间】：2019-01-18 12:44:41

【问题描述】：

我在尝试使用 AngularJS 加载猫头鹰轮播时遇到了一个奇怪的问题。

我使用以下 ng-repeat 创建所有幻灯片：

<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>"]
                );
            );
        );
    
); 

到目前为止，我已经多次执行此操作（同一页面中还有 2 个其他轮播像这样完成并且工作 100% 正常）但是这个特定的轮播似乎无法正常工作，问题是在初始化时幻灯片的高度超过 2000 像素，这是一个破坏整体视图的惊人数量。

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

我在这里遗漏了什么导致这个特定的轮播呈现这样的行为？

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

【问题讨论】：

您是否按照AngularJS documentation 的建议在angular.js 之前加载了jquery.js？

@georgeawg 很抱歉延迟回复，但我是。

【参考方案1】：

这个问题在我下面的例子中没有出现，可能是由于owl carousel的某些属性设置不正确，您也可以使用内联样式将主carousel的height设置为您想要的高度。

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

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) 
  this.banners = [
    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"
  ];
  this.owl1 = 
    navigation: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    transitionStyle: 'fade'
  ;
  this.owl2 = 
    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', function($timeout) 
  return 
  restrict: 'A',
  controller: 'MyController',
  link: function(scope, element, attrs, ctrl) 
    if (scope.$last)
      element.parent().owlCarousel(ctrl[attrs.bannerCard]);
  
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div ng-controller='MyController as vm' ng-app="myApp">
  <div class="owl-carousel owl-theme" id="newsCarousel" style="width:350px">
    <img class="slide" ng-src="banner.URL" ng-repeat="banner in vm.banners" banner-card="owl1">
  </div>
  <div class="owl-carousel owl-theme" id="newsCarousel">
    <img class="slide" ng-src="banner.URL" ng-repeat="banner in vm.banners" banner-card="owl2">
  </div>
</div>

【讨论】：

很抱歉回复晚了，当我在单独的本地项目上这样做时，它也不会发生在我身上。我已经设法通过添加 100vw 的宽度和最大高度来修复它，但现在我在右侧得到了一个小溢出

@Danyx 猜猜你可以通过将height 设置为auto 来解决溢出问题，并确保图像尺寸相同，如果遇到问题，请分享我的 JSfiddle 问题

因为这是一个小问题并且没有理由有一个水平滚动我只是通过添加overflow-y: hidden来解决它。谢谢您，非常感谢您的帮助。

@Danyx 不客气，您可以通过提供解决方案来关闭工单！