hooper 0.2.2 → 0.3.2

package/dist/hooper.esm.js

@@ -1,5 +1,5 @@
 /**
-  * Hopper 0.2.1
+  * Hopper 0.3.2
   * (c) 2019
     * @license MIT
     */
@@ -39,6 +39,26 @@ function _objectSpread(target) {
   return target;
 }
 
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) {
+    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+}
+
+function _iterableToArray(iter) {
+  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+
 function getInRange(value, min, max) {
   return Math.max(Math.min(value, max), min);
 }
@@ -76,47 +96,81 @@ function camelCaseToString(camelCase) {
   return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
 }
 function normalizeSlideIndex(index, slidesCount) {
+  var realIndex;
+
   if (index < 0) {
-    return (index + slidesCount) % slidesCount;
+    realIndex = (index + slidesCount) % slidesCount;
+  } else {
+    realIndex = index % slidesCount;
+  } // Test for NaN
+
+
+  if (realIndex !== realIndex) {
+    return 0;
   }
 
-  return index % slidesCount;
+  return realIndex;
 }
+function cloneNode(h, vNode) {
+  // use the context that the original vnode was created in.
+  var children = vNode.children || vNode.componentOptions.children || vNode.text;
+  var tag = vNode.componentOptions.Ctor;
+  return h(tag, vNode.data, children);
+} // IE11 :)
+
+function assignPoly(target) {
+  if (target === undefined || target === null) {
+    throw new TypeError('Cannot convert first argument to object');
+  }
 
-function extractData(vnode, indx) {
-  var cOpts = vnode.componentOptions;
-  var data = {
-    class: vnode.data.class,
-    staticClass: vnode.data.staticClass,
-    style: vnode.data.style,
-    attrs: vnode.data.attrs,
-    props: _objectSpread({}, cOpts.propsData, {
-      isClone: true,
-      index: indx
-    }),
-    on: cOpts.listeners,
-    nativeOn: vnode.data.nativeOn,
-    directives: vnode.data.directives,
-    scopesSlots: vnode.data.scopesSlots,
-    slot: vnode.data.slot,
-    ref: vnode.data.ref,
-    key: vnode.data.key ? "".concat(indx, "-clone") : undefined
-  };
-  return data;
+  var to = Object(target);
+
+  for (var i = 1; i < arguments.length; i++) {
+    var nextSource = arguments[i];
+
+    if (nextSource === undefined || nextSource === null) {
+      continue;
+    }
+
+    nextSource = Object(nextSource);
+    var keysArray = Object.keys(Object(nextSource));
+
+    for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+      var nextKey = keysArray[nextIndex];
+      var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+
+      if (desc !== undefined && desc.enumerable) {
+        to[nextKey] = nextSource[nextKey];
+      }
+    }
+  }
+
+  return to;
 }
 
-function cloneSlide(vnode, indx) {
-  // use the context that the original vnode was created in.
-  var h = vnode.context && vnode.context.$createElement;
-  var children = vnode.componentOptions.children;
-  var data = extractData(vnode, indx);
-  var tag = vnode.componentOptions.Ctor;
-  return h(tag, data, children);
+var assign = Object.assign || assignPoly;
+
+function signPoly(value) {
+  if (value < 0) {
+    return -1;
+  }
+
+  return value > 0 ? 1 : 0;
+}
+
+var sign = Math.sign || signPoly;
+function normalizeChildren(context) {
+  var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (context.$scopedSlots.default) {
+    return context.$scopedSlots.default(slotProps) || [];
+  }
+
+  return context.$slots.default || [];
 }
 
-//
 var EMITTER = new Vue();
-var script = {
+var Carousel = {
   name: 'Hooper',
   provide: function provide() {
     return {
@@ -235,7 +289,6 @@ var script = {
       trimEnd: 1,
       currentSlide: null,
       timer: null,
-      slides: [],
       defaults: {},
       breakpoints: {},
       delta: {
@@ -338,11 +391,11 @@ var script = {
       }
 
       if (this.config.mouseDrag) {
-        this.$refs.track.addEventListener('mousedown', this.onDragStart);
+        this.$refs.list.addEventListener('mousedown', this.onDragStart);
       }
 
       if (this.config.touchDrag) {
-        this.$refs.track.addEventListener('touchstart', this.onDragStart, {
+        this.$refs.list.addEventListener('touchstart', this.onDragStart, {
           passive: true
         });
       }
@@ -379,28 +432,8 @@ var script = {
     },
     initDefaults: function initDefaults() {
       this.breakpoints = this.settings.breakpoints;
-      this.defaults = Object.assign({}, this.$props, this.settings);
-      this.config = Object.assign({}, this.defaults);
-    },
-    initSlides: function initSlides() {
-      var _this3 = this;
-
-      this.slides = this.filteredSlides();
-      this.slidesCount = this.slides.length;
-      this.slides.forEach(function (slide, indx) {
-        slide.componentOptions.propsData.index = indx;
-      });
-
-      if (this.config.infiniteScroll) {
-        var before = [];
-        var after = [];
-        this.slides.forEach(function (slide, indx) {
-          before.push(cloneSlide(slide, indx - _this3.slidesCount));
-          after.push(cloneSlide(slide, indx + _this3.slidesCount));
-        });
-        this.$slots['clone-before'] = before;
-        this.$slots['clone-after'] = after;
-      }
+      this.defaults = assign({}, this.$props, this.settings);
+      this.config = assign({}, this.defaults);
     },
     // updating methods
     update: function update() {
@@ -447,7 +480,7 @@ var script = {
       this.slideWidth = this.containerWidth / this.config.itemsToShow;
     },
     updateConfig: function updateConfig() {
-      var _this4 = this;
+      var _this3 = this;
 
       var breakpoints = Object.keys(this.breakpoints).sort(function (a, b) {
         return b - a;
@@ -457,13 +490,13 @@ var script = {
         matched = window.matchMedia("(min-width: ".concat(breakpoint, "px)")).matches;
 
         if (matched) {
-          _this4.config = Object.assign({}, _this4.config, _this4.defaults, _this4.breakpoints[breakpoint]);
+          _this3.config = assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
           return true;
         }
       });
 
       if (!matched) {
-        this.config = Object.assign(this.config, this.defaults);
+        this.config = assign(this.config, this.defaults);
       }
     },
     restartTimer: function restartTimer() {
@@ -472,11 +505,10 @@ var script = {
       }
     },
     restart: function restart() {
-      var _this5 = this;
+      var _this4 = this;
 
-      this.initSlides();
       this.$nextTick(function () {
-        _this5.update();
+        _this4.update();
       });
     },
     // events handlers
@@ -500,7 +532,10 @@ var script = {
       this.startPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
       document.addEventListener(this.isTouch ? 'touchmove' : 'mousemove', this.onDrag);
       document.addEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
-      event.preventDefault();
+
+      if (event.type !== 'touchstart') {
+        event.preventDefault();
+      }
     },
     onDrag: function onDrag(event) {
       if (this.isSliding) {
@@ -511,7 +546,10 @@ var script = {
       this.endPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
       this.delta.x = this.endPosition.x - this.startPosition.x;
       this.delta.y = this.endPosition.y - this.startPosition.y;
-      event.preventDefault();
+
+      if (!this.isTouch) {
+        event.preventDefault();
+      }
     },
     onDragEnd: function onDragEnd() {
       var tolerance = this.config.shortDrag ? 0.5 : 0.15;
@@ -519,11 +557,11 @@ var script = {
 
       if (this.config.vertical) {
         var draggedSlides = Math.round(Math.abs(this.delta.y / this.slideHeight) + tolerance);
-        this.slideTo(this.currentSlide - Math.sign(this.delta.y) * draggedSlides);
+        this.slideTo(this.currentSlide - sign(this.delta.y) * draggedSlides);
       }
 
       if (!this.config.vertical) {
-        var direction = (this.config.rtl ? -1 : 1) * Math.sign(this.delta.x);
+        var direction = (this.config.rtl ? -1 : 1) * sign(this.delta.x);
 
         var _draggedSlides = Math.round(Math.abs(this.delta.x / this.slideWidth) + tolerance);
 
@@ -591,7 +629,7 @@ var script = {
 
       this.lastScrollTime = now();
       var value = event.wheelDelta || -event.deltaY;
-      var delta = Math.sign(value);
+      var delta = sign(value);
 
       if (delta === -1) {
         this.slideNext();
@@ -601,17 +639,8 @@ var script = {
         this.slidePrev();
       }
     },
-    filteredSlides: function filteredSlides() {
-      return this.$slots.default.filter(function (el) {
-        if (!el.componentOptions || !el.componentOptions.Ctor) {
-          return false;
-        }
-
-        return el.componentOptions.Ctor.options.name === 'HooperSlide';
-      });
-    },
     addGroupListeners: function addGroupListeners() {
-      var _this6 = this;
+      var _this5 = this;
 
       if (!this.group) {
         return;
@@ -619,35 +648,26 @@ var script = {
 
       this._groupSlideHandler = function (slideIndex) {
         // set the isSource to false to prevent infinite emitting loop.
-        _this6.slideTo(slideIndex, false);
+        _this5.slideTo(slideIndex, false);
       };
 
       EMITTER.$on("slideGroup:".concat(this.group), this._groupSlideHandler);
     }
   },
-  beforeUpdate: function beforeUpdate() {
-    var isForcUpdated = this.config.infiniteScroll && (!this.$slots['clone-before'] || !this.$slots['clone-after']);
-    var isSlidesUpdated = this.filteredSlides().length !== this.slidesCount;
-
-    if (isForcUpdated || isSlidesUpdated) {
-      this.initSlides();
-    }
-  },
   created: function created() {
     this.initDefaults();
-    this.initSlides();
   },
   mounted: function mounted() {
-    var _this7 = this;
+    var _this6 = this;
 
     this.initEvents();
     this.addGroupListeners();
     this.$nextTick(function () {
-      _this7.update();
+      _this6.update();
 
-      _this7.slideTo(_this7.config.initialSlide);
+      _this6.slideTo(_this6.config.initialSlide || 0);
 
-      _this7.$emit('loaded');
+      _this6.$emit('loaded');
     });
   },
   beforeDestroy: function beforeDestroy() {
@@ -660,189 +680,147 @@ var script = {
     if (this.timer) {
       this.timer.stop();
     }
+  },
+  render: function render(h) {
+    var _this7 = this;
+
+    var body = renderBody.call(this, h);
+    return h('section', {
+      class: {
+        hooper: true,
+        'is-vertical': this.config.vertical,
+        'is-rtl': this.config.rtl
+      },
+      attrs: {
+        tabindex: '0'
+      },
+      on: {
+        focusin: function focusin() {
+          return _this7.isFocus = true;
+        },
+        focusout: function focusout() {
+          return _this7.isFocus = false;
+        },
+        mouseover: function mouseover() {
+          return _this7.isHover = true;
+        },
+        mouseleave: function mouseleave() {
+          return _this7.isHover = false;
+        }
+      }
+    }, body);
   }
 };
-
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
-/* server only */
-, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-  if (typeof shadowMode !== 'boolean') {
-    createInjectorSSR = createInjector;
-    createInjector = shadowMode;
-    shadowMode = false;
-  } // Vue.extend constructor export interop.
-
-
-  var options = typeof script === 'function' ? script.options : script; // render functions
-
-  if (template && template.render) {
-    options.render = template.render;
-    options.staticRenderFns = template.staticRenderFns;
-    options._compiled = true; // functional template
-
-    if (isFunctionalTemplate) {
-      options.functional = true;
-    }
-  } // scopedId
-
-
-  if (scopeId) {
-    options._scopeId = scopeId;
+/**
+ * Renders additional slides for infinite slides mode.
+ * By cloning Slides VNodes before and after either edges.
+ */
+
+function renderBufferSlides(h, slides) {
+  var before = [];
+  var after = []; // reduce prop access
+
+  var slidesCount = slides.length;
+
+  for (var i = 0; i < slidesCount; i++) {
+    var slide = slides[i];
+    var clonedBefore = cloneNode(h, slide);
+    clonedBefore.data.key = "index-".concat(i - slidesCount);
+    clonedBefore.key = clonedBefore.data.key;
+    clonedBefore.data.props = {
+      index: i - slidesCount,
+      isClone: true
+    };
+    before.push(clonedBefore);
+    var clonedAfter = cloneNode(h, slide);
+    clonedAfter.data.key = "index-".concat(i + slidesCount);
+    clonedAfter.key = clonedAfter.data.key;
+    clonedAfter.data.props = {
+      index: i + slidesCount,
+      isClone: true
+    };
+    after.push(clonedAfter);
   }
 
-  var hook;
-
-  if (moduleIdentifier) {
-    // server build
-    hook = function hook(context) {
-      // 2.3 injection
-      context = context || // cached call
-      this.$vnode && this.$vnode.ssrContext || // stateful
-      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
-      // 2.2 with runInNewContext: true
+  return [].concat(before, _toConsumableArray(slides), after);
+}
+/**
+ * Produces the VNodes for the Slides.
+ * requires {this} to be bound to hooper.
+ * So use with .call or .bind
+ */
 
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__;
-      } // inject component styles
 
+function renderSlides(h) {
+  var children = normalizeChildren(this);
+  var childrenCount = children.length;
+  var idx = 0;
+  var slides = [];
 
-      if (style) {
-        style.call(this, createInjectorSSR(context));
-      } // register component module identifier for async chunk inference
+  for (var i = 0; i < childrenCount; i++) {
+    var child = children[i];
+    var ctor = child.componentOptions && child.componentOptions.Ctor;
 
+    if (!ctor || ctor.options.name !== 'HooperSlide') {
+      continue;
+    } // give slide an index behind the scenes
 
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier);
-      }
-    }; // used by ssr in case component is cached and beforeCreate
-    // never gets called
 
+    child.componentOptions.propsData.index = idx;
+    child.data.key = idx;
+    child.key = idx;
+    child.data.props = _objectSpread({}, child.data.props || {}, {
+      isClone: false,
+      index: idx++
+    });
+    slides.push(child);
+  } // update hooper's information of the slide count.
 
-    options._ssrRegister = hook;
-  } else if (style) {
-    hook = shadowMode ? function () {
-      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
-    } : function (context) {
-      style.call(this, createInjector(context));
-    };
-  }
 
-  if (hook) {
-    if (options.functional) {
-      // register for functional component in vue file
-      var originalRender = options.render;
+  this.slidesCount = slides.length;
 
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
+  if (this.config.infiniteScroll) {
+    slides = renderBufferSlides(h, slides);
   }
 
-  return script;
-}
-
-var normalizeComponent_1 = normalizeComponent;
-
-/* script */
-var __vue_script__ = script;
-/* template */
-
-var __vue_render__ = function __vue_render__() {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
-
-  return _c('section', {
-    staticClass: "hooper",
-    class: {
-      'is-vertical': _vm.config.vertical,
-      'is-rtl': _vm.config.rtl
-    },
-    attrs: {
-      "tabindex": "0"
-    },
-    on: {
-      "mouseover": function mouseover($event) {
-        _vm.isHover = true;
-      },
-      "mouseleave": function mouseleave($event) {
-        _vm.isHover = false;
-      },
-      "focusin": function focusin($event) {
-        _vm.isFocus = true;
-      },
-      "focusout": function focusout($event) {
-        _vm.isFocus = false;
-      }
-    }
-  }, [_c('div', {
-    staticClass: "hooper-list"
-  }, [_c('ul', {
-    ref: "track",
-    staticClass: "hooper-track",
+  return h('ul', {
     class: {
-      'is-dragging': _vm.isDragging
+      'hooper-track': true,
+      'is-dragging': this.isDragging
     },
-    style: _vm.trackTransform + _vm.trackTransition,
+    style: this.trackTransform + this.trackTransition,
+    ref: 'track',
     on: {
-      "transitionend": _vm.onTransitionend
+      transitionend: this.onTransitionend
     }
-  }, [_vm._t("clone-before"), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t("clone-after")], 2)]), _vm._v(" "), _vm._t("hooper-addons"), _vm._v(" "), _c('div', {
-    staticClass: "hooper-liveregion hooper-sr-only",
+  }, slides);
+}
+/**
+ * Builds the VNodes for the hooper body.
+ * Which is the slides, addons if available, and a11y stuff.
+ * REQUIRES {this} to be bound to the hooper instance.
+ * use with .call or .bind
+ */
+
+
+function renderBody(h) {
+  var slides = renderSlides.call(this, h);
+  var addons = this.$slots['hooper-addons'] || [];
+  var a11y = h('div', {
+    class: 'hooper-liveregion hooper-sr-only',
     attrs: {
-      "aria-live": "polite",
-      "aria-atomic": "true"
+      'aria-live': 'polite',
+      'aria-atomic': 'true'
     }
-  }, [_vm._v("\n    " + _vm._s("Item " + (_vm.currentSlide + 1) + " of " + _vm.slidesCount) + "\n  ")])], 2);
-};
+  }, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
+  var children = [slides].concat(_toConsumableArray(addons), [a11y]);
+  return [h('div', {
+    class: 'hooper-list',
+    ref: 'list'
+  }, children)];
+}
 
-var __vue_staticRenderFns__ = [];
-/* style */
-
-var __vue_inject_styles__ = undefined;
-/* scoped */
-
-var __vue_scope_id__ = undefined;
-/* module identifier */
-
-var __vue_module_identifier__ = undefined;
-/* functional template */
-
-var __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-var Hooper = normalizeComponent_1({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
-
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-var script$1 = {
+var Slide = {
   name: 'HooperSlide',
   inject: ['$hooper'],
   props: {
@@ -897,58 +875,27 @@ var script$1 = {
     isCurrent: function isCurrent() {
       return this.index === this.$hooper.currentSlide;
     }
+  },
+  render: function render(h) {
+    var classes = {
+      'hooper-slide': true,
+      'is-clone': this.isClone,
+      'is-active': this.isActive,
+      'is-prev': this.isPrev,
+      'is-next': this.isNext,
+      'is-current': this.isCurrent
+    };
+    var children = normalizeChildren(this);
+    return h('li', {
+      class: classes,
+      style: this.style,
+      attrs: {
+        'aria-hidden': !this.isActive
+      }
+    }, children);
   }
 };
 
-/* script */
-var __vue_script__$1 = script$1;
-/* template */
-
-var __vue_render__$1 = function __vue_render__() {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
-
-  return _c('li', {
-    staticClass: "hooper-slide",
-    class: {
-      'is-clone': _vm.isClone,
-      'is-active': _vm.isActive,
-      'is-prev': _vm.isPrev,
-      'is-next': _vm.isNext,
-      'is-current': _vm.isCurrent
-    },
-    style: _vm.style,
-    attrs: {
-      "aria-hidden": _vm.isActive
-    }
-  }, [_vm._t("default")], 2);
-};
-
-var __vue_staticRenderFns__$1 = [];
-/* style */
-
-var __vue_inject_styles__$1 = undefined;
-/* scoped */
-
-var __vue_scope_id__$1 = undefined;
-/* module identifier */
-
-var __vue_module_identifier__$1 = undefined;
-/* functional template */
-
-var __vue_is_functional_template__$1 = false;
-/* style inject */
-
-/* style inject SSR */
-
-var Slide = normalizeComponent_1({
-  render: __vue_render__$1,
-  staticRenderFns: __vue_staticRenderFns__$1
-}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, undefined, undefined);
-
 var Mixin = {
   inject: ['$hooper']
 };
@@ -959,7 +906,7 @@ var icons = {
   arrowRight: 'M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z',
   arrowLeft: 'M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'
 };
-var Icons = {
+var Icon = {
   name: 'HooperIcon',
   functional: true,
   inheritAttrs: true,
@@ -999,8 +946,7 @@ var Icons = {
   }
 };
 
-//
-var script$2 = {
+var Progress = {
   inject: ['$hooper'],
   name: 'HooperProgress',
   computed: {
@@ -1011,52 +957,54 @@ var script$2 = {
       var range = this.$hooper.slidesCount - this.$hooper.trimStart - this.$hooper.trimEnd;
       return (this.currentSlide - this.$hooper.trimStart) * 100 / range;
     }
+  },
+  render: function render(h) {
+    return h('div', {
+      class: 'hooper-progress'
+    }, [h('div', {
+      class: 'hooper-progress-inner',
+      style: "width: ".concat(this.progress, "%")
+    })]);
   }
 };
 
-/* script */
-var __vue_script__$2 = script$2;
-/* template */
-
-var __vue_render__$2 = function __vue_render__() {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
-
-  return _c('div', {
-    staticClass: "hooper-progress"
-  }, [_c('div', {
-    staticClass: "hooper-progress-inner",
-    style: "width: " + _vm.progress + "%"
-  })]);
-};
-
-var __vue_staticRenderFns__$2 = [];
-/* style */
-
-var __vue_inject_styles__$2 = undefined;
-/* scoped */
+function renderFraction(h, current, totalCount) {
+  return [h('span', current + 1), h('span', '/'), h('span', totalCount)];
+}
 
-var __vue_scope_id__$2 = undefined;
-/* module identifier */
+function renderIndicator(h, index, isCurrent, onClick) {
+  return h('li', [h('button', {
+    class: {
+      'hooper-indicator': true,
+      'is-active': isCurrent
+    },
+    on: {
+      click: onClick
+    }
+  }, [h('span', {
+    class: 'hooper-sr-only'
+  }, "item ".concat(index))])]);
+}
 
-var __vue_module_identifier__$2 = undefined;
-/* functional template */
+function renderDefault(h, current, totalCount, slideToIndex) {
+  var children = [];
 
-var __vue_is_functional_template__$2 = false;
-/* style inject */
+  var _loop = function _loop(i) {
+    children.push(renderIndicator(h, i, i === current, function () {
+      return slideToIndex(i);
+    }));
+  };
 
-/* style inject SSR */
+  for (var i = 0; i < totalCount; i++) {
+    _loop(i);
+  }
 
-var Progress = normalizeComponent_1({
-  render: __vue_render__$2,
-  staticRenderFns: __vue_staticRenderFns__$2
-}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, undefined, undefined);
+  return [h('ol', {
+    class: 'hooper-indicators'
+  }, children)];
+}
 
-//
-var script$3 = {
+var Pagination = {
   inject: ['$hooper'],
   name: 'HooperPagination',
   props: {
@@ -1075,75 +1023,55 @@ var script$3 = {
       });
       return slides.slice(this.$hooper.trimStart, this.$hooper.slidesCount - this.$hooper.trimEnd + 1);
     }
-  }
-};
-
-/* script */
-var __vue_script__$3 = script$3;
-/* template */
-
-var __vue_render__$3 = function __vue_render__() {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
-
-  return _c('div', {
-    staticClass: "hooper-pagination",
-    class: {
-      'is-vertical': _vm.$hooper.config.vertical
-    }
-  }, [_vm.mode === 'indicator' ? _c('ol', {
-    staticClass: "hooper-indicators"
-  }, _vm._l(_vm.slides, function (index) {
-    return _c('li', {
-      key: index
-    }, [_c('button', {
-      staticClass: "hooper-indicator",
+  },
+  render: function render(h) {
+    var _this = this;
+
+    var totalCount = this.$hooper.slidesCount;
+    var children = this.mode === 'indicator' ? renderDefault(h, this.currentSlide, totalCount, function (index) {
+      return _this.$hooper.slideTo(index);
+    }) : renderFraction(h, this.currentSlide, totalCount);
+    return h('div', {
       class: {
-        'is-active': _vm.currentSlide === index
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.$hooper.slideTo(index);
-        }
+        'hooper-pagination': true,
+        'is-vertical': this.$hooper.config.vertical
       }
-    }, [_c('span', {
-      staticClass: "hooper-sr-only"
-    }, [_vm._v("item " + _vm._s(index))])])]);
-  }), 0) : _vm._e(), _vm._v(" "), _vm.mode === 'fraction' ? [_c('span', [_vm._v(_vm._s(_vm.currentSlide + 1))]), _vm._v(" "), _c('span', [_vm._v("/")]), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.$hooper.slidesCount))])] : _vm._e()], 2);
+    }, children);
+  }
 };
 
-var __vue_staticRenderFns__$3 = [];
-/* style */
-
-var __vue_inject_styles__$3 = undefined;
-/* scoped */
-
-var __vue_scope_id__$3 = undefined;
-/* module identifier */
-
-var __vue_module_identifier__$3 = undefined;
-/* functional template */
+function iconName(isVertical, isRTL, isPrev) {
+  if (isPrev) {
+    return isVertical ? 'arrowUp' : isRTL ? 'arrowRight' : 'arrowLeft';
+  }
 
-var __vue_is_functional_template__$3 = false;
-/* style inject */
+  return isVertical ? 'arrowDown' : isRTL ? 'arrowLeft' : 'arrowRight';
+}
 
-/* style inject SSR */
+function renderButton(h, disabled, slot, isPrev, _ref, onClick) {
+  var _class;
 
-var Pagination = normalizeComponent_1({
-  render: __vue_render__$3,
-  staticRenderFns: __vue_staticRenderFns__$3
-}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, undefined, undefined);
+  var isVertical = _ref.isVertical,
+      isRTL = _ref.isRTL;
+  var children = slot && slot.length ? slot : [h(Icon, {
+    props: {
+      name: iconName(isVertical, isRTL, isPrev)
+    }
+  })];
+  return h('button', {
+    class: (_class = {}, _defineProperty(_class, "hooper-".concat(isPrev ? 'prev' : 'next'), true), _defineProperty(_class, 'is-disabled', disabled), _class),
+    attrs: {
+      type: 'button'
+    },
+    on: {
+      click: onClick
+    }
+  }, children);
+}
 
-//
-var script$4 = {
+var Navigation = {
   inject: ['$hooper'],
   name: 'HooperNavigation',
-  components: {
-    Icons: Icons
-  },
   computed: {
     isPrevDisabled: function isPrevDisabled() {
       if (this.$hooper.config.infiniteScroll) {
@@ -1157,13 +1085,11 @@ var script$4 = {
         return false;
       }
 
+      if (this.$hooper.config.trimWhiteSpace) {
+        return this.$hooper.currentSlide === this.$hooper.slidesCount - Math.min(this.$hooper.config.itemsToShow, this.$hooper.slidesCount);
+      }
+
       return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
-    },
-    isRTL: function isRTL() {
-      return this.$hooper.config.rtl;
-    },
-    isVertical: function isVertical() {
-      return this.$hooper.config.vertical;
     }
   },
   methods: {
@@ -1175,80 +1101,28 @@ var script$4 = {
       this.$hooper.slidePrev();
       this.$hooper.restartTimer();
     }
-  }
-};
-
-/* script */
-var __vue_script__$4 = script$4;
-/* template */
-
-var __vue_render__$4 = function __vue_render__() {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
+  },
+  render: function render(h) {
+    var _this = this;
 
-  return _c('div', {
-    staticClass: "hooper-navigation",
-    class: {
-      'is-vertical': _vm.$hooper.config.vertical,
-      'is-rtl': _vm.$hooper.config.rtl
-    }
-  }, [_c('button', {
-    staticClass: "hooper-prev",
-    class: {
-      'is-disabled': _vm.isPrevDisabled
-    },
-    attrs: {
-      "type": "button"
-    },
-    on: {
-      "click": _vm.slidePrev
-    }
-  }, [_vm._t("hooper-prev", [_c('Icons', {
-    attrs: {
-      "name": _vm.isVertical ? 'arrowUp' : _vm.isRTL ? 'arrowRight' : 'arrowLeft'
-    }
-  })])], 2), _vm._v(" "), _c('button', {
-    staticClass: "hooper-next",
-    class: {
-      'is-disabled': _vm.isNextDisabled
-    },
-    attrs: {
-      "type": "button"
-    },
-    on: {
-      "click": _vm.slideNext
-    }
-  }, [_vm._t("hooper-next", [_c('Icons', {
-    attrs: {
-      "name": _vm.isVertical ? 'arrowDown' : _vm.isRTL ? 'arrowLeft' : 'arrowRight'
-    }
-  })])], 2)]);
+    var config = {
+      isRTL: this.$hooper.config.rtl,
+      isVertical: this.$hooper.config.vertical
+    };
+    var children = [renderButton(h, this.isPrevDisabled, this.$slots['hooper-prev'], true, config, function () {
+      return _this.slidePrev();
+    }), renderButton(h, this.isNextDisabled, this.$slots['hooper-next'], false, config, function () {
+      return _this.slideNext();
+    })];
+    return h('div', {
+      class: {
+        'hooper-navigation': true,
+        'is-vertical': this.$hooper.config.vertical,
+        'is-rtl': this.$hooper.config.rtl
+      }
+    }, children);
+  }
 };
 
-var __vue_staticRenderFns__$4 = [];
-/* style */
-
-var __vue_inject_styles__$4 = undefined;
-/* scoped */
-
-var __vue_scope_id__$4 = undefined;
-/* module identifier */
-
-var __vue_module_identifier__$4 = undefined;
-/* functional template */
-
-var __vue_is_functional_template__$4 = false;
-/* style inject */
-
-/* style inject SSR */
-
-var Navigation = normalizeComponent_1({
-  render: __vue_render__$4,
-  staticRenderFns: __vue_staticRenderFns__$4
-}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, undefined, undefined);
-
-export default Hooper;
-export { Hooper, Icons, Navigation, Pagination, Progress, Slide, Mixin as addonMixin };
+export default Carousel;
+export { Carousel as Hooper, Icon, Navigation, Pagination, Progress, Slide, Mixin as addonMixin };