Slick Carousel Angular-动态数据加载 [英] Slick Carousel Angular - dynamic data loading

问题描述

当我使用动态数据加载平滑内容时，所有图像都一个接一个。我不知道为什么会这样。我该如何解决？看起来DOM本身需要数据。

When I use dynamic data to load the slick content, all the images come one below the other. I do not know why it happens. How do I resolve it? Looks like DOM needs data at initialization itself.

视图：

<slick infinite=true slides-to-show=3 slides-to-scroll=3 settings="slickConfig" data="images">
    <div class="slick-item" ng-repeat="image in images">
        <div class="Slide-Id">
            <p class="slide-id">{{images.indexOf(image)+1}}/{{images.length}}</p>
        </div>
        <img src="{{image.url}}" height="100px" width="100px" />
    </div>
</slick>

// $scope.images = [ {
      //     url: '../../images/qr-code.png'
      //   }, {
      //     url: '../../images/qr-code.png'
      //   }, {
      //     url: '../../images/qr-code.png'
      //   }, {
      //     url: '../../images/qr-code.png'
      //   }, {
      //     url: '../../images/qr-code.png'
      //   }];
	  
	  //Hard coded values above loads properly as expected. But if it comes from server and then,
	  //it loads one below the other.
	  
	  
	  $scope.images = [];

        $scope.slickConfig = {
        //enabled: true,
        //autoplay: false,
        //draggable: true,  
       // method: {},
        arrows: false,
        //centerMode:true,
        //variableWidth: true,
        event: {
            beforeChange: function (event, slick, currentSlide, nextSlide) {
            },
            afterChange: function (event, slick, currentSlide, nextSlide) {
            }
        }
      };
	  
	  ...
				var data = ServiceFactory.getEventDetails();
				data
                 .then(onAuthenticated )
                 .catch(onRejectedRequest)
                 .finally(sessionServiceFinally);
				 
				 ....
				 
				 onAuthenticated(resp){
					 console.log("vm.tickets[i].images.." + resp[0].images);
					  $scope.images.push({url : resp[0].images});
					  $scope.images.push({url : resp[0].images});
					  $scope.images.push({url : resp[0].images});
					
				 }
	  

推荐答案

我终于最终使用ng-if解决了这个问题：）

I finally ended up using ng-if for this one to resolve :)

这篇关于Slick Carousel Angular-动态数据加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！