<!DOCTYPE html>
<html ng-app="slick-example">
<head>
<script data-require="angular.js@1.2.19" data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://vasyabigi.github.io/angular-slick/bower_components/slick-carousel/slick/slick.css" />
<script src="http://vasyabigi.github.io/angular-slick/bower_components/slick-carousel/slick/slick.js"></script>
<script src="angular-slick.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<h1>Hello Plunker!</h1>
<button type="button" ng-click="messItUp()">Mess it up</button>
<slick ng-if="dataLoaded" init-onload="false" data="dataLoaded" slides-to-show="3" dots="true">
<div ng-repeat="item in items">
<span>
<img ng-src="{{ item.imgSrc }}" alt="{{ item.label}}" />
</span>
<span>{{ item.label }}</span>
</div>
</slick>
</body>
</html>
var app = angular.module("slick-example", ["slick"]);
app.controller('appController', function($scope, $timeout){
$scope.items = [];
// simulate that the data is loaded from a remote source
$timeout(function(){
$scope.items = [
{
imgSrc: 'http://placekitten.com/325/325',
label: 'label 1'
},
{
imgSrc: 'http://placekitten.com/g/325/325',
label: 'label 2'
},
{
imgSrc: 'http://placekitten.com/325/325',
label: 'label 3'
},
{
imgSrc: 'http://placekitten.com/g/325/325',
label: 'label 4'
},
{
imgSrc: 'http://placekitten.com/325/325',
label: 'label 5'
},
{
imgSrc: 'http://placekitten.com/g/325/325',
label: 'label 6'
},
{
imgSrc: 'http://placekitten.com/325/325',
label: 'label 7'
},
{
imgSrc: 'http://placekitten.com/g/325/325',
label: 'label 8'
},
{
imgSrc: 'http://placekitten.com/325/325',
label: 'label 9'
}
];
// update the dataLoaded flag after the data has been loaded
// i dont know why but its important that the flag doesnt get initialized in an previous step like $scope.dataLoaded = false;
$scope.dataLoaded = true;
}, 2000);
$scope.messItUp = function(){
$scope.dataLoaded = false;
$scope.items = [
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 1'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 2'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 3'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 4'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 5'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 6'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 7'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 8'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 9'},
{imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 10'}
];
// the slick directive doesn't expose the reinit method to the public api
// so we trick it out with ng-include and ng-if attribute. we need to put it in the timeout function in order to get the prevoiusly elements completly removed.
// otherwise the old elements stay in the directive and the carousel breaks
$timeout(function(){
$scope.dataLoaded = true;
});
}
});
/* Styles go here */
'use strict';
angular.module('slick', []).directive('slick', [
'$timeout',
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();
}
}
};
}
]);