Slick Carousel& AngularJS Ng-repeat

时间:2016-05-17 13:45:04

标签: javascript jquery angularjs twitter-bootstrap

问题:在Ng-repeat中将对象切换到不同对象后出现多个点和图像(来自最后一个对象)

通过http post将对象加载到div中以显示信息,但最后加载的对象仍然在轮播中保留空格(点)。

图片作为参考:

enter image description here

enter image description here

相关代码:

 <slick autoplay="true" dots="true" infinite="true" autoplayspeed="500" fade="true" init-onload="true" data="currentProduct">
                                    <div ng-repeat="image in currentProduct.Images track by image.Id">
                                        <img src="http://cdnll.mysite.com/images/1000/{{image.ImageName}}.jpg" width="300" height="300" />
                                        <span>{{image.Id}}</span>
                                    </div>
                               </slick>


 $scope.displayDetails = function (product, scroll) {
    if ($scope.currentProduct != null)
        $scope.currentProduct.Images = [];
    if ($scope.showDetails) {
        $anchorScroll();
    }
    $scope.showDetails = true;
    $scope.currentProduct = product;
    $scope.lastScroll = scroll;
}

指令参考: https://github.com/devmark/angular-slick-carousel

if (scope.initOnload) {
              isInitialized = false;
              return scope.$watch('data', function (newVal, oldVal) {
                  if (newVal != null) {
                      if (isInitialized) {
                          destroySlick();
                          // this does happen!! every new instance of currentProduct
                      }
                      initializeSlick();
                      return isInitialized = true;
                  }
              });
          } else {
              return initializeSlick();
          }

 destroySlick = function () {
              return $timeout(function () {
                  var slider;
                  slider = $(element);
                  slider.slick('unslick');
                  slider.find('.slick-list').remove();
                  return slider;
              });
          };

光滑轮播参考: http://kenwheeler.github.io/slick/

1 个答案:

答案 0 :(得分:0)

这是css的一个问题。确保你有正确使用的光滑版本的css。