nathansearles · ErikLoubal · Sep 21, 2013 · Sep 22, 2013
diff --git a/examples/js-navigation/img/example-slide-1.jpg b/examples/js-navigation/img/example-slide-1.jpg
diff --git a/examples/js-navigation/img/example-slide-2.jpg b/examples/js-navigation/img/example-slide-2.jpg
diff --git a/examples/js-navigation/img/example-slide-3.jpg b/examples/js-navigation/img/example-slide-3.jpg
diff --git a/examples/js-navigation/img/example-slide-4.jpg b/examples/js-navigation/img/example-slide-4.jpg
diff --git a/examples/js-navigation/index.html b/examples/js-navigation/index.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>SlidesJS Basic Code Example</title>
+  <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
+  <meta name="author" content="Nathan Searles">
+
+  <!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
+  <meta name="viewport" content="width=device-width">
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
+  <style>
+    /* Prevent the slideshow from flashing on load */
+    #slides {
+      display: none
+    }
+
+    /* Center the slideshow */
+    .container {
+      margin: 0 auto
+    }
+
+    /* Show active item in the pagination */
+    .slidesjs-pagination .active {
+      color:red;
+    }
+
+    /* Media quires for a responsive layout */
+
+    /* For tablets & smart phones */
+    @media (max-width: 767px) {
+      body {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+      .container {
+        width: auto
+      }
+    }
+
+    /* For smartphones */
+    @media (max-width: 480px) {
+      .container {
+        width: auto
+      }
+    }
+
+    /* For smaller displays like laptops */
+    @media (min-width: 768px) and (max-width: 979px) {
+      .container {
+        width: 724px
+      }
+    }
+
+    /* For larger displays */
+    @media (min-width: 1200px) {
+      .container {
+        width: 1170px
+      }
+    }
+  </style>
+  <!-- SlidesJS Required: -->
+</head>
+<body>
+
+  <!-- SlidesJS Required: Start Slides -->
+  <!-- The container is used to define the width of the slideshow -->
+  <div class="container">
+    <div id="slides">
+      <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
+      <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
+      <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
+      <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
+    </div>
+  </div>
+  <!-- End SlidesJS Required: Start Slides -->
+
+  <!-- SlidesJS Required: Link to jQuery -->
+  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required: Link to jquery.slides.js -->
+  <script src="js/jquery.slides.js"></script>
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required for Key bindings : Mousetrap (http://craig.is/killing/mice) -->
+  <script src="http://cdn.craig.is/js/mousetrap/mousetrap.min.js"></script>
+  <!-- End SlidesJS Required -->
+
+  <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
+  <script>
+    $(function() {
+      var binding = new function(){}; 
+      $('#slides').slidesjs({
+        width: 940,
+        height: 528,
+        commands: binding
+      });
+      Mousetrap.bind('right', binding.next);
+      Mousetrap.bind('n', binding.next);
+      Mousetrap.bind('left', binding.previous);
+      Mousetrap.bind('p', binding.previous);
+    });
+  </script>
+  <!-- End SlidesJS Required -->
+
+</body>
+</html>