dhindurthy/angular-carousel.html

## angular-carousel.html
<!DOCTYPE html>
<html>
<head>
	<title>Angular arousel</title>
	<meta name="description" content="Carousel using AngularJS and animate">
	<meta name="keywords" content="HTML5, CSS3, AngularJS, JavaScript, Angular-Animate">
	<meta name="author" content="Dhiraj Indurthy">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>

		.item {
			display:flex;
			align-items: center;
			justify-content: center;
		}

		/*start*/
		.carousel {
			display:flex;
			align-items: center;
			justify-content: center;
		}
		ul li {
			display: inline;
		}

		.carousel-list {
			width:80px;
			padding: 0;
			margin: 20px;
		}

		.carousel-list-item {
			margin-left: 20px;
			margin-right: 20px;
		    position: relative;
		    top: 0;
		    /*left: 5;*/
		    width: 40px;
		    opacity:1;
		}

		icon {
			width:20px;
			padding: 20px;
			background-color:yellow;
			cursor: pointer;
		}

		/* For the NEXT button */
				/* The starting CSS styles for the enter animation */
				.next-list-item.ng-enter {
				  transition:2s linear all;
				  left:-150;
				  opacity:0;
				}

				/* The finishing CSS styles for the enter animation */
				.next-list-item.ng-enter.ng-enter-active {
				  left: -65;
				  opacity: 1;
				}

				/* The starting CSS styles for the leave animation */
				.next-list-item.ng-leave {
				  transition:2s linear all;
				  left: 5;
				  opacity: 1;
				}

				/* The finishing CSS styles for the leave animation */
				.next-list-item.ng-leave.ng-leave-active {
					left:75;
				  opacity:0;
				}
		/* For the NEXT button */

		/* For the PREV button */
				/* The starting CSS styles for the enter animation */
				.prev-list-item.ng-enter {
				  transition:3s linear all;
				  left:75;
				  opacity:0;
				}

				/* The finishing CSS styles for the enter animation */
				.prev-list-item.ng-enter.ng-enter-active {
				  left: 5;
				  opacity: 1;
				}

				/* The starting CSS styles for the leave animation */
				.prev-list-item.ng-leave {
				  transition:3s linear all;
				  left: -65;
				  opacity: 1;
				}

				/* The finishing CSS styles for the leave animation */
				.prev-list-item.ng-leave.ng-leave-active {
					left:-150;
				  opacity:0;
				}
		/* For the PREV button */
		/**end**/
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
</head>
<body>
	<section ng-app="template" class="container">
		<section ng-controller="templateController as main" class="app item">
			<!--start-->
			<div class="carousel">
				<icon ng-click="main.showPrevious()" ng-mouseover="main.setPrev()" ><</icon>
				<ul class="carousel-list">
					<li  ng-repeat="person in main.names track by $index" ng-if="person.show" class="carousel-list-item ng-class:{'prev-list-item':person.left, 'next-list-item':person.right};" >{{person.name}}</li>
				</ul>
				<icon ng-click="main.showNext()" ng-mouseover="main.setNext()">></icon>
			</div>
			<!--end-->
		</section>
</section>

