diff --git a/README.md b/README.md
index 5d02079..2824800 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Glider.js
 
-A fast, light-weight, dependency free, responsive, native scrolling list with paging controls. (2.3kb gzipped!)
+A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.5kb gzipped!)
 
 Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/
 
@@ -41,14 +41,33 @@ Glider.js Initialization w/ full options:
 
 ```javascript
 new Glider(document.querySelector('.glider'), {
+
+  // `auto` allows automatic responsive
+  // width calculations
   slidesToShow: 'auto',
   slidesToScroll: 'auto',
-  itemWidth: 150,
+
+  // should have been named `itemMinWidth`
+  // slides grow to fit the container viewport
+  // ignored unless `slidesToShow` is set to `auto`
+  itemWidth: undefined,
+
+  // if true, slides wont be resized to fit viewport
+  // requires `itemWidth` to be set
+  // * this may cause fractional slides
+  exactWidth: false,
+
+  // speed aggravator - higher is slower
   duration: .5,
-  dots: '.glider-dots',
+
+  // dot container element or selector
+  dots: 'CSS Selector',
+
+  // arrow container elements or selector
   arrows: {
-    prev: '.glider-prev',
-    next: '.glider-next'
+    prev: 'CSS Selector',
+    // may also pass element directly
+    next: document.querySelector('CSS Selector')
   },
 
   // allow mouse dragging
@@ -72,6 +91,9 @@ new Glider(document.querySelector('.glider'), {
   // if too low, it might interrupt normal scrolling
   scrollLockDelay: 150,
 
+  // Force centering slide after resize event
+  resizeLock: true,
+
   // Glider.js breakpoints are mobile-first
   // be conscious of your ordering
   responsive: [
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index 5cb092e..e756e61 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -3771,6 +3771,7 @@ input, select, textarea {
     position: absolute;
     outline: none;
   position: absolute;
+  padding: 2px 2px 2px 3px;
   background: none;
   width: 51px;
   z-index: 2;
@@ -3790,6 +3791,9 @@ input, select, textarea {
   #main .glider-prev:focus, #main .glider-next:focus {
   color: #8cc9f0;
   }
+  #main .glider-prev:focus-visible i, #main .glider-next:focus-visible i {
+    border: 1px dashed #666;
+  }
   .multiple .glider-prev, .multiple .glider-next {
   font-size: 20px;
   top: 37%;
@@ -3828,23 +3832,27 @@ input, select, textarea {
   }
   .glider-dot {
     background: none;
-  border: 0;
-  padding: 0;
-  outline: none;
-  display: block;
-  cursor: pointer;
-  color: #ccc;
-  border-radius: 99px;
-  background: #ccc;
-  width: 12px;
-  height: 12px;
-  margin: 7px;
-  padding: 0;
-  border: 0;
+    border: 0;
+    padding: 0;
+    outline: none;
+    display: block;
+    cursor: pointer;
+    color: #ccc;
+    border-radius: 99px;
+    background: #ccc;
+    width: 12px;
+    height: 12px;
+    margin: 7px;
+    padding: 0;
+    border: 0;
   }
   .glider-dot:hover, .glider-dot:focus {
     background: #8cc9f0;
   }
+  .glider-dot:focus-visible {
+    border: 1px dashed #000;
+    padding: 2px;
+  }
   .glider-dot.active {
   background: #a89cc8;
   }
diff --git a/docs/assets/js/glider.js b/docs/assets/js/glider.js
index 8428c15..0d4be2a 100644
--- a/docs/assets/js/glider.js
+++ b/docs/assets/js/glider.js
@@ -5,7 +5,7 @@
   \___//_//_/ \_,_/ \__//_/  (_)__/ //___/
                               |___/
 
-  Version: 1.5.4
+  Version: 1.6.0
   Author: Nick Piscitelli (pickykneee)
   Website: https://nickpiscitelli.com
   Documentation: http://nickpiscitelli.github.io/Glider.js
@@ -36,6 +36,7 @@
       _.opt = Object.assign({}, {
         slidesToScroll: 1,
         slidesToShow: 1,
+        resizeLock: true,
         duration: .5,
         // easeInQuad
         easing: function (x, t, b, c, d) {
@@ -44,7 +45,7 @@
       }, settings);
 
       // set defaults
-      _.aIndex = _.page = _.slide = 0;
+      _.animate_id = _.page = _.slide = 0;
       _.arrows = {};
 
       // preserve original options to
@@ -59,7 +60,7 @@
         _.track.appendChild(_.ele.children[0])
       }
 
-      // calculate list dimensions
+      // start glider
       _.init();
 
       // set events
@@ -89,14 +90,18 @@
     var breakpointChanged = _.settingsBreakpoint();
     if (!paging) paging = breakpointChanged;
 
-    if (_.opt.slidesToShow === 'auto'){
-      _.opt.slidesToShow = Math.floor(_.containerWidth / _.opt.itemWidth);
+    if (_.opt.slidesToShow === 'auto' || _.opt._autoSlide){
+      var slideCount = _.containerWidth / _.opt.itemWidth;
+
+      _.opt._autoSlide = _.opt.slidesToShow = _.opt.exactWidth ?
+        slideCount : Math.floor(slideCount);
     }
     if (_.opt.slidesToScroll === 'auto'){
-      _.opt.slidesToScroll = _.opt.slidesToShow;
+      _.opt.slidesToScroll = Math.floor(_.opt.slidesToShow);
     }
 
-    _.itemWidth = _.containerWidth / _.opt.slidesToShow;
+    _.itemWidth = _.opt.exactWidth ?
+      _.opt.itemWidth : _.containerWidth / _.opt.slidesToShow;
 
     // set slide dimensions
     [].forEach.call(_.slides, function(__){
@@ -109,14 +114,16 @@
     _.track.style.width = width + 'px';
     _.trackWidth = width;
 
-    // rebuild paging controls when settings changed
-    if (!refresh || paging){
+    _.opt.resizeLock && _.scrollTo(_.slide * _.itemWidth, 0);
+
+    if (breakpointChanged || paging){
       _.bindArrows();
       _.buildDots();
-      _.updateControls();
       _.bindDrag();
     }
 
+    _.updateControls();
+
     _.emit(refresh ? 'refresh ' : 'loaded')
   };
 
@@ -172,7 +179,13 @@
 
   gliderPrototype.bindArrows = function(){
     var _ = this;
-    if (!_.opt.arrows)  return
+    if (!_.opt.arrows) {
+      Object.keys(_.arrows).forEach(function(direction){
+        var element = _.arrows[direction];
+        _.event(element, 'remove', { click: element._func })
+      });
+      return;
+    }
     ['prev','next'].forEach(function(direction){
       var arrow = _.opt.arrows[direction]
       if (arrow){
@@ -198,8 +211,10 @@
 
     var disableArrows = _.containerWidth >= _.trackWidth;
 
-    if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
-    if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >=  Math.floor(_.trackWidth) || disableArrows)
+    if (!_.opt.rewind){
+      if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
+      if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >=  Math.floor(_.trackWidth) || disableArrows)
+    }
 
     _.slide = Math.round(_.ele.scrollLeft / _.itemWidth);
     _.page = Math.round(_.ele.scrollLeft / _.containerWidth);
@@ -210,9 +225,10 @@
       extraMiddle = 0;
     }
 
+    // the last page may be less than one half of a normal page width so
+    // the page is rounded down. when at the end, force the page to turn
     if (_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)){
       _.page = _.dots ? _.dots.children.length - 1 : 0;
-      _.slide = _.slides.length - _.opt.slidesToShow;
     }
 
     [].forEach.call(_.slides,function(slide,index){
@@ -265,10 +281,11 @@
     if(e)   e.preventDefault();
 
     var _ = this, originalSlide = slide;
-    _.aIndex++;
+    ++_.animate_id;
 
     if (dot === true) {
       slide = slide * _.containerWidth
+      slide = Math.round(slide / _.itemWidth) * _.itemWidth
     } else {
       if (typeof slide === 'string') {
         var backwards = slide === 'prev';
@@ -283,8 +300,16 @@
         if (backwards) slide -= _.opt.slidesToScroll;
         else  slide += _.opt.slidesToScroll;
 
+        if (_.opt.rewind){
+          var scrollLeft = _.ele.scrollLeft;
+          slide = backwards && !scrollLeft ? _.slides.length :
+            !backwards && scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) ?
+              0 : slide;
+        }
       }
+
       slide = Math.max(Math.min(slide, _.slides.length), 0)
+
       _.slide = slide;
       slide = _.itemWidth * slide
     }
@@ -320,20 +345,21 @@
       }
     }
     // set back to defaults in case they were overriden
+    var breakpointChanged = _.breakpoint !== 0;
     _.opt = Object.assign({}, _._opt);
     _.breakpoint = 0;
-    return false;
+    return breakpointChanged;
   }
 
   gliderPrototype.scrollTo = function(scrollTarget, scrollDuration, callback) {
     var
       _ = this,
       start = new Date().getTime(),
-      animateIndex = _.aIndex,
+      animateIndex = _.animate_id,
       animate = function(){
         var now = (new Date().getTime() - start);
         _.ele.scrollLeft = _.ele.scrollLeft + (scrollTarget - _.ele.scrollLeft) * _.opt.easing(0, now, 0, 1, scrollDuration);
-        if(now < scrollDuration && animateIndex == _.aIndex){
+        if(now < scrollDuration && animateIndex == _.animate_id){
           window.requestAnimationFrame(animate);
         } else {
           _.ele.scrollLeft = scrollTarget
diff --git a/docs/index.html b/docs/index.html
index 1e45c39..4f9b088 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -92,7 +92,7 @@ <h2>What is Glider.js?</h2>
               <h2>Features</h2>
             </header>
             <ul class="script-features">
-              <li><i class="fas fa-check"></i>Insanely Small (2.3kb gzipped!)</li>
+              <li><i class="fas fa-check"></i>Insanely Small (&lt; 2.5kb gzipped!)</li>
               <li><i class="fas fa-check"></i>Ridiculously Fast (as low as 25ms initilization!)</li>
               <li><i class="fas fa-check"></i>Vanilla JS - No Dependencies (look Mom, no jQuery!)</li>
               <li><i class="fas fa-check"></i>Native Browser Scroll (momentum scrolling!)</li>
@@ -133,9 +133,9 @@ <h2>Single Item</h2>
                 </div>
               </div>
             </div>
-            <div id="dots"></div>
             <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev"><i class="fa fa-chevron-left"></i></i></button>
             <button role="button" aria-label="Next" class="glider-next" id="glider-next"><i class="fa fa-chevron-right"></i></i></button>
+            <div id="dots"></div>
           </div>
           <script>
             window.addEventListener('load', function(){
@@ -196,9 +196,9 @@ <h2>Multiple Item</h2>
                 </div>
               </div>
             </div>
-            <div id="dots2"></div>
             <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></button>
             <button role="button" aria-label="Next" class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></button>
+            <div id="dots2"></div>
           </div>
           <script>
             window.addEventListener('load', function () {
@@ -251,9 +251,9 @@ <h2>Perspective View<span class="aside">(themeable CSS)</span></h2>
               <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>14</h1></div></div></div>
               <div><div class="gradient-border-bottom"><div class="gradient-border"><h1>15</h1></div></div></div>
             </div>
-            <div id="dots-per"></div>
             <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-per"><i class="fa fa-chevron-left"></i></i></button>
             <button role="button" aria-label="Next" class="glider-next" id="glider-next-per"><i class="fa fa-chevron-right"></i></i></button>
+            <div id="dots-per"></div>
           </div>
           <script>
             window.addEventListener('load', function () {
@@ -304,9 +304,9 @@ <h2>Responsive Settings / Scroll Lock Support</h2>
                 </div>
               </div>
             </div>
-            <div id="resp-dots"></div>
             <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-resp"><i class="fa fa-chevron-left"></i></i></button>
             <button role="button" aria-label="Next" class="glider-next" id="glider-next-resp"><i class="fa fa-chevron-right"></i></i></button>
+            <div id="resp-dots"></div>
           </div>
           <script>
             window.addEventListener('load',function(){
@@ -386,6 +386,7 @@ <h2>Fractional Slides</h2>
                   <div><h1>14</h1></div>
                   <div><h1>15</h1></div>
                   <div><h1>16</h1></div>
+                  <div><h1>17</h1></div>
                   <div><h1>18</h1></div>
                   <div><h1>19</h1></div>
                   <div><h1>20</h1></div>
@@ -396,9 +397,9 @@ <h2>Fractional Slides</h2>
                 </div>
               </div>
             </div>
-            <div role="tablist" id="frac-dots"></div>
             <button role="button" aria-label="Previous" class="glider-prev" id="cut-prev"><i class="fa fa-chevron-left"></i></i></button>
             <button role="button" aria-label="Next" class="glider-next" id="cut-next"><i class="fa fa-chevron-right"></i></i></button>
+            <div role="tablist" id="frac-dots"></div>
           </div>
           <script>
             window.addEventListener('load',function(){
@@ -450,9 +451,9 @@ <h2>Add/Remove Items</h2>
                 </div>
               </div>
             </div>
-            <div id="add-dots"></div>
             <button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-add"><i class="fa fa-chevron-left"></i></i></button>
             <button role="button" aria-label="Next" class="glider-next" id="glider-next-add"><i class="fa fa-chevron-right"></i></i></button>
+            <div id="add-dots"></div>
           </div>
           <p class="buttons">
             <a class="button" id="addSlide">Add</a>
@@ -786,7 +787,7 @@ <h2>Getting Started</h2>
           Include the required CSS in your &lt;head&gt; tag
         </p>
         <pre class="line-numbers language-html">
-          <code class="line-numbers language-html"> 
+          <code class="line-numbers language-html">
             &lt;link rel="stylesheet" type="text/css" href="glider.css"&gt;
           </code>
         </pre>
@@ -815,7 +816,7 @@ <h2>Getting Started</h2>
         <header class="major">
           <h2>Settings</h2>
         </header>
-        <ul class="settings uneven">
+        <ul class="settings">
           <li>
             <span class="setting-name">slidesToShow</span><br>
             <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a><br>
@@ -833,23 +834,11 @@ <h2>Settings</h2>
 
             If this value is set to <code class="slim slimmer">auto</code>, it will match the value of <code class="slim slimmer">slidesToScroll</code>.
           </li>
-          <li>
-            <span class="setting-name">itemWidth</span><br>
-            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
-            <span class="type default">Default:</span> undefined<br>
-            This value is ignored unless <code class="slim slimmer">slidesToShow</code> is set to <code class="slim slimmer">auto</code>, in which it is then required.
-          </li>
-          <li>
-            <span class="setting-name">scrollLock</span><br>
-            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
-            <span class="type default">Default:</span> false<br>
-            If true, Glider.js will scroll to the nearest slide after any scroll interactions.
-          </li>
           <li>
             <span class="setting-name">arrows</span><br>
             <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a><br>
             <span class="type default">Default:</span> undefined<br>
-            An object containing the prev/next arrows<br>
+            An object containing the prev/next arrow settings<br>
             <span class="indent">
               <span class="type">Keys:</span> prev | next<br>
               <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> (HTML Selector)<br>
@@ -857,9 +846,35 @@ <h2>Settings</h2>
           </li>
           <li>
             <span class="setting-name">dots</span><br>
-            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a><br>
+            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> (HTML Selector)<br>
             <span class="type default">Default:</span> undefined<br>
-            An object containing the dot container<br>
+            An HTML element or selector containing the dot container<br>
+          </li>
+          <li>
+            <span class="setting-name">itemWidth</span><br>
+            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
+            <span class="type default">Default:</span> undefined<br>
+            This value is ignored unless <code class="slim slimmer">slidesToShow</code> is set to <code class="slim slimmer">auto</code>, in which it is then required.
+          </li>
+          <li>
+            <span class="setting-name">exactWidth</span><br>
+            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
+            <span class="type default">Default:</span> undefined<br>
+            This prevents resizing items to fit when <code clas="slim slimmer">slidesToShow</code> is set to auto.
+
+            <span class="aside">NOTE: This will yield fractional slides if your container is not sized appropriately</span>
+          </li>
+          <li>
+            <span class="setting-name">scrollLock</span><br>
+            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
+            <span class="type default">Default:</span> false<br>
+            If true, Glider.js will scroll to the nearest slide after any scroll interactions
+          </li>
+          <li>
+            <span class="setting-name">resizeLock</span><br>
+            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
+            <span class="type default">Default:</span> true<br>
+            If true, Glider.js will lock to the nearest slide on resizing of the window
           </li>
           <li>
             <span class="setting-name">responsive</span><br>
@@ -868,6 +883,12 @@ <h2>Settings</h2>
             An object containing custom settings per provided breakpoint. See demo for details.
             <span class="aside">NOTE: All responsive calculation are provided "mobile-first". Be conscious of your breakpoint order!</span>
           </li>
+          <li>
+            <span class="setting-name">rewind</span><br>
+            <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
+            <span class="type default">Default:</span> false<br>
+            If true, Glider.js will scroll to the beginning/end when it's respective endpoint is reached
+          </li>
           <li>
             <span class="setting-name">scrollPropagate</span><br>
             <span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
diff --git a/glider.css b/glider.css
index 047ebae..c2d5447 100644
--- a/glider.css
+++ b/glider.css
@@ -69,7 +69,7 @@
 .glider-next:hover,
 .glider-prev:focus,
 .glider-next:focus {
-  color: #ccc;
+  color: #a89cc8;
 }
 .glider-next {
   right: -23px;
@@ -111,9 +111,7 @@
   margin: 7px;
 }
 .glider-dot:hover,
-.glider-dot:focus {
-  background: #ddd;
-}
+.glider-dot:focus,
 .glider-dot.active {
   background: #a89cc8;
 }
@@ -128,7 +126,6 @@
     opacity: 1;
     border-radius: 99px;
     background-color: rgba(156, 156, 156, 0.25);
-    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.25);
     box-shadow: 0 0 1px rgba(255,255,255,.25);
   }
 }
diff --git a/glider.js b/glider.js
index 8428c15..0d4be2a 100644
--- a/glider.js
+++ b/glider.js
@@ -5,7 +5,7 @@
   \___//_//_/ \_,_/ \__//_/  (_)__/ //___/
                               |___/
 
-  Version: 1.5.4
+  Version: 1.6.0
   Author: Nick Piscitelli (pickykneee)
   Website: https://nickpiscitelli.com
   Documentation: http://nickpiscitelli.github.io/Glider.js
@@ -36,6 +36,7 @@
       _.opt = Object.assign({}, {
         slidesToScroll: 1,
         slidesToShow: 1,
+        resizeLock: true,
         duration: .5,
         // easeInQuad
         easing: function (x, t, b, c, d) {
@@ -44,7 +45,7 @@
       }, settings);
 
       // set defaults
-      _.aIndex = _.page = _.slide = 0;
+      _.animate_id = _.page = _.slide = 0;
       _.arrows = {};
 
       // preserve original options to
@@ -59,7 +60,7 @@
         _.track.appendChild(_.ele.children[0])
       }
 
-      // calculate list dimensions
+      // start glider
       _.init();
 
       // set events
@@ -89,14 +90,18 @@
     var breakpointChanged = _.settingsBreakpoint();
     if (!paging) paging = breakpointChanged;
 
-    if (_.opt.slidesToShow === 'auto'){
-      _.opt.slidesToShow = Math.floor(_.containerWidth / _.opt.itemWidth);
+    if (_.opt.slidesToShow === 'auto' || _.opt._autoSlide){
+      var slideCount = _.containerWidth / _.opt.itemWidth;
+
+      _.opt._autoSlide = _.opt.slidesToShow = _.opt.exactWidth ?
+        slideCount : Math.floor(slideCount);
     }
     if (_.opt.slidesToScroll === 'auto'){
-      _.opt.slidesToScroll = _.opt.slidesToShow;
+      _.opt.slidesToScroll = Math.floor(_.opt.slidesToShow);
     }
 
-    _.itemWidth = _.containerWidth / _.opt.slidesToShow;
+    _.itemWidth = _.opt.exactWidth ?
+      _.opt.itemWidth : _.containerWidth / _.opt.slidesToShow;
 
     // set slide dimensions
     [].forEach.call(_.slides, function(__){
@@ -109,14 +114,16 @@
     _.track.style.width = width + 'px';
     _.trackWidth = width;
 
-    // rebuild paging controls when settings changed
-    if (!refresh || paging){
+    _.opt.resizeLock && _.scrollTo(_.slide * _.itemWidth, 0);
+
+    if (breakpointChanged || paging){
       _.bindArrows();
       _.buildDots();
-      _.updateControls();
       _.bindDrag();
     }
 
+    _.updateControls();
+
     _.emit(refresh ? 'refresh ' : 'loaded')
   };
 
@@ -172,7 +179,13 @@
 
   gliderPrototype.bindArrows = function(){
     var _ = this;
-    if (!_.opt.arrows)  return
+    if (!_.opt.arrows) {
+      Object.keys(_.arrows).forEach(function(direction){
+        var element = _.arrows[direction];
+        _.event(element, 'remove', { click: element._func })
+      });
+      return;
+    }
     ['prev','next'].forEach(function(direction){
       var arrow = _.opt.arrows[direction]
       if (arrow){
@@ -198,8 +211,10 @@
 
     var disableArrows = _.containerWidth >= _.trackWidth;
 
-    if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
-    if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >=  Math.floor(_.trackWidth) || disableArrows)
+    if (!_.opt.rewind){
+      if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
+      if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >=  Math.floor(_.trackWidth) || disableArrows)
+    }
 
     _.slide = Math.round(_.ele.scrollLeft / _.itemWidth);
     _.page = Math.round(_.ele.scrollLeft / _.containerWidth);
@@ -210,9 +225,10 @@
       extraMiddle = 0;
     }
 
+    // the last page may be less than one half of a normal page width so
+    // the page is rounded down. when at the end, force the page to turn
     if (_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)){
       _.page = _.dots ? _.dots.children.length - 1 : 0;
-      _.slide = _.slides.length - _.opt.slidesToShow;
     }
 
     [].forEach.call(_.slides,function(slide,index){
@@ -265,10 +281,11 @@
     if(e)   e.preventDefault();
 
     var _ = this, originalSlide = slide;
-    _.aIndex++;
+    ++_.animate_id;
 
     if (dot === true) {
       slide = slide * _.containerWidth
+      slide = Math.round(slide / _.itemWidth) * _.itemWidth
     } else {
       if (typeof slide === 'string') {
         var backwards = slide === 'prev';
@@ -283,8 +300,16 @@
         if (backwards) slide -= _.opt.slidesToScroll;
         else  slide += _.opt.slidesToScroll;
 
+        if (_.opt.rewind){
+          var scrollLeft = _.ele.scrollLeft;
+          slide = backwards && !scrollLeft ? _.slides.length :
+            !backwards && scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) ?
+              0 : slide;
+        }
       }
+
       slide = Math.max(Math.min(slide, _.slides.length), 0)
+
       _.slide = slide;
       slide = _.itemWidth * slide
     }
@@ -320,20 +345,21 @@
       }
     }
     // set back to defaults in case they were overriden
+    var breakpointChanged = _.breakpoint !== 0;
     _.opt = Object.assign({}, _._opt);
     _.breakpoint = 0;
-    return false;
+    return breakpointChanged;
   }
 
   gliderPrototype.scrollTo = function(scrollTarget, scrollDuration, callback) {
     var
       _ = this,
       start = new Date().getTime(),
-      animateIndex = _.aIndex,
+      animateIndex = _.animate_id,
       animate = function(){
         var now = (new Date().getTime() - start);
         _.ele.scrollLeft = _.ele.scrollLeft + (scrollTarget - _.ele.scrollLeft) * _.opt.easing(0, now, 0, 1, scrollDuration);
-        if(now < scrollDuration && animateIndex == _.aIndex){
+        if(now < scrollDuration && animateIndex == _.animate_id){
           window.requestAnimationFrame(animate);
         } else {
           _.ele.scrollLeft = scrollTarget
diff --git a/glider.min.js b/glider.min.js
index 75f6a49..4337083 100644
--- a/glider.min.js
+++ b/glider.min.js
@@ -5,7 +5,7 @@
   \___//_//_/ \_,_/ \__//_/  (_)__/ //___/
                               |___/
 
-  Version: 1.5.5
+  Version: 1.6.0
   Author: Nick Piscitelli (pickykneee)
   Website: https://nickpiscitelli.com
   Documentation: http://nickpiscitelli.github.io/Glider.js
@@ -13,17 +13,17 @@
   Release Date: October 25th, 2018
 
 */
-(function(e){"function"===typeof define&&define.amd?define(e):"object"===typeof exports?module.exports=e():e()})(function(){var e=(window.Glider=function(b,a){if(b._glider)return b._glider;this.ele=b;this.ele.classList.add("glider");this.ele._glider=this;this.opt=Object.assign({},{slidesToScroll:1,slidesToShow:1,duration:.5,easing:function(a,b,e,h,g){return h*(b/=g)*b+e}},a);this.aIndex=this.page=this.slide=0;this.arrows={};this._opt=this.opt;this.track=document.createElement("div");this.track.className=
-"glider-track";for(this.ele.appendChild(this.track);1!==this.ele.children.length;)this.track.appendChild(this.ele.children[0]);this.init();this.resize=this.init.bind(this,!0);this.event(this.ele,"add",{scroll:this.updateControls.bind(this)});this.event(window,"add",{resize:this.resize})}).prototype;e.init=function(b,a){var c=this,d=0;c.slides=c.track.children;[].forEach.call(c.slides,function(a){a.classList.add("glider-slide")});c.containerWidth=c.ele.clientWidth;var e=c.settingsBreakpoint();a||(a=
-e);"auto"===c.opt.slidesToShow&&(c.opt.slidesToShow=Math.floor(c.containerWidth/c.opt.itemWidth));"auto"===c.opt.slidesToScroll&&(c.opt.slidesToScroll=c.opt.slidesToShow);c.itemWidth=c.containerWidth/c.opt.slidesToShow;[].forEach.call(c.slides,function(a){a.style.height="auto";a.style.width=c.itemWidth+"px";d+=c.itemWidth});c.track.style.width=d+"px";c.trackWidth=d;if(!b||a)c.bindArrows(),c.buildDots(),c.updateControls(),c.bindDrag();c.emit(b?"refresh ":"loaded")};e.bindDrag=function(){var b=this;
-b.mouse=b.mouse||b.handleMouse.bind(b);var a=function(){b.mouseDown=void 0;b.ele.classList.remove("drag")};a={mouseup:a,mouseleave:a,mousedown:function(a){b.mouseDown=a.clientX;b.ele.classList.add("drag")},mousemove:b.mouse};b.ele.classList.toggle("draggable",!0===b.opt.draggable);b.event(b.ele,"remove",a);b.opt.draggable&&b.event(b.ele,"add",a)};e.buildDots=function(){if(this.opt.dots){if(this.dots="string"===typeof this.opt.dots?document.querySelector(this.opt.dots):this.opt.dots){this.dots.innerHTML=
-"";this.dots.className="glider-dots";for(var b=0;b<Math.ceil(this.slides.length/this.opt.slidesToShow);++b){var a=document.createElement("button");a.dataset.index=b;a.setAttribute("aria-label","Page "+(b+1));a.className="glider-dot "+(b?"":"active");this.event(a,"add",{click:this.scrollItem.bind(this,b,!0)});this.dots.appendChild(a)}}}else this.dots&&(this.dots.innerHTML="")};e.bindArrows=function(){var b=this;b.opt.arrows&&["prev","next"].forEach(function(a){var c=b.opt.arrows[a];c&&("string"===
-typeof c&&(c=document.querySelector(c)),c._func=c._func||b.scrollItem.bind(b,a),b.event(c,"remove",{click:c._func}),b.event(c,"add",{click:c._func}),b.arrows[a]=c)})};e.updateControls=function(b){var a=this;b&&!a.opt.scrollPropagate&&b.stopPropagation();var c=a.containerWidth>=a.trackWidth;a.arrows.prev&&a.arrows.prev.classList.toggle("disabled",0>=a.ele.scrollLeft||c);a.arrows.next&&a.arrows.next.classList.toggle("disabled",a.ele.scrollLeft+a.containerWidth>=Math.floor(a.trackWidth)||c);a.slide=
-Math.round(a.ele.scrollLeft/a.itemWidth);a.page=Math.round(a.ele.scrollLeft/a.containerWidth);var d=a.slide+Math.floor(Math.floor(a.opt.slidesToShow)/2),e=Math.floor(a.opt.slidesToShow)%2?0:d+1;1==Math.floor(a.opt.slidesToShow)&&(e=0);a.ele.scrollLeft+a.containerWidth>=Math.floor(a.trackWidth)&&(a.page=a.dots?a.dots.children.length-1:0,a.slide=a.slides.length-a.opt.slidesToShow);[].forEach.call(a.slides,function(b,c){var f=b.classList,l=f.contains("visible"),g=a.ele.scrollLeft,h=a.ele.scrollLeft+
-a.containerWidth,k=a.itemWidth*c,m=k+a.itemWidth;f.forEach(function(a){/^left|right/.test(a)&&f.remove(a)});f.toggle("active",a.slide===c);d==c||e&&e==c?f.add("center"):(f.remove("center"),f.add([c<d?"left":"right",Math.abs(c-(c<d?d:e||d))].join("-")));g=k>=g&&m<=h;f.toggle("visible",g);g!=l&&a.emit("slide-"+(g?"visible":"hidden"),{slide:c})});a.dots&&[].forEach.call(a.dots.children,function(b,c){b.classList.toggle("active",a.page===c)});b&&a.opt.scrollLock&&(clearTimeout(a.scrollLock),a.scrollLock=
-setTimeout(function(){clearTimeout(a.scrollLock);a.ele.scrollLeft/a.itemWidth%1&&a.scrollItem(a.round(a.ele.scrollLeft/a.itemWidth))},a.opt.scrollLockDelay||250))};e.scrollItem=function(b,a,c){c&&c.preventDefault();var d=this,e=b;d.aIndex++;!0===a?b*=d.containerWidth:("string"===typeof b&&(c="prev"===b,b=d.opt.slidesToScroll%1||d.opt.slidesToShow%1?d.round(d.ele.scrollLeft/d.itemWidth):d.slide,b=c?b-d.opt.slidesToScroll:b+d.opt.slidesToScroll),b=Math.max(Math.min(b,d.slides.length),0),d.slide=b,b*=
-d.itemWidth);d.scrollTo(b,d.opt.duration*Math.abs(d.ele.scrollLeft-b),function(){d.updateControls();d.emit("animated",{value:e,type:"string"===typeof e?"arrow":a?"dot":"slide"})});return!1};e.settingsBreakpoint=function(){var b=this._opt.responsive;if(b)for(var a=0;a<b.length;++a){var c=b[a];if(window.innerWidth>c.breakpoint)return this.breakpoint!=c.breakpoint?(this.opt=Object.assign({},this._opt,c.settings),this.breakpoint=c.breakpoint,!0):!1}this.opt=Object.assign({},this._opt);this.breakpoint=
-0;return!1};e.scrollTo=function(b,a,c){var d=this,e=(new Date).getTime(),h=d.aIndex,g=function(){var f=(new Date).getTime()-e;d.ele.scrollLeft+=(b-d.ele.scrollLeft)*d.opt.easing(0,f,0,1,a);f<a&&h==d.aIndex?window.requestAnimationFrame(g):(d.ele.scrollLeft=b,c&&c.call(d))};window.requestAnimationFrame(g)};e.removeItem=function(b){this.slides.length&&(this.track.removeChild(this.slides[b]),this.refresh(!0),this.emit("remove"))};e.addItem=function(b){this.track.appendChild(b);this.refresh(!0);this.emit("add")};
-e.handleMouse=function(b){this.mouseDown&&(this.ele.scrollLeft+=(this.mouseDown-b.clientX)*(this.opt.dragVelocity||3.3),this.mouseDown=b.clientX)};e.round=function(b){var a=1/(this.opt.slidesToScroll%1||1);return Math.round(b*a)/a};e.refresh=function(b){this.init(!0,b)};e.setOption=function(b,a){var c=this;c.breakpoint&&c._opt.responsive.forEach(function(a){a.breakpoint===c.breakpoint&&(a.settings=Object.assign({},a.settings,b))});if(!c.breakpoint||a)c._opt=Object.assign({},c._opt,b);c.opt=Object.assign({},
-c.opt,b)};e.destroy=function(){var b=this.ele.cloneNode(!0),a=function(a){a.removeAttribute("style");a.classList.forEach(function(b){/^glider/.test(b)&&a.classList.remove(b)})};b.children[0].outerHTML=b.children[0].innerHTML;a(b);[].forEach.call(b.getElementsByTagName("*"),a);this.ele.parentNode.replaceChild(b,this.ele);this.event(window,"remove",{resize:this.resize});this.emit("destroy")};e.emit=function(b,a){var c=new CustomEvent("glider-"+b,{bubbles:!this.opt.eventPropagate,detail:a});this.ele.dispatchEvent(c)};
-e.event=function(b,a,c){var d=b[a+"EventListener"].bind(b);Object.keys(c).forEach(function(a){d(a,c[a])})}});
\ No newline at end of file
+(function(e){"function"===typeof define&&define.amd?define(e):"object"===typeof exports?module.exports=e():e()})(function(){var e=(window.Glider=function(b,a){if(b._glider)return b._glider;this.ele=b;this.ele.classList.add("glider");this.ele._glider=this;this.opt=Object.assign({},{slidesToScroll:1,slidesToShow:1,resizeLock:!0,duration:.5,easing:function(b,a,e,f,g){return f*(a/=g)*a+e}},a);this.animate_id=this.page=this.slide=0;this.arrows={};this._opt=this.opt;this.track=document.createElement("div");
+this.track.className="glider-track";for(this.ele.appendChild(this.track);1!==this.ele.children.length;)this.track.appendChild(this.ele.children[0]);this.init();this.resize=this.init.bind(this,!0);this.event(this.ele,"add",{scroll:this.updateControls.bind(this)});this.event(window,"add",{resize:this.resize})}).prototype;e.init=function(b,a){var c=this,d=0;c.slides=c.track.children;[].forEach.call(c.slides,function(a){a.classList.add("glider-slide")});c.containerWidth=c.ele.clientWidth;var e=c.settingsBreakpoint();
+a||(a=e);if("auto"===c.opt.slidesToShow||c.opt._autoSlide){var f=c.containerWidth/c.opt.itemWidth;c.opt._autoSlide=c.opt.slidesToShow=c.opt.exactWidth?f:Math.floor(f)}"auto"===c.opt.slidesToScroll&&(c.opt.slidesToScroll=Math.floor(c.opt.slidesToShow));c.itemWidth=c.opt.exactWidth?c.opt.itemWidth:c.containerWidth/c.opt.slidesToShow;[].forEach.call(c.slides,function(a){a.style.height="auto";a.style.width=c.itemWidth+"px";d+=c.itemWidth});c.track.style.width=d+"px";c.trackWidth=d;c.opt.resizeLock&&c.scrollTo(c.slide*
+c.itemWidth,0);if(e||a)c.bindArrows(),c.buildDots(),c.bindDrag();c.updateControls();c.emit(b?"refresh ":"loaded")};e.bindDrag=function(){var b=this;b.mouse=b.mouse||b.handleMouse.bind(b);var a=function(){b.mouseDown=void 0;b.ele.classList.remove("drag")};a={mouseup:a,mouseleave:a,mousedown:function(a){b.mouseDown=a.clientX;b.ele.classList.add("drag")},mousemove:b.mouse};b.ele.classList.toggle("draggable",!0===b.opt.draggable);b.event(b.ele,"remove",a);b.opt.draggable&&b.event(b.ele,"add",a)};e.buildDots=
+function(){if(this.opt.dots){if(this.dots="string"===typeof this.opt.dots?document.querySelector(this.opt.dots):this.opt.dots){this.dots.innerHTML="";this.dots.className="glider-dots";for(var b=0;b<Math.ceil(this.slides.length/this.opt.slidesToShow);++b){var a=document.createElement("button");a.dataset.index=b;a.setAttribute("aria-label","Page "+(b+1));a.className="glider-dot "+(b?"":"active");this.event(a,"add",{click:this.scrollItem.bind(this,b,!0)});this.dots.appendChild(a)}}}else this.dots&&(this.dots.innerHTML=
+"")};e.bindArrows=function(){var b=this;b.opt.arrows?["prev","next"].forEach(function(a){var c=b.opt.arrows[a];c&&("string"===typeof c&&(c=document.querySelector(c)),c._func=c._func||b.scrollItem.bind(b,a),b.event(c,"remove",{click:c._func}),b.event(c,"add",{click:c._func}),b.arrows[a]=c)}):Object.keys(b.arrows).forEach(function(a){a=b.arrows[a];b.event(a,"remove",{click:a._func})})};e.updateControls=function(b){var a=this;b&&!a.opt.scrollPropagate&&b.stopPropagation();var c=a.containerWidth>=a.trackWidth;
+a.opt.rewind||(a.arrows.prev&&a.arrows.prev.classList.toggle("disabled",0>=a.ele.scrollLeft||c),a.arrows.next&&a.arrows.next.classList.toggle("disabled",a.ele.scrollLeft+a.containerWidth>=Math.floor(a.trackWidth)||c));a.slide=Math.round(a.ele.scrollLeft/a.itemWidth);a.page=Math.round(a.ele.scrollLeft/a.containerWidth);var d=a.slide+Math.floor(Math.floor(a.opt.slidesToShow)/2),e=Math.floor(a.opt.slidesToShow)%2?0:d+1;1==Math.floor(a.opt.slidesToShow)&&(e=0);a.ele.scrollLeft+a.containerWidth>=Math.floor(a.trackWidth)&&
+(a.page=a.dots?a.dots.children.length-1:0);[].forEach.call(a.slides,function(b,c){var f=b.classList,h=f.contains("visible"),g=a.ele.scrollLeft,l=a.ele.scrollLeft+a.containerWidth,k=a.itemWidth*c,m=k+a.itemWidth;f.forEach(function(a){/^left|right/.test(a)&&f.remove(a)});f.toggle("active",a.slide===c);d==c||e&&e==c?f.add("center"):(f.remove("center"),f.add([c<d?"left":"right",Math.abs(c-(c<d?d:e||d))].join("-")));g=k>=g&&m<=l;f.toggle("visible",g);g!=h&&a.emit("slide-"+(g?"visible":"hidden"),{slide:c})});
+a.dots&&[].forEach.call(a.dots.children,function(b,c){b.classList.toggle("active",a.page===c)});b&&a.opt.scrollLock&&(clearTimeout(a.scrollLock),a.scrollLock=setTimeout(function(){clearTimeout(a.scrollLock);a.ele.scrollLeft/a.itemWidth%1&&a.scrollItem(a.round(a.ele.scrollLeft/a.itemWidth))},a.opt.scrollLockDelay||250))};e.scrollItem=function(b,a,c){c&&c.preventDefault();var d=this,e=b;++d.animate_id;if(!0===a)b*=d.containerWidth,b=Math.round(b/d.itemWidth)*d.itemWidth;else{if("string"===typeof b&&
+(c="prev"===b,b=d.opt.slidesToScroll%1||d.opt.slidesToShow%1?d.round(d.ele.scrollLeft/d.itemWidth):d.slide,b=c?b-d.opt.slidesToScroll:b+d.opt.slidesToScroll,d.opt.rewind)){var f=d.ele.scrollLeft;b=c&&!f?d.slides.length:!c&&f+d.containerWidth>=Math.floor(d.trackWidth)?0:b}b=Math.max(Math.min(b,d.slides.length),0);d.slide=b;b*=d.itemWidth}d.scrollTo(b,d.opt.duration*Math.abs(d.ele.scrollLeft-b),function(){d.updateControls();d.emit("animated",{value:e,type:"string"===typeof e?"arrow":a?"dot":"slide"})});
+return!1};e.settingsBreakpoint=function(){var b=this._opt.responsive;if(b)for(var a=0;a<b.length;++a){var c=b[a];if(window.innerWidth>c.breakpoint)return this.breakpoint!=c.breakpoint?(this.opt=Object.assign({},this._opt,c.settings),this.breakpoint=c.breakpoint,!0):!1}b=0!==this.breakpoint;this.opt=Object.assign({},this._opt);this.breakpoint=0;return b};e.scrollTo=function(b,a,c){var d=this,e=(new Date).getTime(),f=d.animate_id,g=function(){var h=(new Date).getTime()-e;d.ele.scrollLeft+=(b-d.ele.scrollLeft)*
+d.opt.easing(0,h,0,1,a);h<a&&f==d.animate_id?window.requestAnimationFrame(g):(d.ele.scrollLeft=b,c&&c.call(d))};window.requestAnimationFrame(g)};e.removeItem=function(b){this.slides.length&&(this.track.removeChild(this.slides[b]),this.refresh(!0),this.emit("remove"))};e.addItem=function(b){this.track.appendChild(b);this.refresh(!0);this.emit("add")};e.handleMouse=function(b){this.mouseDown&&(this.ele.scrollLeft+=(this.mouseDown-b.clientX)*(this.opt.dragVelocity||3.3),this.mouseDown=b.clientX)};e.round=
+function(b){var a=1/(this.opt.slidesToScroll%1||1);return Math.round(b*a)/a};e.refresh=function(b){this.init(!0,b)};e.setOption=function(b,a){var c=this;c.breakpoint&&c._opt.responsive.forEach(function(a){a.breakpoint===c.breakpoint&&(a.settings=Object.assign({},a.settings,b))});if(!c.breakpoint||a)c._opt=Object.assign({},c._opt,b);c.opt=Object.assign({},c.opt,b)};e.destroy=function(){var b=this.ele.cloneNode(!0),a=function(a){a.removeAttribute("style");a.classList.forEach(function(b){/^glider/.test(b)&&
+a.classList.remove(b)})};b.children[0].outerHTML=b.children[0].innerHTML;a(b);[].forEach.call(b.getElementsByTagName("*"),a);this.ele.parentNode.replaceChild(b,this.ele);this.event(window,"remove",{resize:this.resize});this.emit("destroy")};e.emit=function(b,a){var c=new CustomEvent("glider-"+b,{bubbles:!this.opt.eventPropagate,detail:a});this.ele.dispatchEvent(c)};e.event=function(b,a,c){var d=b[a+"EventListener"].bind(b);Object.keys(c).forEach(function(a){d(a,c[a])})}});
\ No newline at end of file
diff --git a/index.html b/index.html
index 8cf6d11..c80ebb9 100644
--- a/index.html
+++ b/index.html
@@ -1,56 +1,76 @@
 <!doctype html>
 <html>
   <head>
-    <link rel="stylesheet" type="text/css" href="glider.min.css" />
-    <script src="glider.min.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css">@-ms-viewport{width:auto!important;}</style>
+    <link rel="stylesheet" type="text/css" href="glider.css" />
+    <script src="glider.js"></script>
     <script>
       window.addEventListener('load',function(){
-        // example event hook implementing basic lazy loading images
-
         document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
-            var imgs_to_anticipate = 3;
             var glider = Glider(this);
-            for (var i = 0; i <= imgs_to_anticipate; ++i){
-                var index = Math.min(event.detail.slide + i, glider.slides.length - 1),
-                    glider = glider;
-                loadImages.call(glider.slides[index],function(){
-                    glider.refresh(true);
-                })
-            }
+            console.log('Slide Visible %s', event.detail.slide)
+        });
+        document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){
+            console.log('Slide Hidden %s', event.detail.slide)
+        });
+        document.querySelector('.glider').addEventListener('glider-refresh', function(event){
+            console.log('Refresh')
+        });
+        document.querySelector('.glider').addEventListener('glider-loaded', function(event){
+            console.log('Loaded')
         });
 
         window._ = new Glider(document.querySelector('.glider'), {
-            slidesToShow: 'auto',
-            itemWidth: 300,
-            slidesToScroll: 'auto',
+            slidesToShow: 1, //'auto',
+            slidesToScroll: 1,
+            itemWidth: 150,
             draggable: true,
+            scrollLock: false,
             dots: '#dots',
+            rewind: true,
             arrows: {
                 prev: '.glider-prev',
                 next: '.glider-next'
             },
             responsive: [
+                {
+                    breakpoint: 800,
+                    settings: {
+                        slidesToScroll: 'auto',
+                        itemWidth: 300,
+                        slidesToShow: 'auto',
+                        exactWidth: true
+                    }
+                },
                 {
                     breakpoint: 700,
                     settings: {
-                        draggable: false
+                        slidesToScroll: 4,
+                        slidesToShow: 4,
+                        dots: false,
+                        arrows: false,
+                    }
+                },
+                {
+                    breakpoint: 600,
+                    settings: {
+                        slidesToScroll: 3,
+                        slidesToShow: 3
+                    }
+                },
+                {
+                    breakpoint: 500,
+                    settings: {
+                        slidesToScroll: 2,
+                        slidesToShow: 2,
+                        dots: false,
+                        arrows: false,
+                        scrollLock: true
                     }
                 }
             ]
         });
-        function loadImages(callback){
-            [].forEach.call(this.querySelectorAll('img'),function(img){
-                var _img = new Image,  _src = img.getAttribute('data-src');
-                _img.onload = function(){
-                    img.src = _src;
-                    img.classList.add('loaded');
-                    callback && callback(img);
-                }
-                if(img.src !== _src) _img.src = _src;
-            });
-        }
       });
-
     </script>
 
 
@@ -60,6 +80,9 @@
         Not necessary for Glider.js
     -->
     <style type="text/css">
+        * {
+            box-sizing: border-box
+        }
         html, body {
             width: 100%;
             overflow: hidden;
@@ -71,38 +94,40 @@
         }
         .glider-contain {
             width: 90%;
-            max-width: 750px;
+            max-width: 997px;
             margin: 0 auto;
         }
         .glider-slide {
             min-height: 150px;
         }
-
+        .glider-slide img {
+            width: 100%;
+        }
     </style>
   </head>
   <body>
     <div class="glider-contain">
         <div class="glider">
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=1"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=2"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=3"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=4"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=5"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=6"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=7"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=8"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=9"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=10"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=11"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=12"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=13"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=14"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=15"></div>
-            <div><img alt="Test" data-src="http://placehold.it/300x300?text=16"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=1"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=2"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=3"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=4"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=5"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=6"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=7"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=8"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=9"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=10"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=11"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=12"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=13"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=14"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=15"></div>
+            <div><img alt="Test" src="http://placehold.it/300x300?text=16"></div>
         </div>
+        <button class="glider-prev">&laquo;</button>
+        <button class="glider-next">&raquo;</button>
         <div id="dots"></div>
-        <a class="glider-prev">&laquo;</a>
-        <a class="glider-next">&raquo;</a>
     </div>
   </body>
 </html>