angular-轮播在轮播结束时添加额外的空幻灯片

Question

我已经使用 ng-repeat 使用 angular-carousel 包实现了一个滑块。它工作正常，但它在旋转木马的末尾添加了一个额外的空白幻灯片。我在网上搜索，其他人也有类似的错误，因为他们的轮播末尾有一个额外的元素，但我的代码中没有类似的东西。当我在浏览器中检查 dom 时，我也没有看到额外的元素。

我正在使用一个指令将轮播的高度设置为最高的图像，但无论我是否使用一个指令，它都有同样的问题。除了旋转木马末端的额外幻灯片外，一切都按照我想要的方式进行。

我将在下面粘贴我的代码，如果您需要更多信息或说明，请告诉我。

在此先感谢您的帮助！

模板如下所示：

<!-- Begin Image section/slider -->
<div data-ng-show="isCurrentPage('/')" data-ng-controller="HeaderController" data-ng-init="getSiteStyle();" class="clearfix">
  <ul rn-carousel rn-carousel-controls-allow-loop rn-carousel-controls rn-carousel-auto-slide="3" data-slider-directive id="upcoming-events-carousel" class="image" style="margin-left:0;margin-bottom:0;">
    <li data-ng-repeat="futureEvent in futureEvents" data-ng-if="futureEvent.eventHomepageImage">
      <div outer-height class="layer" data-slider-slide-directive>
        <a href="/{{futureEvent.eventUrl}}">
          <img class="carousel-img" data-ng-src="/app/uploads/{{ futureEvent.eventHomepageImage }}" />
        </a>
      </div>
    </li>
  </ul>
</div>

sliderSlideDirective 看起来像这样：

'use strict';

const jQuery = require('jquery');

const sliderSlideDirective = (app) => {
  app.directive('sliderSlideDirective', ['$timeout',
    function($timeout) {
      const sliderSlideDirectiveDefinitionObject = {
        restrict: 'A',
        scope: true,
        link: function postLink(scope, element, attrs) {
          $timeout(function() {
            //get height of current slide in list and push the height into the height array
            let elemHeight = jQuery(element[0]).height();
            //push that height onto array of heights from parent scope
            scope.$parent.sliderImgsHeights.push(elemHeight);
            //assign the tallest height in array to newHeight variable using es6 spread operator
            let newHeight = Math.max(...scope.$parent.sliderImgsHeights);
            jQuery('#upcoming-events-carousel').height(newHeight);

          });
        }
      };
      return sliderSlideDirectiveDefinitionObject
    }
  ])
};

module.exports = sliderSlideDirective;;

控制器看起来像这样：

'use strict';

const HeaderController = (app) => {
  app.controller('HeaderController', ['$scope', '$http', 'headerRESTResource',
    function($scope, $http, resource) {
      $scope.errors = [];
      $scope.siteStyle = [];
      $scope.sliderImgsHeights = [];

      let SiteStyle = resource();

      $scope.getSiteStyle = () => {

        SiteStyle.getSiteStyle(function(err, data) {
          if (err) {
            return $scope.errors.push({
              msg: 'could not retrieve team members'
            });
          };

          $scope.siteStyles = data;
        })


      };

    }
  ])
}

module.exports = HeaderController;

Answer 1

所以经过一些试验，我发现问题是我返回的数组中的一些项目用于制作幻灯片，它们的图像具有 null 值，因此没有创建幻灯片，这我以为 data-ng-if="futureEvent.eventHomepageImage" 会处理，但图像的 null 项目仍然会增加数组的长度，而 angular-carousel 使用数组的长度来制作幻灯片的偏移量。因此，即使它没有添加空白幻灯片，angular-carousel 添加了额外的填充以说明由于数组的长度而不存在的图像。

为了修复它，我遍历了数组并将那里的图像推入一个新数组并返回仅包含图像的新数组以制作轮播。

希望这对遇到同样问题的其他人有所帮助:-)

angular-轮播在轮播结束时添加额外的空幻灯片

angular-carousel adds extra empty slide at end of carousel

javascript

jquery

angularjs

angular-carousel