1

我已经使用 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;

4

1 回答 1

1

So after some experimenting, I found that the problem was that some of the items in the array I was returning to make the slides had a null value for their image, so no slide was created, which I thought would be taken care of by data-ng-if="futureEvent.eventHomepageImage", but the items with null for the images still add to the length of the array and angular-carousel uses the length of the array to make the offsets for the slides. So, even though it wasn't adding the blank slides, angular-carousel added extra padding to account for an image that wasn't there, because of the length of the array.

To fix it I looped over the array and pushed the images that were there into a new array and returned the new array containing only images to make the carousel.

Hope this helps anyone else who runs into the same issue :-)

于 2016-08-12T21:53:00.807 回答