glider-js - npm Package Compare versions

Comparing version 1.5.4 to 1.6.0

docs/assets/js/glider.js

@@ -8,3 +8,3 @@ /*
 
-  Version: 1.5.4
+  Version: 1.6.0
   Author: Nick Piscitelli (pickykneee)
@@ -40,2 +40,3 @@ Website: https://nickpiscitelli.com
         slidesToShow: 1,
+        resizeLock: true,
         duration: .5,
@@ -49,3 +50,3 @@ // easeInQuad
       // set defaults
-      _.aIndex = _.page = _.slide = 0;
+      _.animate_id = _.page = _.slide = 0;
       _.arrows = {};
@@ -65,3 +66,3 @@
 
-      // calculate list dimensions
+      // start glider
       _.init();
@@ -96,10 +97,14 @@
 
-    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;
 
@@ -117,10 +122,12 @@ // set slide dimensions
 
-    // 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')
@@ -168,9 +175,10 @@ };
     for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i){
-      var li = document.createElement(_.opt.dotTag || 'i');
-      li.setAttribute('data-index', i);
-      li.className = 'glider-dot '+(i ? '' : 'active');
-      _.event(li, 'add', {
+      var dot = document.createElement('button');
+      dot.dataset.index = i;
+      dot.setAttribute('aria-label', 'Page '+(i+1));
+      dot.className = 'glider-dot '+(i ? '' : 'active');
+      _.event(dot, 'add', {
         click: _.scrollItem.bind(_, i, true)
       })
-      _.dots.appendChild(li);
+      _.dots.appendChild(dot);
     }
@@ -181,3 +189,9 @@ }
     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){
@@ -208,4 +222,6 @@ var arrow = _.opt.arrows[direction]
 
-    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)
+    }
 
@@ -221,5 +237,6 @@ _.slide = Math.round(_.ele.scrollLeft / _.itemWidth);
 
+    // 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;
     }
@@ -277,6 +294,7 @@
     var _ = this, originalSlide = slide;
-    _.aIndex++;
+    ++_.animate_id;
 
     if (dot === true) {
       slide = slide * _.containerWidth
+      slide = Math.round(slide / _.itemWidth) * _.itemWidth
     } else {
@@ -296,4 +314,12 @@ if (typeof slide === 'string') {
 
+        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;
@@ -334,5 +360,6 @@ slide = _.itemWidth * slide
     // set back to defaults in case they were overriden
+    var breakpointChanged = _.breakpoint !== 0;
     _.opt = Object.assign({}, _._opt);
     _.breakpoint = 0;
-    return false;
+    return breakpointChanged;
   }
@@ -344,7 +371,7 @@
       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);
@@ -351,0 +378,0 @@ } else {

docs/assets/js/main.js

@@ -27,2 +27,13 @@ /* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */
 
