<!DOCTYPE html>
<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="hrisCarousel">
<div ng-controller="hrisCarouselCtrl">
<h1>{{title}}</h1>
<hr/>
<div hris-carousel></div>
<hr/>
<button ng-click="addNew()">Add</button>
<hr/>
<h1>footer</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.js"></script>
<script>
var hrisCarousel = angular.module('hrisCarousel', ['ngAnimate', 'ngSanitize']);
hrisCarousel.run(function($templateCache) {
$templateCache.put('templateId.html');
});
hrisCarousel.controller('hrisCarouselCtrl', ['$scope', function($scope) {
$scope.title = 'My Carousel';
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.slides = [{
"id": 15,
"title": "Request a Replacement HRA Photo ID",
"content": "Send your request if your HRA ID is Damamged and/or Lost",
"imageURL": "https://prod.citytime.nycnet/proxy/images/ctbanner.gif",
"link": "http://www.petmd.com/sites/default/files/skin-cancer-cats.jpg"
}, {
"id": 14,
"title": "HRA Job Vacancies",
"content": "Click on <a href='http://hraedocs.hra.nycnet/HRAeDocs/DocumentFunctions/DocumentDirectAccess.aspx?DocId=db487469-7f72-44e7-88bc-10567dd88cb8'>“Read More”</a> to view HRA Job Vacancies.",
"imageURL": "http://www.petmd.com/sites/default/files/skin-cancer-cats.jpg",
"link": "http://hraedocs.hra.nycnet/HRAeDocs/DocumentFunctions/DocumentDirectAccess.aspx?DocId=db487469-7f72-44e7-88bc-10567dd88cb8"
}, {
"id": 22,
"title": "Test1",
"content": "Actually this is a big big and big content",
"imageURL": "http://www.petmd.com/sites/default/files/skin-cancer-cats.jpg",
"link": null
}, {
"id": 24,
"title": "CEB",
"content": "Unlock the potential of organizations and leaders by advancing the science and practice of management",
"imageURL": "http://www.petmd.com/sites/default/files/skin-cancer-cats.jpg",
"link": "https://www.cebglobal.com/"
}];
var counter = 50;
$scope.addNew = function() {
counter++;
$scope.slides.push({
"id": counter,
"title": counter,
"content": counter + " fish",
"imageURL": "http://pngimg.com/upload/fish_PNG11" + counter + ".png",
"link": "https://www.cebglobal.com/"
})
};
}]);
hrisCarousel.run(['$templateCache', function($templateCache) {
$templateCache.put('templateCarousel.html',
" <div class=\"hris-carousel-frame\"> " +
" <div ng-repeat=\"slide in slides track by $index\"> " +
" <div class=\"hris-carousel-slide\" ng-show=\"slide._active === true\"> " +
" <div> " +
" <img class=\"hris-carousel-image\" src=\"{{slide.imageURL}}\" alt=\"\"> " +
" <div class=\"hris-carousel-title\"> " +
" <span>{{slide.title}}</span> " +
" </div> " +
" <div class=\"hris-carousel-content\"> " +
" <span ng-bind-html=\"slide.content\"></span> " +
" <span ng-if=\"!!slide.link\"><a class=\"hris-carousel-link\" ng-href=\"slide.link\"> More ... </a>{{slide.imageURL}}</span> " +
" </div> " +
" </div> " +
" </div> " +
" </div> " +
" <div class=\"hris-carousel-indicators\"> " +
" <ul ng-repeat=\"s in slides track by $index\"> " +
" <li> " +
" <a href=\"#\" ng-class=\"{'hris-carousel-active-index': active === s._index, 'hris-carousel-inactive-index': active !== s._index }\" ng-click=select(s._index) class=\"hris-carousel-paging\"></a> " +
" </li> " +
" </ul> " +
" </div> " +
" </div>")
}]);
hrisCarousel.directive('hrisCarousel', function($animate, $interval, $templateCache) {
return {
restrict: 'A',
scope: true,
templateUrl: 'templateCarousel.html',
link: function(scope, element, attrs) {
var startTimer = null;
scope.$watchCollection("slides", function(newArray) {
scope.slides = newArray;
prepare();
});
var prepare = function() {
var counter = 0;
if (startTimer !== undefined && startTimer !== null) {
stop();
}
angular.forEach(scope.slides, function(data) {
counter++;
data._active = false;
data._index = counter;
});
scope.select(1);
start();
}
scope.select = function(index) {
if (scope.slides.length >= index && index > 0) {
scope.active = index;
showActive();
}
}
var start = function() {
startTimer = $interval(changeSlide, scope.myInterval);
}
var stop = function() {
$interval.cancel(startTimer);
}
var showActive = function() {
angular.forEach(scope.slides, function(data) {
data._active = false;
if (data._index === scope.active)
data._active = true;
});
}
var changeSlide = function() {
if (scope.active === scope.slides.length)
scope.active = 1
else
scope.active++;
showActive();
};
element.on('mouseover', function() {
stop();
});
element.on('mouseleave', function() {
start();
});
element.on('$destroy', function() {
$interval.cancel(changeSlide);
});
}
}
});
</script>
</body>
</html>
// Code goes here
/* Styles go here */
/* Styles go here */
.hris-carousel-frame {
position: relative;
min-height: 208px;
max-width: 408px;
width: 100%;
}
.hris-carousel-image {
max-width: 100px;
max-height: 100px;
margin: 6px;
border-radius: 5px;
width: 40%;
}
.hris-carousel-slide {
border-radius: 5px;
border: 1px solid none;
position: absolute;
top: 0px;
left: 0;
max-width: 400px;
width: 100%;
max-height: 200px;
height: 100%;
margin: 3px;
display: inline-block;
}
.hris-carousel-slide.ng-hide-add {
-webkit-transition: 1s ease-out all;
transition: 1s ease-out all;
transform: translateX(0px);
}
.hris-carousel-slide.ng-hide-remove {
-webkit-transition: 1s ease all;
transition: 1s ease all;
transform: translateX(0px);
}
.hris-carousel-slide.ng-hide {
transform: translateX(-500px);
}
.hris-carousel-indicators {
position: absolute;
bottom: 10px;
left: 25%;
z-index: 15;
width: 60%;
padding-left: 0;
text-align: center;
}
.hris-carousel-indicators ul li {
float: left;
list-style: none;
font-size: 20px;
}
.hris-carousel-indicators ul li a {
display: block;
}
.hris-carousel-title {
width: 60%;
position: absolute;
top: 24px;
right: 10%;
}
.hris-carousel-content {
width: 90%;
position: absolute;
top: 90px;
left: 10px;
padding: 3px;
text-align: justify;
}
.hris-carousel-title span {
font-size: 18px;
font-weight: bold;
}
.hris-carousel-active-index {
border-color: royalblue;
}
.hris-carousel-inactive-index {
border-color: silver;
}
.hris-carousel-paging {
border-width: 4px;
border-style: solid;
margin: 3px;
border-radius: 4px;
}
.hris-carousel-link {
text-decoration: none;
color: royalblue;
padding: 3px;
}