From dc2c87a63684c5e25897285f5c7f441a94490599 Mon Sep 17 00:00:00 2001
From: A K Srivastava <cs.abhilive@live.com>
Date: Fri, 25 Mar 2016 21:31:29 +0530
Subject: [PATCH] Fixed Slider Issue on Home Page.

---
 index.html         | 11 +++++++----
 js/main.js         | 46 +++++++++++++++++++++++++++++++++++++------
 partials/home.html | 49 ++++++++++------------------------------------
 3 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index 6fa7bdc..1af937e 100755
--- a/index.html
+++ b/index.html
@@ -37,12 +37,15 @@
 <div ng-include='"templates/footer.html"'></div>
 
 <!-- Vendor: Javascripts -->
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
 
 <!-- Vendor: Angular, followed by our custom Javascripts -->
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap.min.js"></script>
 
 <!-- Our Website Javascripts -->
 <script src="js/main.js"></script>
diff --git a/js/main.js b/js/main.js
index de58014..cebf130 100755
--- a/js/main.js
+++ b/js/main.js
@@ -7,7 +7,7 @@
  * Main AngularJS Web Application
  */
 var app = angular.module('tutorialWebApp', [
-  'ngRoute'
+  'ngRoute','ngAnimate', 'ui.bootstrap'
 ]);
 
 /**
@@ -30,6 +30,31 @@ app.config(['$routeProvider', function ($routeProvider) {
     .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
 }]);
 
+/*use template cache to override carousel functionality - prev & next arrow glyphicon replaced by font-awesome icons.*/
+app.run(function($templateCache) {
+  $templateCache.put("uib/template/carousel/carousel.html",
+      "<div ng-mouseenter=\"pause()\" ng-mouseleave=\"play()\" class=\"carousel\" ng-swipe-right=\"prev()\" ng-swipe-left=\"next()\">\n" +
+      " <div class=\"carousel-inner\" ng-transclude></div>\n" +
+      " <a role=\"button\" href class=\"left carousel-control\" ng-click=\"prev()\" ng-show=\"slides.length > 1\">\n" +
+      " <span aria-hidden=\"true\" class=\"icon-prev\"></span>\n" +
+      " <span class=\"sr-only\">previous</span>\n" +
+      " </a>\n" +
+      " <a role=\"button\" href class=\"right carousel-control\" ng-click=\"next()\" ng-show=\"slides.length > 1\">\n" +
+      " <span aria-hidden=\"true\" class=\"icon-next\"></span>\n" +
+      " <span class=\"sr-only\">next</span>\n" +
+      " </a>\n" +
+      " <ol class=\"carousel-indicators\" ng-show=\"slides.length > 1\">\n" +
+      " <li ng-repeat=\"slide in slides | orderBy:indexOfSlide track by $index\" ng-class=\"{ active: isActive(slide) }\" ng-click=\"select(slide)\">\n" +
+      " <span class=\"sr-only\">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if=\"isActive(slide)\">, currently active</span></span>\n" +
+      " </li>\n" +
+      " </ol>\n" +
+      "</div>\n" +
+    "");
+  $templateCache.put("uib/template/carousel/slide.html",
+      "<div ng-class=\"{'active': active}\" class=\"item text-center\" ng-transclude></div>\n" +
+    "");
+});
+
 /**
  * Controls the Blog
  */
@@ -40,16 +65,25 @@ app.controller('BlogCtrl', function (/* $scope, $location, $http */) {
 /**
  * Controls all other Pages
  */
-app.controller('PageCtrl', function (/* $scope, $location, $http */) {
+app.controller('PageCtrl', function ( $scope, $location, $http ) {
   console.log("Page Controller reporting for duty.");
 
+  $scope.slideInterval = 3000;
+	$scope.noWrapSlides = false;
+	$scope.active = 0;
+	  var slides = $scope.slides = [
+			{image: 'http://placehold.it/1900x455&text=Slide One', text: 'Caption 1', id: 0 },
+			{image: 'http://placehold.it/1900x455&text=Slide Two', text: 'Caption 2', id: 1 },
+			{image: 'http://placehold.it/1900x455&text=Slide Three', text: 'Caption 3', id: 2 }
+	  ];
+	  var currentIndex = 1;
   // Activates the Carousel
-  $('.carousel').carousel({
+  /*$('.carousel').carousel({
     interval: 5000
-  });
+  });*/
 
   // Activates Tooltips for Social Links
-  $('.tooltip-social').tooltip({
+  /*$('.tooltip-social').tooltip({
     selector: "a[data-toggle=tooltip]"
-  })
+  })*/
 });
\ No newline at end of file
diff --git a/partials/home.html b/partials/home.html
index 9d3f8bd..c39b327 100755
--- a/partials/home.html
+++ b/partials/home.html
@@ -1,42 +1,13 @@
-
-<div id="myCarousel" class="carousel slide">
-    <!-- Indicators -->
-    <ol class="carousel-indicators">
-        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-        <li data-target="#myCarousel" data-slide-to="1"></li>
-        <li data-target="#myCarousel" data-slide-to="2"></li>
-    </ol>
-
-    <!-- Wrapper for slides -->
-    <div class="carousel-inner">
-        <div class="item active">
-            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Specialists');"></div>
-            <div class="carousel-caption">
-                <h1>Reduce costs of finishing operations by 65%</h1>
-            </div>
-        </div>
-        <div class="item">
-            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Wordlwide');"></div>
-            <div class="carousel-caption">
-                <h1>International Buyer Financing Available</h1>
-            </div>
-        </div>
-        <div class="item">
-            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Since 1910');"></div>
-            <div class="carousel-caption">
-                <h1>Family Owned for Four Generations</h1>
-            </div>
-        </div>
-    </div>
-
-    <!-- Controls -->
-    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-        <span class="icon-prev"></span>
-    </a>
-    <a class="right carousel-control" href="#myCarousel" data-slide="next">
-        <span class="icon-next"></span>
-    </a>
-</div>
+<header>
+<uib-carousel active="active" interval="slideInterval" no-wrap="noWrapSlides">
+	<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
+		<img ng-src="{{slide.image}}" style="margin:auto;">
+		<div class="carousel-caption">
+		  <h2>{{slide.text}}</h2>
+		</div>
+	</uib-slide>
+</uib-carousel>
+</header>
 
 <div class="section">