<!DOCTYPE html>
<html ng-app="MyApplication">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.5.0-beta.2/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0-beta.2/angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ApplicationController as app">
<div class="banner-container">
<img ng-src="{{ app.currentBannerImage }}"
class="animate-banner"
ng-animate-swap="app.currentBannerImage" />
</div>
</body>
</html>
angular.module('MyApplication', ['ngAnimate'])
.controller('ApplicationController', ['$interval', function($interval) {
var banners = [
'http://ng-slides.appspot.com/ng-animate-swap-demo/Banner1.jpg',
'http://ng-slides.appspot.com/ng-animate-swap-demo/Banner2.jpg',
'http://ng-slides.appspot.com/ng-animate-swap-demo/Banner3.jpg'
];
var index = 0, self = this;
this.setBanner = function(i) {
self.currentBannerImage = banners[index];
};
this.setBanner(0);
$interval(function() {
index++;
index = index % banners.length;
self.setBanner(index);
}, 3000);
}])
html {
padding:0;
margin:0;
}
body {
padding:20% 0;
}
.banner-container {
height:200px;
width:500px;
overflow:hidden;
margin:0 auto;
border:5px solid black;
position:relative;
}
.animate-banner.ng-enter, .animate-banner.ng-leave {
position:absolute;
top:0;
left:0;
right:0;
height:100%;
transition:1s ease-out all;
}
.animate-banner.ng-enter {
opacity: 0.3;
left:-100%;
}
.animate-banner.ng-enter-active {
opacity: 1;
left:0;
}
.animate-banner.ng-leave {
opacity:1;
left:0%;
}
.animate-banner.ng-leave-active {
opacity:0.3;
left:100%;
}