diff --git a/example/bg.png b/example/bg.png
new file mode 100644
index 0000000..5a77f50
Binary files /dev/null and b/example/bg.png differ
diff --git a/example/index.html b/example/index.html
new file mode 100644
index 0000000..1b66675
--- /dev/null
+++ b/example/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>AdaptiveSlides.js &middot; Adaptive jQuery Slideshow</title>
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
+  <link rel="stylesheet" href="styles.css" />
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+  <script src="../adaptiveslides.pack.js"></script>
+  <script>
+    jQuery(function() {
+
+      // Slideshow 1
+      $("#slides").adaptiveSlides({ maxwidth:800 });
+
+      // Slideshow 2
+      $("#slides2").adaptiveSlides({ fade:300, auto:false, maxwidth:540, namespace: 'anotherslideshow' });
+
+    });
+  </script>
+</head>
+<body>
+  <div id="wrapper">
+    <h1>AdaptiveSlides.js</h1>
+    <h2>Adaptive jQuery Slideshow plugin that weights just ~1kb</h2>
+
+    <!-- Slideshow 1 -->
+    <div id="slides">
+      <img src="1.jpg" alt="" />
+      <img src="2.jpg" alt="" />
+      <img src="3.jpg" alt="" />
+    </div>
+
+    <!-- Slideshow 2 -->
+    <div id="slides2">
+      <img src="1.jpg" alt="" />
+      <img src="2.jpg" alt="" />
+      <img src="3.jpg" alt="" />
+    </div>
+
+    <a href="http://adaptiveslides.viljamis.com/" id="download">See the documentation</a>
+    <p class="footer">AdaptiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have questions you can use the <a href="https://github.com/viljami/AdaptiveSlides.js">GitHub project page</a>.</p>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/example/styles.css b/example/styles.css
new file mode 100644
index 0000000..7274d0b
--- /dev/null
+++ b/example/styles.css
@@ -0,0 +1,122 @@
+* {
+  margin: 0;
+  padding: 0;
+  }
+
+html {
+  background: #222 url("bg.png") repeat;
+  }
+
+body {
+  -webkit-font-smoothing: antialiased;
+  font: 14px/20px Helvetica, Arial, sans-serif;
+  text-shadow: 0 -2px 1px #000;
+  color: #888;
+  text-align: center;
+  _width: 70%;
+  max-width: 800px;
+  margin: 20px auto 0;
+  }
+
+#wrapper {
+  padding: 20px;
+  }
+
+#slides {
+  -webkit-box-shadow: 0 0 20px #000; 
+  -moz-box-shadow: 0 0 20px #000;
+  box-shadow: 0 0 20px #000;
+  margin-bottom: 40px !important;
+  }
+
+#slides2 {
+  margin: 0 auto;
+  }
+
+p {
+  text-align: left;
+  max-width: 500px;
+  margin: 0 auto 20px;
+  }
+
+h1 { 
+  font: 36px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #fff;
+  font-weight: 200;
+  }
+
+h2 { 
+  font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; 
+  margin-bottom: 40px;
+  }
+
+a {
+  text-decoration: none;
+  color: #fff;
+  }
+
+a:hover {
+  border-bottom: 1px solid #666;
+  }
+
+a:active {
+  opacity: .7;
+  }
+
+.anotherslideshow_tabs {
+  font-size: 18px;
+  margin: 0 auto 50px;
+  padding: 10px 0;
+  list-style: none;
+  width: 100%;
+  max-width: 540px;
+  text-align: center;
+  background: rgba(0,0,0,.25);
+  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
+  }
+
+.anotherslideshow_tabs li {
+  display: inline;
+  margin-left: 15px;
+  }
+
+.anotherslideshow_tabs li:first-child {
+  margin-left: 0;
+  }
+
+.anotherslideshow_tabs a {
+  color: #666;
+  }
+
+.anotherslideshow_tabs .active a {
+  color: #fff;
+  font-weight: bold;
+  }
+
+#download {
+  -webkit-box-shadow: 0 0 10px #000; 
+  -moz-box-shadow: 0 0 10px #000;
+  box-shadow: 0 0 10px #000;
+  background: #333;
+  background: rgba(255,255,255,.1);
+  border: 1px solid rgba(255,255,255,.1);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 60px auto;
+  display: block;
+  max-width: 500px;
+  padding: 20px;
+  }
+
+#download:hover {
+  background: rgba(255,255,255,.15);
+  }
+
+.footer {
+  font-size: 11px;
+  }
\ No newline at end of file
