diff --git a/README.md b/README.md
index f4a8723..2b66ea0 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,15 @@
-# ResponsiveSlides.js v1.3
+# ResponsiveSlides.js v1.55
 ### Simple & lightweight responsive slider plugin (in 1kb)
 
 
+[ResponsiveSlides.js](http://responsiveslides.com/) is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like [Microsoft's Build 2012](http://www.buildwindows.com/launch) and [Gridset App](https://gridsetapp.com). ResponsiveSlides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don't natively support it. Only dependency is [jQuery](http://jquery.com/) (1.6 and up supported, tested up to 1.8.3) and that all the images are the same size.
 
-[ResponsiveSlides.js](http://responsiveslides.com/) is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds CSS max-width support for IE6 and other browsers that don't natively support it. Only dependency is [jQuery](http://jquery.com/) (1.4 and up supported) and that all the images are same size.
-
-Biggest difference to other responsive slider plugins is the file size (1kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.
+Biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn't try to do everything. ResponsiveSlides.js has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.
 
 #### Features:
  * Fully responsive
  * 1kb minified and gzipped
+ * CSS3 transitions with JavaScript fallback
  * Simple markup using unordered list
  * Settings for transition and timeout durations
  * Multiple slideshows supported
@@ -19,6 +19,7 @@ Biggest difference to other responsive slider plugins is the file size (1kb mini
  * Separate pagination and next/prev controls
  * Possibility to choose where the controls append to
  * Possibility to randomize the order of the slides
+ * Possibility to use custom markup for pagination
  * Can be paused while hovering slideshow and/or controls
  * Images can be wrapped inside links
  * Optional 'before' and 'after' callbacks
@@ -28,9 +29,12 @@ Biggest difference to other responsive slider plugins is the file size (1kb mini
 Usage Instructions and demo
 ======
 
-For instructions and demo go to [http://responsiveslides.com/](http://responsiveslides.com/), or [download this repository as a zip file](https://github.com/viljamis/ResponsiveSlides.js/zipball/master) and and open "index.html" from the "example" folder. There's also a file called "themes.html" inside the "themes" folder which has [more examples about the usage](http://viljamis.com/responsive-slides/themes/).
+For instructions and demo go to [http://responsiveslides.com/](http://responsiveslides.com/), or [download this repository as a zip file](https://github.com/arielsalminen/ResponsiveSlides.js/zipball/master) and and open "index.html" from the "example" folder.
+
+* View [additional usage examples online](http://responsiveslides.com/themes/themes.html).
+* View [a demo with captions](http://responsiveslides.com/with-captions/themes.html).
 
-Currently jQuery 1.4 and up is supported.
+Currently jQuery 1.6 and up is supported.
 
 
 
@@ -39,7 +43,7 @@ License
 
 Licensed under the MIT license.
 
-Copyright (c) 2011-2012 Viljami Salminen, http://viljamis.com/
+Copyright (c) 2011-2023 Ariel Salminen, https://arie.ls/
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
@@ -52,6 +56,23 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 Changelog
 ======
 
+
+v1.55 (2016-08-05) - Adds jQuery 3.0 compatibility (thanks to [@Requios](https://github.com/Requios)!).
+
+v1.54 (2013-04-26) - Fixes few bugs with the before and after callbacks.
+
+v1.53 (2013-01-14) - Minor speed optimization (thanks [@bazineta](https://github.com/bazineta)!).
+
+v1.52 (2013-01-07) - Adds option called "manualControls" which allows to write custom markup for pager navigation (thanks to [@andyadams](https://github.com/andyadams)). "controls" option is renamed to "navContainer". Default speed of the transition is now to 500ms. Adds also webkit-backface-visibility: hidden; style for the slides to prevent some HD acceleration issues on mobile WebKit browsers.
+
+v1.51 (2012-12-15) - Fixes a bug where pictures would not display if next button was clicked too quickly 10 times.
+
+v1.5 (2012-12-14) - Adds CSS3 transition support with automatic jQuery fallback.
+
+v1.32 (2012-05-09) - Fixes a bug which caused the slideshow to break in Chrome when changing between active and inactive browser tabs.
+
+v1.31 (2012-05-02) - Easier to use callbacks (+ optional "active" class for the next/prev buttons when animating slides. If you need this functionality, open the unminified version and search for "Adds active class during slide animation" and remove comments around it).
+
 v1.3 (2012-04-26) - Three new options: "random", "pause", "pauseControls" + small bug fixes.
 
 v1.25 (2012-04-19) - No more flashing of unstyled slideshow before JS has loaded. Adds also better support for cases when JavaScript isn't available.
@@ -64,7 +85,7 @@ v1.22 (2012-03-27) - Adds callback events which are similar as in [@Wilto](https
 
 v1.21 (2012-03-23) - Added two new options: 'nextText' and 'prevText'.
 
-v1.20 (2012-03-21) - New option called 'nav', which enables next and previous buttons. Can be used with 'pagination' and 'auto' options. Adds also new [themes folder](http://viljamis.com/responsive-slides/themes/) with three different ways to use the new next and previous buttons.
+v1.20 (2012-03-21) - New option called 'nav', which enables next and previous buttons. Can be used with 'pagination' and 'auto' options. Adds also new [themes folder](http://responsiveslides.com/themes/themes.html) with three different ways to use the new next and previous buttons.
 
 v1.10 (2012-03-12) - Refactoring, New markup style, CSS is now separated from the plugin, you can have links around images and other elements inside slides (not just images, but also captions etc.) + New option called "pagination", which enables to choose both "pagination" and "auto" at the same time. Shout outs for the help to [@bgutschke](https://github.com/bgutschke)
 
@@ -77,3 +98,9 @@ v1.03 (2011-12-12) - Code refactoring, smaller size, better performance
 v1.01 (2011-12-11) - Better usage of styles and the namespace
 
 v1.00 (2011-12-04) - Release
+
+
+Want to do a pull request?
+======
+
+Great! New ideas are more than welcome, but please check the [Pull Request Guidelines](https://github.com/arielsalminen/ResponsiveSlides.js/wiki/Pull-Request-Guidelines) first before doing so.
diff --git a/demo/demo.css b/demo/demo.css
index c301447..4d6ccd6 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -4,7 +4,7 @@
 }
 
 html {
-  background: #222 url("bg.png") repeat;
+  background: #222 url("images/bg.png") repeat;
 }
 
 body {
@@ -43,7 +43,8 @@ p,h3,h4,pre {
   margin: 0 auto 40px;
   }
 
-.rslides2 {
+#slider2,
+#slider3 {
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
@@ -206,6 +207,23 @@ h3 {
   right: 0;
   }
 
+#slider3-pager a {
+  display: inline-block;
+}
+
+#slider3-pager img {
+  float: left;
+}
+
+#slider3-pager .rslides_here a {
+  background: transparent;
+  box-shadow: 0 0 0 2px #666;
+}
+
+#slider3-pager a {
+  padding: 0;
+}
+
 @media screen and (max-width: 600px) {
   h1 {
     font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -213,4 +231,4 @@ h3 {
   .callbacks_nav {
     top: 47%;
     }
-  }
\ No newline at end of file
+  }
diff --git a/demo/demo.html b/demo/demo.html
index 837dbcc..bd4ddd7 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -1,24 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8">
   <title>ResponsiveSlides.js &middot; Responsive jQuery slideshow</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <link rel="stylesheet" href="../responsiveslides.css" />
-  <link rel="stylesheet" href="demo.css" />
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="../responsiveslides.css">
+  <link rel="stylesheet" href="demo.css">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
   <script src="../responsiveslides.min.js"></script>
   <script>
+    // You can also use "$(window).load(function() {"
     $(function () {
 
       // Slideshow 1
-      $(".rslides1").responsiveSlides({
+      $("#slider1").responsiveSlides({
         maxwidth: 800,
         speed: 800
       });
 
       // Slideshow 2
-      $(".rslides2").responsiveSlides({
+      $("#slider2").responsiveSlides({
         auto: false,
         pager: true,
         speed: 300,
@@ -26,19 +27,22 @@
       });
 
       // Slideshow 3
-      $(".rslides3").responsiveSlides({
+      $("#slider3").responsiveSlides({
+        manualControls: '#slider3-pager',
+        maxwidth: 540
+      });
+
+      // Slideshow 4
+      $("#slider4").responsiveSlides({
         auto: false,
         pager: false,
         nav: true,
         speed: 500,
-        namespace: "callbacks"
-      }).bind({
-        // Before callback
-        "callbacks-before": function () {
+        namespace: "callbacks",
+        before: function () {
           $('.events').append("<li>before event fired.</li>");
         },
-        // After callback
-        "callbacks-after": function () {
+        after: function () {
           $('.events').append("<li>after event fired.</li>");
         }
       });
@@ -51,33 +55,55 @@
     <h1>ResponsiveSlides.js</h1>
     <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>
 
+
+
     <!-- Slideshow 1 -->
-    <ul class="rslides rslides1">
-      <li><img src="1.jpg" alt="" /></li>
-      <li><img src="2.jpg" alt="" /></li>
-      <li><img src="3.jpg" alt="" /></li>
+    <ul class="rslides" id="slider1">
+      <li><img src="images/1.jpg" alt=""></li>
+      <li><img src="images/2.jpg" alt=""></li>
+      <li><img src="images/3.jpg" alt=""></li>
     </ul>
 
+
+
     <!-- Slideshow 2 -->
-    <ul class="rslides rslides2">
-      <li><a href="#"><img src="1.jpg" alt="" /></a></li>
-      <li><a href="#"><img src="2.jpg" alt="" /></a></li>
-      <li><a href="#"><img src="3.jpg" alt="" /></a></li>
+    <ul class="rslides" id="slider2">
+      <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
     </ul>
 
-    <!-- Slideshow 2 -->
+
+
+    <!-- Slideshow 3 -->
+    <ul class="rslides" id="slider3">
+      <li><img src="images/1.jpg" alt=""></li>
+      <li><img src="images/2.jpg" alt=""></li>
+      <li><img src="images/3.jpg" alt=""></li>
+    </ul>
+
+    <!-- Slideshow 3 Pager -->
+    <ul id="slider3-pager">
+      <li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li>
+      <li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li>
+    </ul>
+
+
+
+    <!-- Slideshow 4 -->
     <div class="callbacks_container">
-      <ul class="rslides rslides3">
+      <ul class="rslides" id="slider4">
         <li>
-          <img src="1.jpg" alt="" />
+          <img src="images/1.jpg" alt="">
           <p class="caption">This is a caption</p>
         </li>
         <li>
-          <img src="2.jpg" alt="" />
+          <img src="images/2.jpg" alt="">
           <p class="caption">This is another caption</p>
         </li>
         <li>
-          <img src="3.jpg" alt="" />
+          <img src="images/3.jpg" alt="">
           <p class="caption">The third caption</p>
         </li>
       </ul>
@@ -85,11 +111,13 @@ <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>
 
     <!-- This is here just to demonstrate the callbacks -->
     <ul class="events">
-      <li><h3>Example 3 callback events</h3></li>
+      <li><h3>Example 4 callback events</h3></li>
     </ul>
 
+
+
     <a href="http://responsiveslides.com/" id="download">See the documentation</a>
-    <p class="footer">ResponsiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/viljami/ResponsiveSlides.js">GitHub project page</a>.</p>
+    <p class="footer">ResponsiveSlides.js is created by <a href="https://arie.ls">@ariel</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/arielsalminen/ResponsiveSlides.js">GitHub project page</a>.</p>
   </div>
 </body>
 </html>
diff --git a/demo/1.jpg b/demo/images/1.jpg
similarity index 100%
rename from demo/1.jpg
rename to demo/images/1.jpg
diff --git a/demo/images/1_thumb.jpg b/demo/images/1_thumb.jpg
new file mode 100644
index 0000000..95a9db3
Binary files /dev/null and b/demo/images/1_thumb.jpg differ
diff --git a/demo/2.jpg b/demo/images/2.jpg
similarity index 100%
rename from demo/2.jpg
rename to demo/images/2.jpg
diff --git a/demo/images/2_thumb.jpg b/demo/images/2_thumb.jpg
new file mode 100644
index 0000000..5df0d8e
Binary files /dev/null and b/demo/images/2_thumb.jpg differ
diff --git a/demo/3.jpg b/demo/images/3.jpg
similarity index 100%
rename from demo/3.jpg
rename to demo/images/3.jpg
diff --git a/demo/images/3_thumb.jpg b/demo/images/3_thumb.jpg
new file mode 100644
index 0000000..6c23428
Binary files /dev/null and b/demo/images/3_thumb.jpg differ
diff --git a/demo/bg.png b/demo/images/bg.png
similarity index 100%
rename from demo/bg.png
rename to demo/images/bg.png
diff --git a/demo/themes/themes.css b/demo/themes/themes.css
index 55ebd57..f39b78e 100644
--- a/demo/themes/themes.css
+++ b/demo/themes/themes.css
@@ -50,7 +50,8 @@ a {
   width: 100%;
   }
 
-.rslides1_nav {
+.centered-btns_nav {
+  z-index: 3;
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   top: 50%;
@@ -65,17 +66,18 @@ a {
   margin-top: -45px;
   }
 
-.rslides1_nav:active {
+.centered-btns_nav:active {
   opacity: 1.0;
   }
 
-.rslides1_nav.next {
+.centered-btns_nav.next {
   left: auto;
   background-position: right top;
   right: 0;
   }
 
-.rslides2_nav {
+.transparent-btns_nav {
+  z-index: 3;
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   top: 0;
@@ -90,12 +92,13 @@ a {
   height: 91%;
   }
 
-.rslides2_nav.next {
+.transparent-btns_nav.next {
   left: auto;
   right: 0;
   }
 
-.rslides3_nav {
+.large-btns_nav {
+  z-index: 3;
   position: absolute;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   opacity: 0.6;
@@ -108,28 +111,32 @@ a {
   width: 38px;
   }
 
-.rslides3_nav:active {
+.large-btns_nav:active {
   opacity: 1.0;
   }
 
-.rslides3_nav.next {
+.large-btns_nav.next {
   left: auto;
   background-position: right 50%;
   right: 0;
   }
 
-.rslides1_nav:focus,
-.rslides2_nav:focus,
-.rslides3_nav:focus {
+.centered-btns_nav:focus,
+.transparent-btns_nav:focus,
+.large-btns_nav:focus {
   outline: none;
   }
 
-.rslides_tabs {
+.centered-btns_tabs,
+.transparent-btns_tabs,
+.large-btns_tabs {
   margin-top: 10px;
   text-align: center;
   }
 
-.rslides_tabs li {
+.centered-btns_tabs li,
+.transparent-btns_tabs li,
+.large-btns_tabs li {
   display: inline;
   float: none;
   _float: left;
@@ -137,7 +144,9 @@ a {
   margin-right: 5px;
   }
 
-.rslides_tabs a {
+.centered-btns_tabs a,
+.transparent-btns_tabs a,
+.large-btns_tabs a {
   text-indent: -9999px;
   overflow: hidden;
   -webkit-border-radius: 15px;
@@ -155,7 +164,9 @@ a {
   height: 9px;
   }
 
-.rslides_tabs .rslides_here a {
+.centered-btns_here a,
+.transparent-btns_here a,
+.large-btns_here a {
   background: #222;
   background: rgba(0,0,0, .8);
   }
diff --git a/demo/themes/themes.html b/demo/themes/themes.html
index 102da06..5b4399c 100644
--- a/demo/themes/themes.html
+++ b/demo/themes/themes.html
@@ -1,41 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8">
   <title>ResponsiveSlides.js &middot; Alternative themes</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <link rel="stylesheet" href="../../responsiveslides.css" />
-  <link rel="stylesheet" href="themes.css" />
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="../../responsiveslides.css">
+  <link rel="stylesheet" href="themes.css">
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script src="../../responsiveslides.min.js"></script>
   <script>
+    // You can also use "$(window).load(function() {"
     $(function () {
 
       // Slideshow 1
-      $(".rslides1").responsiveSlides({
+      $("#slider1").responsiveSlides({
         auto: false,
         pager: true,
         nav: true,
         speed: 500,
-        maxwidth: 800
+        maxwidth: 800,
+        namespace: "centered-btns"
       });
 
       // Slideshow 2
-      $(".rslides2").responsiveSlides({
+      $("#slider2").responsiveSlides({
         auto: false,
         pager: true,
         nav: true,
         speed: 500,
-        maxwidth: 800
+        maxwidth: 800,
+        namespace: "transparent-btns"
       });
 
       // Slideshow 3
-      $(".rslides3").responsiveSlides({
+      $("#slider3").responsiveSlides({
         auto: false,
         pager: false,
         nav: true,
         speed: 500,
-        maxwidth: 800
+        maxwidth: 800,
+        namespace: "large-btns"
       });
 
     });
@@ -45,35 +49,45 @@
   <div id="wrapper">
     <h1>Three different ways to use next/prev buttons</h1>
 
+
+
     <h3>Vertically centered on both sides</h3>
+    <!-- Slideshow 1 -->
     <div class="rslides_container">
-      <ul class="rslides rslides1">
-        <li><img src="../1.jpg" alt="" /></li>
-        <li><img src="../2.jpg" alt="" /></li>
-        <li><img src="../3.jpg" alt="" /></li>
+      <ul class="rslides" id="slider1">
+        <li><img src="../images/1.jpg" alt=""></li>
+        <li><img src="../images/2.jpg" alt=""></li>
+        <li><img src="../images/3.jpg" alt=""></li>
       </ul>
     </div>
 
+
+
     <h3>Transparent buttons over the left and right side</h3>
+    <!-- Slideshow 2 -->
     <div class="rslides_container">
-      <ul class="rslides rslides2">
-        <li><img src="../1.jpg" alt="" /></li>
-        <li><img src="../2.jpg" alt="" /></li>
-        <li><img src="../3.jpg" alt="" /></li>
+      <ul class="rslides" id="slider2">
+        <li><img src="../images/1.jpg" alt=""></li>
+        <li><img src="../images/2.jpg" alt=""></li>
+        <li><img src="../images/3.jpg" alt=""></li>
       </ul>
     </div>
 
+
+
     <h3>100% height with vertically centered icons</h3>
+    <!-- Slideshow 3 -->
     <div class="rslides_container">
-      <ul class="rslides rslides3">
-        <li><img src="../1.jpg" alt="" /></li>
-        <li><img src="../2.jpg" alt="" /></li>
-        <li><img src="../3.jpg" alt="" /></li>
+      <ul class="rslides" id="slider3">
+        <li><img src="../images/1.jpg" alt=""></li>
+        <li><img src="../images/2.jpg" alt=""></li>
+        <li><img src="../images/3.jpg" alt=""></li>
       </ul>
     </div>
 
-    <a href="http://responsiveslides.com/">View ResponsiveSlides.js documentation</a>
 
+
+    <a href="http://responsiveslides.com/">View ResponsiveSlides.js documentation</a>
   </div>
 </body>
 </html>
diff --git a/responsiveslides.css b/responsiveslides.css
index 6cb09f4..2b3cba6 100644
--- a/responsiveslides.css
+++ b/responsiveslides.css
@@ -1,4 +1,4 @@
-/*! http://responsiveslides.com v1.25 by @viljamis */
+/*! http://responsiveslides.com v1.55 by @arielsalminen */
 
 .rslides {
   position: relative;
@@ -10,6 +10,7 @@
   }
 
 .rslides li {
+  -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
@@ -29,4 +30,4 @@
   float: left;
   width: 100%;
   border: 0;
-  }
\ No newline at end of file
+  }
diff --git a/responsiveslides.js b/responsiveslides.js
index 97ff966..25b1705 100644
--- a/responsiveslides.js
+++ b/responsiveslides.js
@@ -1,8 +1,8 @@
-/*! ResponsiveSlides.js v1.3
+/*! ResponsiveSlides.js v1.55
  * http://responsiveslides.com
- * http://viljamis.com
+ * https://arie.ls
  *
- * Copyright (c) 2011-2012 @viljamis
+ * Copyright (c) 2011-2023 @arielsalminen
  * Available under the MIT license
  */
 
@@ -14,18 +14,21 @@
     // Default settings
     var settings = $.extend({
       "auto": true,             // Boolean: Animate automatically, true or false
-      "speed": 1000,            // Integer: Speed of the transition, in milliseconds
+      "speed": 500,             // Integer: Speed of the transition, in milliseconds
       "timeout": 4000,          // Integer: Time between slide transitions, in milliseconds
       "pager": false,           // Boolean: Show pager, true or false
       "nav": false,             // Boolean: Show navigation, true or false
       "random": false,          // Boolean: Randomize the order of the slides, true or false
       "pause": false,           // Boolean: Pause on hover, true or false
-      "pauseControls": false,   // Boolean: Pause when hovering controls, true or false
+      "pauseControls": true,    // Boolean: Pause when hovering controls, true or false
       "prevText": "Previous",   // String: Text for the "previous" button
       "nextText": "Next",       // String: Text for the "next" button
       "maxwidth": "",           // Integer: Max-width of the slideshow, in pixels
-      "controls": "",           // Selector: Where controls should be appended to, default is after the <ul>
-      "namespace": "rslides"    // String: change the default namespace used
+      "navContainer": "",       // Selector: Where auto generated controls should be appended to, default is after the <ul>
+      "manualControls": "",     // Selector: Declare custom pager navigation
+      "namespace": "rslides",   // String: change the default namespace used
+      "before": $.noop,         // Function: Before callback
+      "after": $.noop           // Function: After callback
     }, options);
 
     return this.each(function () {
@@ -36,6 +39,7 @@
       var $this = $(this),
 
         // Local variables
+        vendor,
         selectTab,
         startCycle,
         restartCycle,
@@ -45,7 +49,7 @@
         // Helpers
         index = 0,
         $slide = $this.children(),
-        length = $slide.size(),
+        length = $slide.length,
         fadeTime = parseFloat(settings.speed),
         waitTime = parseFloat(settings.timeout),
         maxw = parseFloat(settings.maxwidth),
@@ -64,27 +68,63 @@
         $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
 
         // Styles for visible and hidden slides
-        visible = {"float": "left", "position": "relative"},
-        hidden = {"float": "none", "position": "absolute"},
+        visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
+        hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},
+
+        // Detect transition support
+        supportsTransitions = (function () {
+          var docBody = document.body || document.documentElement;
+          var styles = docBody.style;
+          var prop = "transition";
+          if (typeof styles[prop] === "string") {
+            return true;
+          }
+          // Tests for vendor specific prop
+          vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
+          prop = prop.charAt(0).toUpperCase() + prop.substr(1);
+          var i;
+          for (i = 0; i < vendor.length; i++) {
+            if (typeof styles[vendor[i] + prop] === "string") {
+              return true;
+            }
+          }
+          return false;
+        })(),
 
         // Fading animation
         slideTo = function (idx) {
-          $this.trigger(namespace + "-before");
-          $slide
-            .stop()
-            .fadeOut(fadeTime, function () {
-              $(this)
-                .removeClass(visibleClass)
-                .css(hidden);
-            })
-            .eq(idx)
-            .fadeIn(fadeTime, function () {
-              $(this)
-                .addClass(visibleClass)
-                .css(visible)
-                .trigger(namespace + "-after");
-              index = idx;
-            });
+          settings.before(idx);
+          // If CSS3 transitions are supported
+          if (supportsTransitions) {
+            $slide
+              .removeClass(visibleClass)
+              .css(hidden)
+              .eq(idx)
+              .addClass(visibleClass)
+              .css(visible);
+            index = idx;
+            setTimeout(function () {
+              settings.after(idx);
+            }, fadeTime);
+          // If not, use jQuery fallback
+          } else {
+            $slide
+              .stop()
+              .fadeOut(fadeTime, function () {
+                $(this)
+                  .removeClass(visibleClass)
+                  .css(hidden)
+                  .css("opacity", 1);
+              })
+              .eq(idx)
+              .fadeIn(fadeTime, function () {
+                $(this)
+                  .addClass(visibleClass)
+                  .css(visible);
+                settings.after(idx);
+                index = idx;
+              });
+          }
         };
 
       // Random order
@@ -111,13 +151,27 @@
       // Hide all slides, then show first one
       $slide
         .hide()
+        .css(hidden)
         .eq(0)
         .addClass(visibleClass)
         .css(visible)
         .show();
 
+      // CSS transitions
+      if (supportsTransitions) {
+        $slide
+          .show()
+          .css({
+            // -ms prefix isn't needed as IE10 uses prefix free version
+            "-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
+            "-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
+            "-o-transition": "opacity " + fadeTime + "ms ease-in-out",
+            "transition": "opacity " + fadeTime + "ms ease-in-out"
+          });
+      }
+
       // Only run if there's more than one slide
-      if ($slide.size() > 1) {
+      if ($slide.length > 1) {
 
         // Make sure the timeout is at least 100ms longer than the fade
         if (waitTime < fadeTime + 100) {
@@ -125,7 +179,7 @@
         }
 
         // Pager
-        if (settings.pager) {
+        if (settings.pager && !settings.manualControls) {
           var tabMarkup = [];
           $slide.each(function (i) {
             var n = i + 1;
@@ -136,14 +190,30 @@
           });
           $pager.append(tabMarkup);
 
-          $tabs = $pager.find("a");
-
           // Inject pager
-          if (options.controls) {
-            $(settings.controls).append($pager);
+          if (options.navContainer) {
+            $(settings.navContainer).append($pager);
           } else {
             $this.after($pager);
           }
+        }
+
+        // Manual pager controls
+        if (settings.manualControls) {
+          $pager = $(settings.manualControls);
+          $pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
+        }
+
+        // Add pager slide class prefixes
+        if (settings.pager || settings.manualControls) {
+          $pager.find('li').each(function (i) {
+            $(this).addClass(slideClassPrefix + (i + 1));
+          });
+        }
+
+        // If we have a pager, we need to set up the selectTab function
+        if (settings.pager || settings.manualControls) {
+          $tabs = $pager.find('a');
 
           // Select pager item
           selectTab = function (idx) {
@@ -160,10 +230,14 @@
 
           startCycle = function () {
             rotate = setInterval(function () {
+
+              // Clear the event queue
+              $slide.stop(true, true);
+
               var idx = index + 1 < length ? index + 1 : 0;
 
               // Remove active state and set new if pager is set
-              if (settings.pager) {
+              if (settings.pager || settings.manualControls) {
                 selectTab(idx);
               }
 
@@ -195,7 +269,7 @@
         }
 
         // Pager click event handler
-        if (settings.pager) {
+        if (settings.pager || settings.manualControls) {
           $tabs.bind("click", function (e) {
             e.preventDefault();
 
@@ -207,7 +281,7 @@
             var idx = $tabs.index(this);
 
             // Break if element is already active or currently animated
-            if (index === idx || $("." + visibleClass + ":animated").length) {
+            if (index === idx || $("." + visibleClass).queue('fx').length) {
               return;
             }
 
@@ -238,32 +312,43 @@
             "<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
 
           // Inject navigation
-          if (options.controls) {
-            $(settings.controls).append(navMarkup);
+          if (options.navContainer) {
+            $(settings.navContainer).append(navMarkup);
           } else {
             $this.after(navMarkup);
           }
 
           var $trigger = $("." + namespaceIdx + "_nav"),
-            $prev = $("." + namespaceIdx + "_nav.prev");
+            $prev = $trigger.filter(".prev");
 
           // Click event handler
           $trigger.bind("click", function (e) {
             e.preventDefault();
 
+            var $visibleClass = $("." + visibleClass);
+
             // Prevent clicking if currently animated
-            if ($("." + visibleClass + ":animated").length) {
+            if ($visibleClass.queue('fx').length) {
               return;
             }
 
+            //  Adds active class during slide animation
+            //  $(this)
+            //    .addClass(namespace + "_active")
+            //    .delay(fadeTime)
+            //    .queue(function (next) {
+            //      $(this).removeClass(namespace + "_active");
+            //      next();
+            //  });
+
             // Determine where to slide
-            var idx = $slide.index($("." + visibleClass)),
+            var idx = $slide.index($visibleClass),
               prevIdx = idx - 1,
               nextIdx = idx + 1 < length ? index + 1 : 0;
 
             // Go to slide
             slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
-            if (settings.pager) {
+            if (settings.pager || settings.manualControls) {
               selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
             }
 
diff --git a/responsiveslides.min.js b/responsiveslides.min.js
index 810a904..223579c 100644
--- a/responsiveslides.min.js
+++ b/responsiveslides.min.js
@@ -1,6 +1,8 @@
-/*! http://responsiveslides.com v1.3 by @viljamis */
-(function(d,D,w){d.fn.responsiveSlides=function(i){var b=d.extend({auto:!0,speed:1E3,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!1,prevText:"Previous",nextText:"Next",maxwidth:"",controls:"",namespace:"rslides"},i);return this.each(function(){w++;var c=d(this),o,q,j,l,m,n=0,e=c.children(),x=e.size(),r=parseFloat(b.speed),y=parseFloat(b.timeout),s=parseFloat(b.maxwidth),g=b.namespace,h=g+w,f=g+"_nav "+h+"_nav",t=g+"_here",k=h+"_on",z=h+"_s",p=d("<ul class='"+g+"_tabs "+h+"_tabs' />"),
-A={"float":"left",position:"relative"},E={"float":"none",position:"absolute"},u=function(a){c.trigger(g+"-before");e.stop().fadeOut(r,function(){d(this).removeClass(k).css(E)}).eq(a).fadeIn(r,function(){d(this).addClass(k).css(A).trigger(g+"-after");n=a})};b.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),c.empty().append(e));e.each(function(a){this.id=z+a});c.addClass(g+" "+h);i&&i.maxwidth&&c.css("max-width",s);e.hide().eq(0).addClass(k).css(A).show();if(1<e.size()){if(y<r+100)return;
-if(b.pager){var v=[];e.each(function(a){a=a+1;v=v+("<li><a href='#' class='"+z+a+"'>"+a+"</a></li>")});p.append(v);m=p.find("a");i.controls?d(b.controls).append(p):c.after(p);o=function(a){m.closest("li").removeClass(t).eq(a).addClass(t)}}b.auto&&(q=function(){l=setInterval(function(){var a=n+1<x?n+1:0;b.pager&&o(a);u(a)},y)},q());j=function(){if(b.auto){clearInterval(l);q()}};b.pause&&c.hover(function(){clearInterval(l)},function(){j()});b.pager&&(m.bind("click",function(a){a.preventDefault();b.pauseControls||
-j();a=m.index(this);if(!(n===a||d("."+k+":animated").length)){o(a);u(a)}}).eq(0).closest("li").addClass(t),b.pauseControls&&m.hover(function(){clearInterval(l)},function(){j()}));if(b.nav){f="<a href='#' class='"+f+" prev'>"+b.prevText+"</a><a href='#' class='"+f+" next'>"+b.nextText+"</a>";i.controls?d(b.controls).append(f):c.after(f);var f=d("."+h+"_nav"),B=d("."+h+"_nav.prev");f.bind("click",function(a){a.preventDefault();if(!d("."+k+":animated").length){var c=e.index(d("."+k)),a=c-1,c=c+1<x?n+
-1:0;u(d(this)[0]===B[0]?a:c);b.pager&&o(d(this)[0]===B[0]?a:c);b.pauseControls||j()}});b.pauseControls&&f.hover(function(){clearInterval(l)},function(){j()})}}if("undefined"===typeof document.body.style.maxWidth&&i.maxwidth){var C=function(){c.css("width","100%");c.width()>s&&c.css("width",s)};C();d(D).bind("resize",function(){C()})}})}})(jQuery,this,0);
\ No newline at end of file
+/*! http://responsiveslides.com v1.55 by @arielsalminen */
+(function(c,K,C){c.fn.responsiveSlides=function(m){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},m);return this.each(function(){C++;var f=c(this),u,t,v,n,q,r,p=0,e=f.children(),D=e.length,h=parseFloat(a.speed),E=parseFloat(a.timeout),w=parseFloat(a.maxwidth),g=a.namespace,d=g+C,F=g+"_nav "+d+"_nav",x=g+"_here",k=d+"_on",
+y=d+"_s",l=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),z={"float":"left",position:"relative",opacity:1,zIndex:2},A={"float":"none",position:"absolute",opacity:0,zIndex:1},G=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;u=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<u.length;c++)if("string"===typeof b[u[c]+a])return!0;return!1}(),B=function(b){a.before(b);G?(e.removeClass(k).css(A).eq(b).addClass(k).css(z),
+p=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(k).css(A).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(k).css(z);a.after(b);p=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-.5}),f.empty().append(e));e.each(function(a){this.id=y+a});f.addClass(g+" "+d);m&&m.maxwidth&&f.css("max-width",w);e.hide().css(A).eq(0).addClass(k).css(z).show();G&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
+h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.length){if(E<h+100)return;if(a.pager&&!a.manualControls){var H=[];e.each(function(a){a+=1;H+="<li><a href='#' class='"+y+a+"'>"+a+"</a></li>"});l.append(H);m.navContainer?c(a.navContainer).append(l):f.after(l)}a.manualControls&&(l=c(a.manualControls),l.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&l.find("li").each(function(a){c(this).addClass(y+(a+1))});if(a.pager||a.manualControls)r=
+l.find("a"),t=function(a){r.closest("li").removeClass(x).eq(a).addClass(x)};a.auto&&(v=function(){q=setInterval(function(){e.stop(!0,!0);var b=p+1<D?p+1:0;(a.pager||a.manualControls)&&t(b);B(b)},E)},v());n=function(){a.auto&&(clearInterval(q),v())};a.pause&&f.hover(function(){clearInterval(q)},function(){n()});if(a.pager||a.manualControls)r.bind("click",function(b){b.preventDefault();a.pauseControls||n();b=r.index(this);p===b||c("."+k).queue("fx").length||(t(b),B(b))}).eq(0).closest("li").addClass(x),
+a.pauseControls&&r.hover(function(){clearInterval(q)},function(){n()});if(a.nav){g="<a href='#' class='"+F+" prev'>"+a.prevText+"</a><a href='#' class='"+F+" next'>"+a.nextText+"</a>";m.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),I=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+k);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<D?p+1:0;B(c(this)[0]===I[0]?b:d);(a.pager||a.manualControls)&&t(c(this)[0]===I[0]?b:d);a.pauseControls||n()}});
+a.pauseControls&&d.hover(function(){clearInterval(q)},function(){n()})}}if("undefined"===typeof document.body.style.maxWidth&&m.maxwidth){var J=function(){f.css("width","100%");f.width()>w&&f.css("width",w)};J();c(K).bind("resize",function(){J()})}})}})(jQuery,this,0);