diff --git a/src/regthreesixty.css b/src/regthreesixty.css
index b7903e8..a8e181a 100644
--- a/src/regthreesixty.css
+++ b/src/regthreesixty.css
@@ -26,3 +26,15 @@
 .reg-threesixty img.current{
   visibility: visible;
 }
+
+.reg-threesixty-controls {
+  position: absolute;
+  z-index: 1;
+  bottom: 0px;
+  height: 30px;
+  background-color: rgba(0,0,1,0.25);
+  color: white;
+  width: 100%;
+  font-size: x-large;
+  text-align: center;
+}
diff --git a/src/regthreesixty.js b/src/regthreesixty.js
index b0d14f7..232c2f8 100644
--- a/src/regthreesixty.js
+++ b/src/regthreesixty.js
@@ -9,14 +9,15 @@
 angular.module('reg.threesixty', [])
   .directive('threesixty', ['$document', '$window',function ($document, $window) {
     return {
-      template: '<div class="reg-threesixty"></div>',
+      template: '<div class="reg-threesixty"><div class="reg-threesixty-controls"><span class="glyphicon glyphicon-chevron-left" ng-click="previousFrame()"></span>&nbsp;<span class="glyphicon glyphicon-repeat" ng-click="refresh()"></span>&nbsp;<span class="glyphicon glyphicon-chevron-right" ng-click="nextFrame()"></span></div></div>',
       restrict: 'E',
       replace:true,
       scope:{
         images: '=',
         reverse: '=',
         animateAfterLoading: '=',
-        speedMultiplier: '='
+        speedMultiplier: '=',
+        showControls: '='
       },
       link: function(scope, element, attrs) {
 
@@ -48,6 +49,11 @@ angular.module('reg.threesixty', [])
           }
         };
 
+        // show or hide controls
+        if (!scope.showControls) {
+          $('.reg-threesixty-controls').remove();
+        }
+
         angular.element($window).on('resize', adjustHeight );
 
         var load360Images = function(){
@@ -142,6 +148,21 @@ angular.module('reg.threesixty', [])
           }
         };
 
+        scope.refresh = function() {
+          endFrame = currentFrame + totalFrames;
+          refresh(100); 
+        };
+        scope.previousFrame = function() {
+          hidePreviousFrame();
+          currentFrame -= scope.reverse ? -1 : 1;
+          showCurrentFrame();
+        };
+        scope.nextFrame = function() {
+          hidePreviousFrame();
+          currentFrame += scope.reverse ? -1 : 1;
+          showCurrentFrame();
+        };
+
         var getNormalizedCurrentFrame = function() {
           var c = -Math.ceil(currentFrame % totalFrames);
           if (c < 0) {