</body>
<script>

	angular.module('template', ['ngAnimate'])
    .controller('templateController', ['$scope', '$q', function($scope, $q) {
    	/**start**/
			this.names = [{
			    "name":"Deer",
			    "age":30
			},{
			    "name":"Dog",
			    "age":30
			},{
			    "name":"Pig",
			    "age":30
			},{
			    "name":"Cat",
			    "age":30
			},{
			    "name":"Cow",
			    "age":30
			}];

			this.showInitial = function() {
				let names = this.names;
				for (var i=0; i<names.length; i++) {
					let person = names[i];
					if (i===0) {
						person.show=true;
						person.right=true;
					} else {
						person.show = false;
						person.left=false;
						person.right=false;
					}
				}
				console.log(names);
				this.names = names;
				this.index  = 0;

			};
			this.showInitial();

			this.showLast = function() {
				let names = this.names;
				for (var i=0; i<names.length; i++) {
					let person = names[i];
					if (i===names.length-1) {
						person.show=true;
						person.left=true;
					} else {
						person.show = false;
						person.left=false;
						person.right=false;
					}
				}
				console.log(names);
				this.names = names;
				this.index  = names.length-1;
			};

			this.showNext=function() {

				let names = this.names;
				let newIndex = this.index +1;
				console.log('new index is ' + newIndex);
				if(newIndex!== names.length){
					for (var i=0; i<names.length; i++) {
						let person = names[i];
						if (newIndex===i) {
							person.show=true;
							person.right=true;
							this.index = this.index+1;
						} else {
							person.show = false;
							person.left=false;
							person.right=false;
						}
					}
				} else if(newIndex=== names.length){
					console.log('going to intial situatrion');
					this.showInitial();
				}
			};


			this.showPrevious = function(index) {

				let names = this.names;
				let newIndex = this.index -1;
				if(newIndex<0){
					this.showLast();
				} else if(newIndex>=0 ){
					for (var i=0; i<names.length; i++) {
						let person = names[i];
						if (newIndex===i) {
							person.show=true;
							person.left=true;
							this.index = this.index-1;
						} else {
							person.show = false;
							person.left=false;
							person.right=false;
						}
					}
				}
			}

			this.setPrev = function(){
				var listitem = document.getElementsByClassName("carousel-list-item");
				let element = angular.element(listitem);
				element.addClass("prev-list-item");
				element.removeClass("next-list-item");
			}

			this.setNext = function(){
				var listitem = document.getElementsByClassName("carousel-list-item");
				let element = angular.element(listitem);
				element.addClass("next-list-item");
				element.removeClass("prev-list-item");
			}
		/**end**/
		}]);
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular arousel</title>
	<meta name="description" content="Carousel using AngularJS and animate">
	<meta name="keywords" content="HTML5, CSS3, AngularJS, JavaScript, Angular-Animate">
	<meta name="author" content="Dhiraj Indurthy">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>

	.item {
	display:flex;
	align-items: center;
	justify-content: center;
	}

	/start/
	.carousel {
	display:flex;
	align-items: center;
	justify-content: center;
	}
	ul li {
	display: inline;
	}

	.carousel-list {
	width:80px;
	padding: 0;
	margin: 20px;
	}

	.carousel-list-item {
	margin-left: 20px;
	margin-right: 20px;
	position: relative;
	top: 0;
	/left: 5;/
	width: 40px;
	opacity:1;
	}

	icon {
	width:20px;
	padding: 20px;
	background-color:yellow;
	cursor: pointer;
	}

	/* For the NEXT button */
	/* The starting CSS styles for the enter animation */
	.next-list-item.ng-enter {
	transition:2s linear all;
	left:-150;
	opacity:0;
	}

	/* The finishing CSS styles for the enter animation */
	.next-list-item.ng-enter.ng-enter-active {
	left: -65;
	opacity: 1;
	}

	/* The starting CSS styles for the leave animation */
	.next-list-item.ng-leave {
	transition:2s linear all;
	left: 5;
	opacity: 1;
	}

	/* The finishing CSS styles for the leave animation */
	.next-list-item.ng-leave.ng-leave-active {
	left:75;
	opacity:0;
	}
	/* For the NEXT button */

	/* For the PREV button */
	/* The starting CSS styles for the enter animation */
	.prev-list-item.ng-enter {
	transition:3s linear all;
	left:75;
	opacity:0;
	}

	/* The finishing CSS styles for the enter animation */
	.prev-list-item.ng-enter.ng-enter-active {
	left: 5;
	opacity: 1;
	}

	/* The starting CSS styles for the leave animation */
	.prev-list-item.ng-leave {
	transition:3s linear all;
	left: -65;
	opacity: 1;
	}

	/* The finishing CSS styles for the leave animation */
	.prev-list-item.ng-leave.ng-leave-active {
	left:-150;
	opacity:0;
	}
	/* For the PREV button */
	/end/
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
	</head>
	<body>
	<section ng-app="template" class="container">
	<section ng-controller="templateController as main" class="app item">
	<!--start-->
	<div class="carousel">
	<icon ng-click="main.showPrevious()" ng-mouseover="main.setPrev()" ><</icon>
	<ul class="carousel-list">
	<li ng-repeat="person in main.names track by $index" ng-if="person.show" class="carousel-list-item ng-class:{'prev-list-item':person.left, 'next-list-item':person.right};" >{{person.name}}</li>
	</ul>
	<icon ng-click="main.showNext()" ng-mouseover="main.setNext()">></icon>
	</div>
	<!--end-->
	</section>
	</section>

	</body>
	<script>

	angular.module('template', ['ngAnimate'])
	.controller('templateController', ['$scope', '$q', function($scope, $q) {
	/start/
	this.names = [{
	"name":"Deer",
	"age":30
	},{
	"name":"Dog",
	"age":30
	},{
	"name":"Pig",
	"age":30
	},{
	"name":"Cat",
	"age":30
	},{
	"name":"Cow",
	"age":30
	}];

	this.showInitial = function() {
	let names = this.names;
	for (var i=0; i<names.length; i++) {
	let person = names[i];
	if (i===0) {
	person.show=true;
	person.right=true;
	} else {
	person.show = false;
	person.left=false;
	person.right=false;
	}
	}
	console.log(names);
	this.names = names;
	this.index = 0;

	};
	this.showInitial();

	this.showLast = function() {
	let names = this.names;
	for (var i=0; i<names.length; i++) {
	let person = names[i];
	if (i===names.length-1) {
	person.show=true;
	person.left=true;
	} else {
	person.show = false;
	person.left=false;
	person.right=false;
	}
	}
	console.log(names);
	this.names = names;
	this.index = names.length-1;
	};

	this.showNext=function() {

	let names = this.names;
	let newIndex = this.index +1;
	console.log('new index is ' + newIndex);
	if(newIndex!== names.length){
	for (var i=0; i<names.length; i++) {
	let person = names[i];
	if (newIndex===i) {
	person.show=true;
	person.right=true;
	this.index = this.index+1;
	} else {
	person.show = false;
	person.left=false;
	person.right=false;
	}
	}
	} else if(newIndex=== names.length){
	console.log('going to intial situatrion');
	this.showInitial();
	}
	};


	this.showPrevious = function(index) {

	let names = this.names;
	let newIndex = this.index -1;
	if(newIndex<0){
	this.showLast();
	} else if(newIndex>=0 ){
	for (var i=0; i<names.length; i++) {
	let person = names[i];
	if (newIndex===i) {
	person.show=true;
	person.left=true;
	this.index = this.index-1;
	} else {
	person.show = false;
	person.left=false;
	person.right=false;
	}
	}
	}
	}

	this.setPrev = function(){
	var listitem = document.getElementsByClassName("carousel-list-item");
	let element = angular.element(listitem);
	element.addClass("prev-list-item");
	element.removeClass("next-list-item");
	}

	this.setNext = function(){
	var listitem = document.getElementsByClassName("carousel-list-item");
	let element = angular.element(listitem);
	element.addClass("next-list-item");
	element.removeClass("prev-list-item");
	}
	/end/
	}]);
	</script>
	</html>