[英]Slick Carousel in angular js on json data not working
我使用這個程序github.com/vasyabigi/angular-slick 。 它不適用於動態數據。 它僅適用於靜態數據。 在動態數據中,它顯示的是水平方向的垂直圖像,沒有旋轉木馬。請幫助我。 這是我的事
directive('slick',function($timeout) { return {
restrict: "AEC",
scope: {
initOnload: "@",
data: "=",
currentIndex: "=",
accessibility: "@",
arrows: "@",
autoplay: "@",
autoplaySpeed: "@",
centerMode: "@",
centerPadding: "@",
cssEase: "@",
dots: "@",
draggable: "@",
easing: "@",
fade: "@",
infinite: "@",
lazyLoad: "@",
onBeforeChange: "@",
onAfterChange: "@",
onInit: "@",
onReInit: "@",
pauseOnHover: "@",
responsive: "&",
slide: "@",
slidesToShow: "@",
slidesToScroll: "@",
speed: "@",
swipe: "@",
touchMove: "@",
touchThreshold: "@",
vertical: "@"
},
link: function(scope, element, attrs) {
var initializeSlick, isInitialized;
initializeSlick = function() {
return $timeout(function() {
var currentIndex, slider;
slider = $(element);
if (scope.currentIndex != null) {
currentIndex = scope.currentIndex;
}
slider.slick({
accessibility: scope.accessibility !== "false",
arrows: scope.arrows !== "false",
autoplay: scope.autoplay === "true",
autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000,
centerMode: scope.centerMode === "true",
centerPadding: scope.centerPadding || "50px",
cssEase: scope.cssEase || "ease",
dots: scope.dots === "true",
draggable: scope.draggable !== "false",
easing: scope.easing || "linear",
fade: scope.fade === "true",
infinite: scope.infinite !== "false",
lazyLoad: scope.lazyLoad || "ondemand",
onBeforeChange: scope.onBeforeChange || null,
onAfterChange: function(sl, index) {
if (scope.onAfterChange) {
scope.onAfterChange();
}
if (currentIndex != null) {
return scope.$apply(function() {
currentIndex = index;
return scope.currentIndex = index;
});
}
},
onInit: function(sl) {
if (scope.onInit) {
scope.onInit();
}
if (currentIndex != null) {
return sl.slideHandler(currentIndex);
}
},
onReInit: scope.onReInit || null,
pauseOnHover: scope.pauseOnHover !== "false",
responsive: scope.responsive() || null,
slide: scope.slide || "div",
slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1,
slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1,
speed: scope.speed != null ? parseInt(scope.speed, 10) : 300,
swipe: scope.swipe !== "false",
touchMove: scope.touchMove !== "false",
touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5,
vertical: scope.vertical === "true"
});
return scope.$watch("currentIndex", function(newVal, oldVal) {
if ((currentIndex != null) && (newVal != null) && newVal !== currentIndex) {
return slider.slickGoTo(newVal);
}
});
});
};
if (scope.initOnload) {
isInitialized = false;
return scope.$watch("data", function(newVal, oldVal) {
if ((newVal != null) && !isInitialized) {
initializeSlick();
return isInitialized = true;
}
});
} else {
return initializeSlick();
}
} };});
有一個稱為init-onLoad的屬性,只需使其正確即可。
<slick init-onload=true data="awesomeThings">
...
</slick>
以防萬一,使用以下設置對您不起作用。
init-onload = true data =“ awesomeThings”
改用它。
ng-if =“ awesomeThings.length”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.