Linked Slideshow and Accordions

/*Downloaded from https://www.codeseek.co/007design/linked-slideshow-and-accordions-bBEVmd */
.slideshow {
  position: relative;
  width: 100%;
  text-align: center;
  height: 100px;
}
.slideshow .slide {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: left linear 2s,opacity linear 2s;
}
.slideshow .slide.ng-hide-add {
  left: 50%;
}
.slideshow .slide.ng-hide-add-active {
  left: 0%;
  opacity: 0;
}
.slideshow .slide.ng-hide-remove {
  left: 100%;
  opacity: 0;
}
.slideshow .slide.ng-hide-remove-active {
  left: 50%;
  opacity: 1;
}

.gradient-one {
  background-color: red;
}

.gradient-two {
  background-color: blue;
}

.gradient-three {
  background-color: blue;
}

.gradient-four {
  background-color: orange;
}

.accordions .accordion-content {
  height: 50px;
  transition: all linear 0.5s;
  border: 1px solid red;
}
.accordions .accordion-content.ng-hide-add {
  height: 50px;
}
.accordions .accordion-content.ng-hide-add-active {
  height: 0;
}
.accordions .accordion-content.ng-hide-remove {
  height: 0;
}
.accordions .accordion-content.ng-hide-remove-active {
  height: 50px;
}

/*Downloaded from https://www.codeseek.co/007design/linked-slideshow-and-accordions-bBEVmd */
angular.module('app', ['ngAnimate'])
.service('slideSvc', [function() {
  var scope = this;
  scope.slides = [];
  scope.accordions = [];
  scope.activeSlide = 0;
  scope.activeAccordion = 0;
  return scope;
}])
.directive('slideshow', ['$interval', '$timeout', 'slideSvc', function($interval, $timeout, slideSvc) {
  return {
    scope: true,
    restrict: 'C',
    link: function(scope, elem) {
      var firstRun = true;
      var doSlide = function() {
        slideSvc.slides[slideSvc.activeSlide].showSlide = false;
        slideSvc.activeSlide += 1;
        if (slideSvc.activeSlide >= slideSvc.slides.length)
          slideSvc.activeSlide = 0;
        slideSvc.slides[slideSvc.activeSlide].showSlide = true;                
      };
      var interval;
      scope.start = function() {
        interval = $interval(doSlide,3000);
      };
      scope.stop = function() {
        $interval.cancel(interval);
      };
      
      elem.on('mouseover', function() {
        scope.$apply(scope.stop);
      });
      elem.on('mouseout', function() {
        scope.$apply(scope.start);
      });
      scope.start();
    }
  };
}])
.directive('slide', ['slideSvc', function(slideSvc) {
  return {
    scope: true,
    restrict: 'C',
    link: function(scope, elem) {
      scope.accordionIndex = parseInt($.trim(elem.find('.accordion-index').text()));
      slideSvc.slides.push(scope);
      
      scope.gradient = 'gradient-'+$.trim(elem.find('.gradient-class').text())
      
      if (slideSvc.slides.length === 1)
        scope.showSlide = true;
    }
  };
}])
.directive('accordion', ['slideSvc', function(slideSvc) {
  return {
    scope: true,
    restrict: 'C',
    link: function(scope, elem) {
      var idx = slideSvc.accordions.length;
      slideSvc.accordions.push(scope);
      scope.$watch(function() {
        return slideSvc.activeSlide;
      }, function(s) {
        scope.show = slideSvc.slides[s].accordionIndex === idx;
      });
    }
  };
}]);