Image Slider using AngularJs

  1. <!DOCTYPE html>  
  2. <htm ng-app>  
  3.   
  4.   <head>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>  
  6.       
  7.     <script>  
  8.   
  9.         function slideShowController($scope, $timeout) {  
  10.             var slidesInSlideshow = 4;  
  11.             var slidesTimeIntervalInMs = 3000;  
  12.   
  13.             $scope.slideshow = 1;  
  14.             var slideTimer =  
  15.     $timeout(function interval() {  
  16.         $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;  
  17.         slideTimer = $timeout(interval, slidesTimeIntervalInMs);  
  18.     }, slidesTimeIntervalInMs);  
  19.         }  
  20.     </script>  
  21.     
  22.   </head>  
  23.   
  24.     <body>  
  25.           
  26.         <div style="width:600px; border:2px solid gray">  
  27.         <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">  
  28.             <div class="slider-content" ng-switch-when="1">  
  29.                 <img src="Image/img1.jpg" />  
  30.             </div>      
  31.             <div class="slider-content" ng-switch-when="2">  
  32.                 <img src="Image/img2.jpg" />  
  33.             </div>  
  34.             <div class="slider-content" ng-switch-when="3">  
  35.                 <img src="Image/img3.jpg" />  
  36.             </div>      
  37.             <div class="slider-content" ng-switch-when="4">  
  38.             <img src="Image/img4.jpg" />  
  39.             </div>      
  40.         </div>  
  41.         </div>  
  42.           
  43.     </body>  
  44. </html>