diff --git a/css/reveal.css b/css/reveal.css
index a9b3888ae37a75cb20b5c969740f7af2375af6a9..6dc6594c9b325e5597d48c5fc698120c81cb1fe5 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 1d9a88646f6652a11ccc8a0e5962343254102483..fd80f70d8a5783d617eaf348b3b0245fbc2d985c 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 9a2f7c6e2baf09ffb669d2f52179a3e3cf37f532..09e2055d9ffc1327bb4ee99045a6efe1ea4e4d1a 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 5aa2866593c060e5c05a15d6e988e532f370353d..44dfe85d850d39de3ab362dc4e11d4dbaefaa5ff 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 2ea3fc494a58b95dcc79454e0b08a5ef7ed2e75d..7aaf9603b3922b696e17e3e36d4876d61a4e1d67 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 734de56f8e653576f1367d5641fd9964e746e39b..859991ce00f9b2f2c2879f217457bf10c1086c5f 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 b8f31bc501dc1a4df5fda5127ca5aaf322831172..b74d809d4b3d3c7affba4d5619985083bfbc42f3 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 35d048e7015a12dcb99759b5bad0fcf7920a7ce1..eee7b083de9cc9cf4a3bf491bf12d21e646271b0 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 17c32056e33df29f43853d0a7415b12833a9ca8e..2b11d264b26ff8bbf44a2f3fe37c76536905085b 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 794911c5f5bfddf99e2fa757c132af20bf98708d..9718aeffc6f814411a358258aad2b0d9f29d10ed 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 --------------------------------//