+
+document.addEventListener('glider-loaded', hideFFScrollBars);
+document.addEventListener('glider-refresh', hideFFScrollBars);
+function hideFFScrollBars(e){
+  if(/firefox/i.test(navigator.userAgent)){
+    if (window.innerWidth > 575 && e.target.id !== 'glider-persp'){
+      e.target.parentNode.style.height = (e.target.offsetHeight - 17) + 'px'
+    }
+  }
+}
+
 (function ($) {
@@ -29,0 +40,0 @@

glider.js

@@ -8,3 +8,3 @@ /*
 
-  Version: 1.5.4
+  Version: 1.6.0
   Author: Nick Piscitelli (pickykneee)
@@ -40,2 +40,3 @@ Website: https://nickpiscitelli.com
         slidesToShow: 1,
+        resizeLock: true,
         duration: .5,
@@ -49,3 +50,3 @@ // easeInQuad
       // set defaults
-      _.aIndex = _.page = _.slide = 0;
+      _.animate_id = _.page = _.slide = 0;
       _.arrows = {};
@@ -65,3 +66,3 @@
 
-      // calculate list dimensions
+      // start glider
       _.init();
@@ -96,10 +97,14 @@
 
-    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;
 
@@ -117,10 +122,12 @@ // set slide dimensions
 
-    // 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')
@@ -168,9 +175,10 @@ };
     for (var i = 0; i < Math.ceil(_.slides.length / _.opt.slidesToShow); ++i){
-      var li = document.createElement(_.opt.dotTag || 'i');
-      li.setAttribute('data-index', i);
-      li.className = 'glider-dot '+(i ? '' : 'active');
-      _.event(li, 'add', {
+      var dot = document.createElement('button');
+      dot.dataset.index = i;
+      dot.setAttribute('aria-label', 'Page '+(i+1));
+      dot.className = 'glider-dot '+(i ? '' : 'active');
+      _.event(dot, 'add', {
         click: _.scrollItem.bind(_, i, true)
       })
-      _.dots.appendChild(li);
+      _.dots.appendChild(dot);
     }
@@ -181,3 +189,9 @@ }
     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){
@@ -208,4 +222,6 @@ var arrow = _.opt.arrows[direction]
 
-    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)
+    }
 
@@ -221,5 +237,6 @@ _.slide = Math.round(_.ele.scrollLeft / _.itemWidth);
 
+    // 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;
     }
@@ -277,6 +294,7 @@
     var _ = this, originalSlide = slide;
-    _.aIndex++;
+    ++_.animate_id;
 
     if (dot === true) {
       slide = slide * _.containerWidth
+      slide = Math.round(slide / _.itemWidth) * _.itemWidth
     } else {
@@ -296,4 +314,12 @@ if (typeof slide === 'string') {
 
+        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;
@@ -334,5 +360,6 @@ slide = _.itemWidth * slide
     // set back to defaults in case they were overriden
+    var breakpointChanged = _.breakpoint !== 0;
     _.opt = Object.assign({}, _._opt);
     _.breakpoint = 0;
-    return false;
+    return breakpointChanged;
   }
@@ -344,7 +371,7 @@
       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);
@@ -351,0 +378,0 @@ } else {

glider.min.js

@@ -8,3 +8,3 @@ /*
 
-  Version: 1.5.4
+  Version: 1.6.0
   Author: Nick Piscitelli (pickykneee)
@@ -17,15 +17,15 @@ Website: https://nickpiscitelli.com
 */
-(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(this.opt.dotTag||"i");a.setAttribute("data-index",b);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])})}});
+(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])})}});

package.json

 {
   "name": "glider-js",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "description": "A fast, lightweight carousel alternative",
@@ -5,0 +5,0 @@ "main": "glider.js",

README.md

 # 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!)
 
@@ -44,10 +44,29 @@ Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/
 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')
   },
@@ -76,2 +95,5 @@
 
+  // Force centering slide after resize event
+  resizeLock: true,
+
   // Glider.js breakpoints are mobile-first
@@ -133,2 +155,34 @@ // be conscious of your ordering
 
+#### Native Scrollbars
+
+Since Glider.js uses native scrolling, the browser wants to apply the standard scrollbar to the glider. In most cases, this is fine since the scrollbar can be hidden with CSS and Glider.js does so when appropriate. In browsers such as Firefox though, the scrollbars cannot be hidden with CSS and require additional markup to hide.
+
+To hide the scrollbars in Firefox, you'll want to wrap your glider with `<div class="glider-wrap">` and apply the following CSS/JS:
+
+```css
+@-moz-document url-prefix() {
+  .glider-track {
+    margin-bottom: 17px;
+  }
+  .glider-wrap {
+    overflow: hidden;
+  }
+}
+```
+
+```javascript
+document.addEventListener('glider-loaded', hideFFScrollBars);
+document.addEventListener('glider-refresh', hideFFScrollBars);
+function hideFFScrollBars(e){
+  var scrollbarHeight = 17; // Currently 17, may change with updates
+  if(/firefox/i.test(navigator.userAgent)){
+    // We only need to appy to desktop. Firefox for mobile uses
+    // a different rendering engine (WebKit)
+    if (window.innerWidth > 575){
+      e.target.parentNode.style.height = (e.target.offsetHeight - scrollbarHeight) + 'px'
+    }
+  }
+}
+```
+
 #### Dependencies
@@ -135,0 +189,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1612853

increased by0.55%

Lines of code

6503

increased by1.32%

Number of lines in readme file

196

increased by38.03%

Worsened metrics

Number of package files

67

decreased by-1.47%

No dependency changes