Hey there! I'm currently using the slick carousel by ken wheeler, but when I implement ng-repeat on the div, it only shows 'listed images'.
I'm not sure what I'm doing wrong here. Any ideas?
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</section>
I've tried the suggested solutions provided in angular slick, but even though it's slightly different, the images still aren't displaying properly. It works perfectly fine without ng-repeat.
The rendered output looks like this image
This is my controller:
$scope.single_product = function (product_id) {
$http.get('abc',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000
});
})
.error(function (data) {
console.log(data);
});
};
I have included slick.css, slick-theme.css, and slick.js. You can find all the necessary files here.