<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Linked Slideshow and Accordions</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-ng-app="app">
<div class="slideshow">
<div class="slide" data-ng-show="showSlide" data-ng-class="gradient">
<div class="ng-hide accordion-index">0</div>
<div class="ng-hide gradient-class">one</div>
Hello
</div>
<div class="slide" data-ng-show="showSlide" data-ng-class="gradient">
<div class="ng-hide accordion-index">1</div>
<div class="ng-hide gradient-class">two</div>
World
</div>
<div class="slide" data-ng-show="showSlide" data-ng-class="gradient">
<div class="ng-hide accordion-index">2</div>
<div class="ng-hide gradient-class">three</div>
Goodbye
</div>
<div class="slide" data-ng-show="showSlide" data-ng-class="gradient">
<div class="ng-hide accordion-index">1</div>
<div class="ng-hide gradient-class">four</div>
Something else
</div>
</div>
<div class="accordions">
<div class="accordion">
<div class="accordion-header" data-ng-click="show = !show">Hello</div>
<div class="accordion-content" data-ng-show="show">Lorem Ipsum</div>
</div>
<div class="accordion">
<div class="accordion-header" data-ng-click="show = !show">Hello</div>
<div class="accordion-content" data-ng-show="show">Lorem Ipsum</div>
</div>
<div class="accordion">
<div class="accordion-header" data-ng-click="show = !show">Hello</div>
<div class="accordion-content" data-ng-show="show">Lorem Ipsum</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*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;
});
}
};
}]);