(function () { 'use strict'; angular.module('ng-slide-fade', []) .directive('imageSlide', ["$interval", "$timeout", function ($interval, $timeout) { return { restrict: 'A', scope: { time: '=' }, link: function (scope, element, attr) { element.css('position', 'relative'); $timeout(function() { element.children().hide(); element.children().first().show(); if (element.children().length<=1) {return} var max=8000, min=5000; var intrvl= Math.floor(Math.random() * (max - min + 1)) + min; $interval(function() { element.children().first().next().fadeIn(300); var first = element.children().first().fadeOut(300).detach(); element.append(first); },intrvl) }) } } }]) .directive('slideFade',['$interval', function ($interval) { function link(scope, element ,attr){ //Set your interval time. 4000 = 4 seconds scope.setTime = attr.slideTime ? parseInt(attr.slideTime) : 4000; scope.showLabel = attr.showLabel == 'false' ? false : true; //Pagination dots - gets number of images console.log('images in slide', scope.images) if (!scope.images) {return} scope.large = attr.type=='large' ? true : false; scope.numberOfImages = scope.images.length; if (!scope.numberOfImages || scope.numberOfImages == 1) { scope.hidePagination=true; } scope.dots = function(num) { return new Array(num); }; //Pagination - click on dots and change image scope.selectedImage = 0; scope.setSelected = function (idx) { scope.stopSlider(); scope.selectedImage = idx; }; //Slideshow controls scope.sliderBack = function() { scope.stopSlider(); scope.selectedImage === 0 ? scope.selectedImage = scope.numberOfImages - 1 : scope.selectedImage--; }; scope.sliderForward = function() { scope.stopSlider(); scope.autoSlider(); }; scope.autoSlider = function (){ scope.selectedImage < scope.numberOfImages - 1 ? scope.selectedImage++ : scope.selectedImage = 0; }; scope.stopSlider = function() { $interval.cancel(scope.intervalPromise); scope.activePause = true; scope.activeStart = false; }; scope.toggleStartStop = function() { if(scope.activeStart) { scope.stopSlider(); } else { scope.startSlider(); } }; scope.startSlider = function(){ scope.intervalPromise = $interval(scope.autoSlider, scope.setTime); scope.activeStart = true; scope.activePause = false; }; scope.startSlider(); scope.show = function(idx){ if (scope.selectedImage==idx) { return "show"; } }; } return { restrict: 'E', scope: { images: '=' }, template: '