I am trying to build animation slider and I found similar question here
But that answer does not work in IE 8.
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
<!DOCTYPE html>
<htm ng-app>
<head>
<script data-require="[email protected]" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Advent+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="withinheader">
this is header
</div>
</div>
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<p>Slider's are amazing1!</p>
</div>
<div class="slider-content" ng-switch-when="2">
<p>Slider's are amazing2!</p>
</div>
<div class="slider-content" ng-switch-when="3">
<p>Slider's are amazing3!</p>
</div>
<div class="slider-content" ng-switch-when="4">
<p>Slider's are amazing4!</p>
</div>
</div>
<div id="mainbody">
this is body
</div>
</body>
</html>
body{
background-image:url('../asset/background.png');
background-repeat: repeat;
margin: 0%;
font-family: 'Advent Pro', sans-serif;
}
.slideshow {
font-family: "Arial", sans-serif;
text-align: center;
position:relative;
width:600px;
overflow:hidden;
background: #1a1a1a;
margin: 0 auto;
color: white;
text-shadow: 1px 1px 1px #000;
border-radius: .3em;
margin-top: 30px;
}
#header {
background-color: #FFFFFF;
width:100%;
height:100px;
border-bottom: 4px solid #EE514B;
}
#withinheader {
width:60%;
margin: 0 auto;
height: 100px;
}
.imageslide{
width:600px;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
overflow:hidden;
position:relative;
text-align: center;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-enter.animate-enter-active {
left:0;
}
.animate-leave {
left:0;
}
.animate-leave.animate-leave-active {
margin-left:-100%;
}
#mainbody {
background-color: #FFFFFF;
width:50%;
min-height:1024px;
height: auto;
border-radius: 5px;
border: 1px solid #EEEEEE;
margin: 0 auto;
}
My application is using angular js version 1.2.14. How to same animation using angular js version 1.2.14 (or 1.2+)
thanks in advance
