时间戳

首页 > 解决方案 > 如何使用 AngularJS 实现智能分块引导轮播？

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

问题描述

我想在我的网站上有一个轮播滑块。我正在使用 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)});

                }

我在我的 ng-repeat.my 数据中使用 bootstrap 4 carousel 和 angular.filter 进行分组过滤： $scope.exp_all_goods =[ {img: "310.jpg"}

，{img：“311.jpg”}

，{img：“312.jpg”}

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

标签： angularjscarouselowl-carouselslick.js

解决方案

大多数轮播都存在 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>

推荐阅读