Question

我想在我的网站上使用轮播滑块。我正在使用ng-repeat从服务器获取其数据。这是我的代码：

<div id="dynamiccontentcarousel" class="carousel slide " data-ride="carousel" data-interval="2000">
    <ol class="carousel-indicators">
    <li data-target="#dynamiccontentcarousel" data-ng-repeat="(key, value) in ExpImage| groupBy: 'index'" data-ng-class="{active : $first}" data-slide-to="{{$index}}"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div  data-ng-repeat="(key, value) in ExpImage| groupBy: 'index'">
            <div ng-repeat="img in value" data-ng-class="{active : $first}">
                <img data-ng-src="image/{{img.img}}" style="width: 300px; height: 150px">

            </div>
        </div>
    </div>
</div>

和我的js：

 for(var i = 0; i < $scope.exp_all_goods.length; i++)
                {
                    $scope.ExpImage.push({img:$scope.exp_all_goods[i].img, index: Math.floor(i / 4)});

                }

我正在使用ngs-repeat.my数据中的bootstrap 4轮播和angular.filter进行分组过滤： $ scope.exp_all_goods = [{img：“ 310.jpg”}

， {img：“ 311.jpg”}

， {img：“ 312.jpg”}

， {img：“ 313.jpg”，索引：0}]

Answer 1

大多数轮播有ng-repeat问题。对于光滑的轮播http://kenwheeler.github.io/slick/

，我们有一些解决方法

在迭代器中包括对最后一个元素的条件检查，并让指令仅在此之后被触发。下文提到的代码中的'if（scope。$ last）'对您而言也一样。

function slickCarouselEL(smoothScroll) {
  return {
    restrict: 'A',
    transclude: false,
    link: function(scope, element) {
      if ( scope.$last ) {
        $(element.parent()).slick({
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true,
          dots: true,
          autoplaySpeed: 4000,
          responsive: [
            {
              breakpoint: 400,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: false
              }
            },
            {
              breakpoint: 900,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: false
              }
            },
            {
              breakpoint: 1200,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
              }
            }
          ]
        });
      }
    }
  }
}

HTML：

<md-card class="image-container" flex="100">
     <div class="img-carousel" ng-if="dataLoaded">
         <div class="slick-carousel" ng-repeat="img in imageList" ng-if="dataLoaded" init-onload="false" data="dataLoaded" slick-carousel-el>
                <div class="item">
                    <md-card class="img">
                         <img src="{{img}}">
                    </md-card>
                </div>
          </div>
     </div>   
</md-card>

如何使用AngularJS实现智能分块引导轮播？

1 个答案: