diff --git a/css/reveal.css b/css/reveal.css
index a9b3888..6dc6594 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -391,6 +391,15 @@ body {
 	        transition: all 0.2s ease;
 }
 
+.reveal .controls .slide-number {
+	font-size: 11px;
+	top: 10px;
+	left: -10px;
+	opacity: 0.5;
+	width: 45px;
+	text-align: center;
+}
+
 .reveal .controls div.enabled {
 	opacity: 0.7;
 	cursor: pointer;
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 1d9a886..fd80f70 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -115,6 +115,10 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #8b743d; }
 
+.reveal .controls .slide-number {
+  color: #8b743d;
+}
+
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #c0a86e; }
 
diff --git a/css/theme/default.css b/css/theme/default.css
index 9a2f7c6..09e2055 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -115,6 +115,10 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #13daec; }
 
+.reveal .controls .slide-number {
+  color: #13daec;
+}
+
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #71e9f4; }
 
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 5aa2866..44dfe85 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -115,6 +115,10 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #268bd2; }
 
+.reveal .controls .slide-number {
+  color: #268bd2;
+}
+
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
diff --git a/css/theme/night.css b/css/theme/night.css
index 2ea3fc4..7aaf960 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -103,6 +103,9 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #e7ad52; }
 
+.reveal .controls .slide-number {
+  color: #e7ad52;
+}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #f3d7ac; }
 
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 734de56..859991c 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -105,6 +105,9 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #51483d; }
 
+.reveal .controls .slide-number {
+  color: #51483d;
+}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #8b7c69; }
 
diff --git a/css/theme/simple.css b/css/theme/simple.css
index b8f31bc..b74d809 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -105,6 +105,9 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: darkblue; }
 
+.reveal .controls .slide-number {
+  color: darkblue;
+}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #0000f1; }
 
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 35d048e..eee7b08 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -112,6 +112,9 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #3b759e; }
 
+.reveal .controls .slide-number {
+  color: #3b759e;
+}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #74a7cb; }
 
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 17c3205..2b11d26 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -115,6 +115,9 @@ body {
 .reveal .controls div.navigate-down.enabled {
   border-top-color: #268bd2; }
 
+.reveal .controls .slide-number {
+  color: #268bd2;
+}
 .reveal .controls div.navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
diff --git a/js/reveal.js b/js/reveal.js
index 794911c..9718aef 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -96,7 +96,10 @@ var Reveal = (function(){
 			viewDistance: 3,
 
 			// Script dependencies to load
-			dependencies: []
+			dependencies: [],
+
+			// Indicates whether to show the slides number
+			showSlideNumber: false
 		},
 
 		// Flags if reveal.js is loaded (has dispatched the 'ready' event)
@@ -347,7 +350,8 @@ var Reveal = (function(){
 			'<div class="navigate-left"></div>' +
 			'<div class="navigate-right"></div>' +
 			'<div class="navigate-up"></div>' +
-			'<div class="navigate-down"></div>' );
+			'<div class="navigate-down"></div>' +
+			'<div class="slide-number"></div>' );
 
 		// State background element [DEPRECATED]
 		createSingletonNode( dom.wrapper, 'div', 'state-background', null );
@@ -366,6 +370,7 @@ var Reveal = (function(){
 		dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
 		dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
 
+		dom.slideNumbers = toArray(document.querySelectorAll( '.slide-number' ));
 	}
 
 	/**
@@ -591,6 +596,11 @@ var Reveal = (function(){
 			dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
 		} );
 
+		if( config.showSlideNumber ) {
+			['ready', 'slidechanged'].forEach( function(eventName) { 
+				document.addEventListener( eventName, onSlideChanged, false ); 
+			} );
+		}
 	}
 
 	/**
@@ -627,6 +637,11 @@ var Reveal = (function(){
 			dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
 		} );
 
+		if( config.showSlideNumber ) {
+			['ready', 'slidechanged'].forEach( function(eventName) { 
+				document.removeEventListener( eventName, onSlideChanged, false ); 
+			} );
+		}
 	}
 
 	/**
@@ -2636,6 +2651,23 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Invoked when slide changed and on the first time slides are ready
+	 */
+	function onSlideChanged( event ) {
+		var element = dom.slideNumbers;
+
+		// change the number of the page using 'indexh/indexv' format
+		var indexString = ( event.indexh + 1 ).toString();
+		if( indexv > 0 ) {
+			indexString += ' / ' + indexv.toString();
+		}
+
+		element.forEach( function( elm ) { 
+			elm.innerHTML = indexString; 
+		} );
+	}
+
 
 	// --------------------------------------------------------------------//
 	// ------------------------------- API --------------------------------//