Angular: Empty Fiddle

http://angularjs.org/

by Christian Bonato

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div>
    
<div class="frame">
    <div id="CSS3Slideshow">
        
	<img class="img1" src="http://rollingout.com/wp-content/uploads/2013/06/prince.jpg">
        
    <img class="img2" src="http://static.guim.co.uk/sys-images/Music/Pix/pictures/2011/6/3/1307115506503/Prince-performing-on-stag-007.jpg">
                                                					               <img class="img3" src="http://static.gigwise.com/artists/wenn5148053prince.jpg">
                                                                        					<img class="img4" src="http://soniceditions.com/library/prince-2ICP_o_tn.jpg">
	</div>
</div>   

    
</div>

CSS

.frame{
            height: 100vh;
			max-height: 100vh;
			min-height: 100vh;
			overflow:hidden;
               width:100%;
			position: relative;
}

@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(0px,0px); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px); } 
}

@-webkit-keyframes fade_start_opaque {
	0% { opacity:0; -webkit-transform:translate(0px,0px); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px); } 
}

@-webkit-keyframes fade_start_opaque_alt {
	0% { opacity:0; -webkit-transform:translate(0px,0px); }
	// 3% { opacity:1;  }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px); } 
}


@-moz-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(0px,0px); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -moz-transform:translate(0px,0px); } 
}

@-moz-keyframes fade_start_opaque {
	0% { opacity:0; -webkit-transform:translate(0px,0px); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -moz-transform:translate(0px,0px); } 
}


#CSS3Slideshow, #CSS3Slideshow img 
{ 
    position:absolute 
}

#CSS3Slideshow 
{ 
	overflow:hidden;
	width:100%; 
	height:100%;

	background-color: red;
}


#CSS3Slideshow img 
{ 


	left: -20%;
	top: -20%;

	height: 200vh;
	width: auto;

	opacity:0; 

}


/* 20s : 20s; // MUST BE A MULTIPLE OF THE NUMBER OF SLIDES, USUALLY 4 */




#CSS3Slideshow .img1 {
 	opacity: 1;
 	-webkit-animation:fade_start_opaque_alt 20s linear infinite; 
 	-moz-animation:fade_start_opaque 20s linear infinite; 
 		-webkit-animation-delay:0s; -moz-animation-delay:0s;

}

#CSS3Slideshow .img2 {
	-webkit-animation:fade 20s linear infinite; 
	-moz-animation:fade 20s linear infinite; 
	-webkit-animation-delay:5s; -moz-animation-delay:5s;
}

#CSS3Slideshow .img3 {
 	-webkit-animation:fade 20s linear infinite; 
	-moz-animation:fade 20s linear infinite;...

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.images = [];
    $scope.images.push('http://rollingout.com/wp-content/uploads/2013/06/prince.jpg');
    
 $scope.images.push('http://static.guim.co.uk/sys-images/Music/Pix/pictures/2011/6/3/1307115506503/Prince-performing-on-stag-007.jpg');
    
     $scope.images.push('http://static.gigwise.com/artists/wenn5148053prince.jpg');
    
     $scope.images.push('http://soniceditions.com/library/prince-2ICP_o_tn.jpg');

console.log($scope.images);
    
}