<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Angular POCs - Altaf Shaik</title>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<link href="carousel.css" rel="stylesheet" />
<link href="carouselanimation.css" rel="stylesheet" />
<script src="app.js"></script>
<script src="carousel.js"></script>
</head>
<body ng-controller="mainController">
<div class="container-fluid">
<div class="jumbotron">
<h1>
myCarousel
</h1>
</div>
<my-carousel carousel-data="carouselData" auto-play circular-tiles></my-carousel>
<my-carousel carousel-data="carouselData2" circular-tiles circular-tiles-overlay></my-carousel>
<my-carousel carousel-data="carouselData3" auto-play></my-carousel>
</div>
</body>
</html>
(function (angular) {
'use strict';
var app = angular.module('app', ['ngAnimate']);
app.controller('mainController', ['$scope', mainController]);
function mainController($scope) {
$scope.carouselData = [
{
title: 'sample title',
shortDescription: 'short description for the sample carousel title. This description should not be more than three lines. If it is more than three lines, then it should be dotted at the end. ',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/10/18/09/09/fountain-197334_960_720.jpg',
id: 1
},
{
title: 'sample title 2',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/12/18/07/40/fountain-230138_960_720.jpg',
id: 2
},
{
title: 'sample title 3',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2014/02/06/18/35/fountain-260307_960_720.jpg',
id: 3
},
{
title: 'sample title 4',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2012/07/06/20/25/ston-51667_960_720.jpg',
id: 4
},
{
title: 'sample title 5',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/02/03/19/23/waterfall-77676_960_720.jpg',
id: 5
},
{
title: 'sample title 6',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/07/24/03/03/waterfall-166539_960_720.jpg',
id: 6
}];
$scope.carouselData2 = [
{
title: 'sample title',
shortDescription: 'short description for the sample carousel title. This description should not be more than three lines. If it is more than three lines, then it should be dotted at the end. ',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/10/18/09/09/fountain-197334_960_720.jpg',
id: 1
},
{
title: 'sample title 2',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/12/18/07/40/fountain-230138_960_720.jpg',
id: 2
},
{
title: 'sample title 3',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2014/02/06/18/35/fountain-260307_960_720.jpg',
id: 3
},
{
title: 'sample title 4',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2012/07/06/20/25/ston-51667_960_720.jpg',
id: 4
},
{
title: 'sample title 5',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/02/03/19/23/waterfall-77676_960_720.jpg',
id: 5
},
{
title: 'sample title 6',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/07/24/03/03/waterfall-166539_960_720.jpg',
id: 6
},
{
title: 'sample title 7',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/3.jpg',
id: 7
},
{
title: 'sample title 8',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/4.jpg',
id: 4
},
{
title: 'sample title 9',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/5.jpg',
id: 9
},
{
title: 'sample title 10',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/6.jpg',
id: 10
},
{
title: 'sample title 11',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/3.jpg',
id: 11
},
{
title: 'sample title 12',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/4.jpg',
id: 12
},
{
title: 'sample title 13',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/5.jpg',
id: 13
},
{
title: 'sample title 14',
shortDescription: 'short description for the sample title',
imgSrc: 'images/carousel/6.jpg',
id: 14
}];
$scope.carouselData3 = [
{
title: 'sample title',
shortDescription: 'short description for the sample carousel title. This description should not be more than three lines. If it is more than three lines, then it should be dotted at the end. ',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/10/18/09/09/fountain-197334_960_720.jpg',
id: 1
},
{
title: 'sample title 2',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2013/12/18/07/40/fountain-230138_960_720.jpg',
id: 2
},
{
title: 'sample title 3',
shortDescription: 'short description for the sample title',
imgSrc: 'https://pixabay.com/static/uploads/photo/2014/02/06/18/35/fountain-260307_960_720.jpg',
id: 3
}
];
};
})(window.angular);
body {
font-family:'Open Sans', serif;
color:#0076A8;
}
.my-carousel-container{
width:533px;
height:300px;
background-color:#fff;
overflow:hidden;
margin:20px auto 3px;
position:relative;
}
.my-carousel-element{
/*position:relative;*/
position:absolute;
height:100%;
width:100%;
}
.my-carousel-container img{
width:100%;
}
.my-carousel-element-data {
position: absolute;
height: 120px;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #86BC25;
padding: 10px 20px 40px 20px;
}
.my-carousel-element-data .my-carousel-element-title{
font-weight:500;
font-size:22px;
}
.my-carousel-element-data .my-carousel-element-description{
font-weight:200;
font-size:14px;
color:#E3E48D;
}
.my-carousel-buttons{
height:100%
}
.my-carousel-buttons .prev-btn{
left:20px
}
.my-carousel-buttons .next-btn{
right:20px;
}
.my-carousel-container > .my-carousel-play-pause{
position: absolute;
top: -40px;
height: 40px;
width: 60%;
left: 50%;
margin-left: -30%;
background-color: rgba(0,0,0,0.45);
text-align: center;
padding: 8px;
color: #ff006e;
font-size: 24px;
border-top:3px solid #ff006e;
border-radius: 0 0 8px 8px;
-moz-transition: top ease 0.35s;
-o-transition: top ease 0.35s;
-webkit-transition: top ease 0.35s;
transition: top ease 0.35s;
}
.my-carousel-container:hover > .my-carousel-play-pause {
top:0;
-moz-transition: top ease 0.35s;
-o-transition: top ease 0.35s;
-webkit-transition: top ease 0.35s;
transition: top ease 0.35s;
}
.my-carousel-play-pause .play-btn, .my-carousel-play-pause .pause-btn{
position: absolute;
margin: 2px -15px;
padding:3px;
cursor:pointer;
left:50%;
}
.my-carousel-buttons .next-btn, .my-carousel-buttons .prev-btn{
position: absolute;
height: 40px;
width: 40px;
background-color: rgba(0,0,0,0.45);
text-align: center;
top: 50%;
margin-top: -20px;
padding: 8px;
color:#ff006e;
font-size:24px;
border-radius:20px;
-moz-transition: all ease 0.35s;
-o-transition: all ease 0.35s;
-webkit-transition: all ease 0.35s;
transition: all ease 0.35s;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.my-carousel-buttons .next-btn:hover, .my-carousel-buttons .prev-btn:hover {
color: #000;
cursor: pointer;
background-color: rgba(255,255,255,0.45);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
-moz-transition: all ease 0.35s;
-o-transition: all ease 0.35s;
-webkit-transition: all ease 0.35s;
transition: all ease 0.35s;
}
.my-carousel-tile-container{
text-align:center;
}
.my-carousel-tile{
display:inline-block;
margin:4px;
background-color:#d0d0ce;
width:40px;
text-align:center;
padding:10px;
}
.my-carousel-tile:hover{
background-color:#0076A8;
color:#d0d0ce;
cursor:pointer;
}
.selectedOption{
background-color:#ff006e;
color:#d0d0ce;
}
/*For circular tiles - below styles are applied*/
[circular-tiles] .my-carousel-tile{
display:inline-block;
margin:3px;
border-radius:10px;
border:1px solid #ff006e;
text-align:center;
background-color:transparent;
height:10px;
width:10px;
padding:2px;
}
[circular-tiles] .my-carousel-tile:hover{
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
-moz-transition: all ease 0.35s;
-o-transition: all ease 0.35s;
-webkit-transition: all ease 0.35s;
transition: all ease 0.35s;
}
[circular-tiles] .selectedOption {
background-color: #ff006e;
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
-moz-transition: all ease 0.35s;
-o-transition: all ease 0.35s;
-webkit-transition: all ease 0.35s;
transition: all ease 0.35s;
}
[circular-tiles] .if-cirular-hide{
display:none;
}
[circular-tiles-overlay] .my-carousel-tile-container{
position: absolute;
left: 0;
right: 0;
margin: -25px auto;
}
This is a quick POC on AngularJS custom directive for a simple carousel with a couple of options.
How to use this directive?
1. Setup all the required libraries and custom carousel files as mentioned below
Take a look at index.html, Configure all the required libraries and custom scripts
you need Bootstrap for glyphicons and few other styling
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
Obvisouly Angular scripts - angular.js & angular-animate.js
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
Carousel styles (Which you can changes as per your need)
<link href="carousel.css" rel="stylesheet" />
Carouselanimation styles (Which you can changes as per your need)
<link href="carouselanimation.css" rel="stylesheet" />
main app.js
<script src="app.js"></script>
directive carousel.js
<script src="carousel.js"></script>
Setup the ng-app and controller (refer to index.html)
2. Configure the use the carousel directive with its options
<my-carousel carousel-data="carouselData" auto-play></my-carousel>
Directive element:
<my-carousel></my-carousel>
Directive attributes:
carousel-data="carouselData" - Use this to fetch the json data with isolated scope (refer to app.js)
auto-play - add this to auto play the carousel
(function () {
'use strict';
var app = angular.module('app');
app.directive('myCarousel', myCarouselDirective);
function myCarouselDirective($interval) {
return {
restrict: 'E',
templateUrl: 'carousel.html',
scope:{
carouselData: '='
},
link: function (scope, el, attrs) {
scope.playbtnActive = false;
if (attrs['autoPlay'] != undefined) {
scope.startInterval();
}
},
controller: function ($scope) {
$scope.count = 0;
var intervalPromise;
$scope.stopInterval = function () {
$interval.cancel(intervalPromise);
$scope.playbtnActive = false;
};
$scope.startInterval = function () {
$scope.stopInterval();
$scope.playbtnActive = true;
intervalPromise = $interval(function () {
console.log('interval activated..');
$scope.selectedElement($scope.count);
$scope.count += 1;
if ($scope.count >= $scope.carouselData.length) {
$scope.count = 0;
$interval.cancel();
};
}, 1500);
};
if ($scope.carouselData) {
$scope.carouselData[0].active = true;
$scope.preActive = false;
$scope.nextActive = true;
$scope.btnDisplay = true; //make it true for Next, Prev buttons
$scope.carouselData[$scope.count].selectedItem = true;
// $scope.startInterval();
};
$scope.nextElement = function () {
$scope.count += 1;
if ($scope.carouselData[$scope.count]) {
$scope.selectedElement($scope.count);
} else {
$scope.count -= 1;
}
// console.log($scope.carouselData[count]);
}
$scope.prevElement = function () {
$scope.count -= 1;
if ($scope.carouselData[$scope.count]) {
$scope.selectedElement($scope.count);
} else {
$scope.count += 1;
}
}
$scope.selectedElement = function (i) {
if ($scope.carouselData[i]) {
var selectedItem = false;
angular.forEach($scope.carouselData, function (value, key) {
//console.log(key + ':' + value);
value.active = false;
value.selectedItem = false;
});
$scope.carouselData[i].selectedItem = true
$scope.carouselData[i].active = true;
$scope.count = i;
if ($scope.carouselData[i - 1]) {
$scope.prevActive = true;
} else {
$scope.prevActive = false;
}
if ($scope.carouselData[i + 1]) {
$scope.nextActive = true;
} else {
$scope.nextActive = false;
}
}
}
}
}
};
})();
<div>
<div class="my-carousel-container">
<div ng-repeat="el in carouselData">
<div ng-show='el.active' class="my-carousel-element">
<img ng-src={{el.imgSrc}} />
<div class="my-carousel-element-data">
<div class="my-carousel-element-title">{{el.title}}</div>
<div class="my-carousel-element-description">{{el.shortDescription}}</div>
</div>
</div>
</div>
<div class="my-carousel-buttons" ng-show="btnDisplay">
<div class="glyphicon glyphicon-menu-left prev-btn" ng-click="prevElement()" ng-show="prevActive"></div>
<div class="glyphicon glyphicon-menu-right next-btn" ng-click="nextElement()" ng-show="nextActive"></div>
</div>
<div class="my-carousel-play-pause">
<span class="glyphicon glyphicon-play play-btn" ng-click="startInterval()" ng-show="!playbtnActive"></span>
<span class="glyphicon glyphicon-pause pause-btn" ng-click="stopInterval()" ng-show="playbtnActive"></span>
</div>
</div>
<div class="my-carousel-tile-container">
<!--
<div class="my-carousel-tile-container" circular-tiles circular-tiles-overlay>
1. add parameter circular-tiles to apply circular tile without numbers
2. add circular-tiles-overlay to overlay the circular tiles on the carousel
-->
<div ng-repeat="el in carouselData" class="my-carousel-tile" ng-class="{selectedOption:el.selectedItem}" ng-click="selectedElement($index)"><span class="if-cirular-hide">{{$index+1}}</span></div>
</div>
</div>
/* when showing the picture */
.ng-hide-remove {
-moz-animation: 0.5s flipInX ease;
-o-animation: 0.5s flipInX ease;
-webkit-animation: 0.5s flipInX ease;
animation: 0.5s flipInX ease;
}
/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
@keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-o-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-o-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-moz-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-o-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-moz-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-o-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-moz-transform: perspective(400px);
-ms-transform: perspective(400px);
-o-transform: perspective(400px);
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}