angularProject/app/directives/mainSlider.js

app.directive('mainSlider',['$interval','$timeout',function($interval,$timeout){
  return {
    restrict: 'E',
    scope: {},
    replace: true,
    templateUrl: './app/views/main-slider.html',
    controller: function($scope){
      var backOverlay = angular.element(document.querySelector('.main-slider-back-overlay'));
      $timeout(function(){
        backOverlay.css('transform', 'translateX(-100%)');
      },10)

      $scope.currentSlide = 0;
      $scope.canIClick = true;
      $scope.slides = [
        'content/images/main-page-slider-image1.jpg',
        'content/images/main-page-slider-image2.jpg',
        'content/images/main-page-slider-image3.jpg'
      ]


      var runInterval = function(){
        $scope.sliderInterval = $interval(function(){
          $scope.canIClick = false;
          $timeout(function(){
            $scope.canIClick = true;
          },3000)
          if($scope.currentSlide == $scope.slides.length - 1){
            $scope.currentSlide = 0;
          } else{
            $scope.currentSlide++;
          }
        },7000)
      }
      runInterval();

      $scope.selectImage = function(imageUrl){
        if($scope.canIClick){
          $scope.canIClick = false;
          $scope.currentSlide = $scope.slides.indexOf(imageUrl);
          $interval.cancel($scope.sliderInterval);
          runInterval();
          $timeout(function(){
            $scope.canIClick = true;
          },3000)
        }
      }
    }
  }
}]);