слабая отзывчивая карусель с angularjs - PullRequest
Новая
       3

слабая отзывчивая карусель с angularjs

0 голосов
/ 10 января 2020

Я использую слабую реагирующую карусель, чтобы показать элементы, эти элементы взяты из массива $ ctrl.items, и я до сих пор использую ng-repeat внутри этой слабой карусели. Она работает нормально, проблема в том, что когда я нажимаю любую кнопку, которая изменяет элементы внутри массива $ ctrl.items slack начинает просматривать элементы по вертикали, и если я изменил ширину экрана на экран большего или меньшего размера, проблема исчезает, и ползунок снова работает нормально 

<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>

1 Ответ

0 голосов
/ 10 января 2020

это решило проблему. Для изменения содержания слайдов вы должны установить 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
};
...