Question

我正在使用松弛响应式轮播，以显示该项目来自数组$ ctrl.items的项目，到目前为止，我在此松弛轮播中使用ng-repeat，它可以正常工作问题是当我单击任何按钮更改$ ctrl.items数组中的项目时松弛开始垂直查看项目，如果我将屏幕宽度更改为较小或较大的屏幕，问题将消失并且滑块再次可以正常工作

<slick
  dots="true"
  infinite="false"
  speed="300"
  slides-to-show="3"
  slides-to-scroll="3"
  responsive="[{
  breakpoint: 1024,
  settings: {
    slidesToShow: 3,
    slidesToScroll: 3,
    infinite: true,
    dots: true
  }
},
{
  breakpoint: 600,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 2
  }
},
{
  breakpoint: 480,
  settings: {
    slidesToShow: 2,
    slidesToScroll: 2
  }
}]"
>
    <div ng-repeat="item in $ctrl.items">
      <div class="thumbnail">
        <h6>category</h6>
        <h4>{{item.name}}</h4>
        <img src="http://placehold.it/300x200/" alt="Slide11" />
        <h6>
          {{item.price}} €
          <i class="fas fa-cart-arrow-down gray"></i>
        </h6>
      </div>
    </div>

</slick>

Answer 1

这解决了问题对于更改幻灯片内容，您必须将ng-if设置为销毁并初始化它

控制器：

    $scope.number = [{label: 1}, {label: 2}, {label: 3}, {label: 4}, {label: 5}, {label: 6}, {label: 7}, {label: 8}];
$scope.numberLoaded = true;
$scope.numberUpdate = function(){
    $scope.numberLoaded = false; // disable slick

    //number update

    $scope.numberLoaded = true; // enable slick
};

AngularJS的松弛响应轮播

1 个答案: