embla-carousel - npm Package Compare versions

Comparing version 2.9.1 to 3.0.0

lib/components/axis.d.ts

+export declare type AxisOption = 'x' | 'y';
+export declare type Axis = {
+    cross: AxisOption;
+    scroll: AxisOption;
+    measure: (node: HTMLElement) => number;
+};
+export declare function Axis(axis: AxisOption): Axis;

lib/components/eventEmitter.d.ts

+declare type Callback = (evt: EmblaEvent) => void;
+export declare type EmblaEvent = 'init' | 'pointerDown' | 'pointerUp' | 'scroll' | 'select' | 'settle' | 'destroy' | 'reInit' | 'resize';
+export declare type EventEmitter = {
+    emit: (evt: EmblaEvent) => EventEmitter;
+    on: (evt: EmblaEvent, cb: Callback) => EventEmitter;
+    off: (evt: EmblaEvent, cb: Callback) => EventEmitter;
+};
+export declare function EventEmitter(): EventEmitter;
+export {};

lib/components/slidesInView.d.ts

+declare type Params = {
+    contentSize: number;
+    slideSizes: number[];
+    viewSize: number;
+    loop: boolean;
+    inViewThreshold: number;
+};
+export declare type SlidesInView = {
+    check: (location: number) => number[];
+};
+export declare function SlidesInView(params: Params): SlidesInView;
+export {};

lib/components/alignment.d.ts

@@ -1,5 +0,5 @@
-export declare type Alignments = 'start' | 'center' | 'end' | number;
+export declare type AlignmentOption = 'start' | 'center' | 'end' | number;
 declare type Params = {
     viewSize: number;
-    align: Alignments;
+    align: AlignmentOption;
 };
@@ -6,0 +6,0 @@ export declare type Alignment = {

lib/components/dragHandler.d.ts

 import { Animation } from './animation';
 import { Counter } from './counter';
 import { DragTracker } from './dragTracker';
-import { EventDispatcher } from './eventDispatcher';
+import { EventEmitter } from './eventEmitter';
+import { Axis } from './axis';
+import { EventStore } from './eventStore';
 import { Limit } from './limit';
@@ -10,2 +12,3 @@ import { ScrollBody } from './scrollBody';
 declare type Params = {
+    axis: Axis;
     element: HTMLElement;
@@ -23,3 +26,3 @@ target: Vector1D;
     loop: boolean;
-    events: EventDispatcher;
+    events: EventEmitter;
 };
@@ -30,5 +33,6 @@ export declare type DragHandler = {
     pointerDown: () => boolean;
-    removeAllEvents: () => void;
+    removeActivationEvents: EventStore['removeAll'];
+    removeInteractionEvents: EventStore['removeAll'];
 };
 export declare function DragHandler(params: Params): DragHandler;
 export {};

lib/components/dragTracker.d.ts

@@ -0,4 +1,8 @@
+import { Axis, AxisOption } from './axis';
 import { PxToPercent } from './pxToPercent';
 import { Vector1D } from './vector1d';
-declare type Axis = 'x' | 'y';
+declare type Params = {
+    axis: Axis;
+    pxToPercent: PxToPercent;
+};
 export declare type DragTracker = {
@@ -8,5 +12,5 @@ pointerDown: (evt: Event) => number;
     pointerUp: () => number;
-    readPoint: (evt: any, axis: Axis) => Vector1D;
+    readPoint: (evt: any, axis: AxisOption) => Vector1D;
 };
-export declare function DragTracker(pxToPercent: PxToPercent): DragTracker;
+export declare function DragTracker(params: Params): DragTracker;
 export {};

lib/components/engine.d.ts

 import { Animation } from './animation';
+import { Axis } from './axis';
 import { Counter } from './counter';
 import { DragHandler } from './dragHandler';
-import { EventDispatcher } from './eventDispatcher';
+import { EventEmitter } from './eventEmitter';
+import { Limit } from './limit';
 import { Options } from './options';
+import { PxToPercent } from './pxToPercent';
 import { ScrollBody } from './scrollBody';
@@ -13,5 +16,7 @@ import { ScrollBounds } from './scrollBounds';
 import { SlideLooper } from './slideLooper';
+import { SlidesInView } from './slidesInView';
 import { Translate } from './translate';
 import { Vector1D } from './vector1d';
 export declare type Engine = {
+    axis: Axis;
     animation: Animation;
@@ -23,7 +28,10 @@ scrollBounds: ScrollBounds;
     indexPrevious: Counter;
+    limit: Limit;
     location: Vector1D;
-    indexGroups: number[][];
+    options: Options;
+    pxToPercent: PxToPercent;
     scrollBody: ScrollBody;
     dragHandler: DragHandler;
     slideLooper: SlideLooper;
+    slidesInView: SlidesInView;
     target: Vector1D;
@@ -33,3 +41,5 @@ translate: Translate;
     scrollTarget: ScrollTarget;
+    scrollSnaps: number[];
+    snapIndexes: number[];
 };
-export declare function Engine(root: HTMLElement, container: HTMLElement, slides: HTMLElement[], options: Options, events: EventDispatcher): Engine;
+export declare function Engine(root: HTMLElement, container: HTMLElement, slides: HTMLElement[], options: Options, events: EventEmitter): Engine;

lib/components/eventStore.d.ts

 declare type EventHandler = EventListener | EventListenerObject | null;
-declare type EventOptions = boolean | EventListenerOptions | undefined;
+declare type EventOptions = boolean | AddEventListenerOptions | undefined;
 export declare type EventStore = {
@@ -4,0 +4,0 @@ add: (node: EventTarget, type: string, handler: EventHandler, options?: EventOptions) => EventStore;

lib/components/limit.d.ts

@@ -8,2 +8,3 @@ declare type Params = {
     max: number;
+    length: number;
     loop: (n: number) => number;
@@ -14,4 +15,5 @@ constrain: (n: number) => number;
     reachedMin: (n: number) => boolean;
+    removeOffset: (n: number) => number;
 };
 export declare function Limit(params: Params): Limit;
 export {};

lib/components/options.d.ts

@@ -1,5 +0,8 @@
-import { Alignments } from './alignment';
+import { AlignmentOption } from './alignment';
+import { AxisOption } from './axis';
+import { ScrollContainOption } from './scrollContain';
 export declare type Options = {
-    align: Alignments;
-    containScroll: boolean;
+    align: AlignmentOption;
+    axis: AxisOption;
+    containScroll: ScrollContainOption;
     containerSelector: string;
@@ -10,2 +13,3 @@ dragFree: boolean;
     draggingClass: string;
+    inViewThreshold: number;
     loop: boolean;
@@ -17,16 +21,3 @@ selectedClass: string;
 };
-export declare const defaultOptions: Readonly<{
-    align: string;
-    containScroll: boolean;
-    containerSelector: string;
-    dragFree: boolean;
-    draggable: boolean;
-    draggableClass: string;
-    draggingClass: string;
-    loop: boolean;
-    selectedClass: string;
-    slidesToScroll: number;
-    speed: number;
-    startIndex: number;
-}>;
-export declare type UserOptions = Partial<Options>;
+export declare const defaultOptions: Options;
+export declare type EmblaOptions = Partial<Options>;

lib/components/scrollBounds.d.ts

@@ -13,4 +13,5 @@ import { Animation } from './animation';
     constrain: (v: Vector1D) => void;
+    toggleActive: (active: boolean) => void;
 };
 export declare function ScrollBounds(params: Params): ScrollBounds;
 export {};

lib/components/scrollContain.d.ts

 import { Alignment } from './alignment';
+export declare type ScrollContainOption = '' | 'trimSnaps' | 'keepSnaps';
 declare type Params = {
-    slideIndexes: number[];
-    slidesToScroll: number;
     contentSize: number;
@@ -10,6 +9,5 @@ viewSize: number;
 export declare type ScrollContain = {
-    indexes: (scrollSnaps: number[]) => number[][];
-    snaps: (scrollSnaps: number[]) => number[];
+    measure: (scrollSnaps: number[], trim: boolean) => number[];
 };
 export declare function ScrollContain(params: Params): ScrollContain;
 export {};

lib/components/scrollProgress.d.ts

 import { Limit } from './limit';
-import { Vector1D } from './vector1d';
 declare type Params = {
     limit: Limit;
-    loop: boolean;
-    target: Vector1D;
 };
 export declare type ScrollProgress = {
     get: (n: number) => number;
-    set: (n: number) => number;
-    add: (n: number) => number;
 };
 export declare function ScrollProgress(params: Params): ScrollProgress;
 export {};

lib/components/scrollTo.d.ts

 import { Animation } from './animation';
 import { Counter } from './counter';
-import { EventDispatcher } from './eventDispatcher';
+import { EventEmitter } from './eventEmitter';
 import { ScrollTarget } from './scrollTarget';
@@ -12,3 +12,3 @@ import { Vector1D } from './vector1d';
     scrollTarget: ScrollTarget;
-    events: EventDispatcher;
+    events: EventEmitter;
 };
@@ -15,0 +15,0 @@ export declare type ScrollTo = {

lib/components/slideLooper.d.ts

@@ -0,3 +1,5 @@
+import { Axis } from './axis';
 import { Vector1D } from './vector1d';
 declare type Params = {
+    axis: Axis;
     scrollSnaps: number[];
@@ -11,11 +13,13 @@ viewSize: number;
     point: number;
-    location: Vector1D;
+    location: number;
     index: number;
-    findTarget: (location: number) => Vector1D;
+    getTarget: (location: number) => number;
 };
 export declare type SlideLooper = {
+    canLoop: () => boolean;
+    clear: (slides: HTMLElement[]) => void;
     loop: (slides: HTMLElement[]) => void;
     loopPoints: LoopPoint[];
 };
-export declare function SlideLooper(params: Params): Readonly<SlideLooper>;
+export declare function SlideLooper(params: Params): SlideLooper;
 export {};

lib/components/translate.d.ts

@@ -0,5 +1,12 @@
+import { Axis } from './axis';
 import { Vector1D } from './vector1d';
+declare type Params = {
+    axis: Axis;
+    container: HTMLElement;
+};
 export declare type Translate = {
+    clear: () => void;
     to: (vector: Vector1D) => void;
 };
-export declare function Translate(node: HTMLElement): Translate;
+export declare function Translate(params: Params): Translate;
+export {};

lib/components/utils.d.ts

@@ -1,2 +0,1 @@
-export declare function rectWidth(node: HTMLElement): number;
 export declare function map(value: number, iStart: number, iStop: number, oStart: number, oStop: number): number;
@@ -8,1 +7,3 @@ export declare function arrayFromCollection(nodeList: HTMLCollection): HTMLElement[];
 export declare function arrayKeys<GenericType>(array: GenericType): number[];
+export declare function removeClass(node: HTMLElement, className: string): void;
+export declare function addClass(node: HTMLElement, className: string): void;

lib/index.d.ts

@@ -1,29 +0,27 @@
-import { Callback as EmblaCallback, Event as EmblaEvent } from './components/eventDispatcher';
-import { UserOptions } from './components/options';
-declare type ScrollSnap = {
-    slideNodes: HTMLElement[];
-    slideIndexes: number[];
-};
+import { Engine } from './components/engine';
+import { EventEmitter, EmblaEvent } from './components/eventEmitter';
+import { EmblaOptions } from './components/options';
 export declare type EmblaCarousel = {
     canScrollNext: () => boolean;
     canScrollPrev: () => boolean;
-    changeOptions: (options: UserOptions) => void;
     clickAllowed: () => boolean;
     containerNode: () => HTMLElement;
+    dangerouslyGetEngine: () => Engine;
     destroy: () => void;
-    off: (evt: EmblaEvent, cb: EmblaCallback) => void;
-    on: (evt: EmblaEvent, cb: EmblaCallback) => void;
+    off: EventEmitter['off'];
+    on: EventEmitter['on'];
     previousScrollSnap: () => number;
-    scrollBy: (progress: number, snap: boolean) => void;
+    reInit: (options: EmblaOptions) => void;
     scrollNext: () => void;
     scrollPrev: () => void;
-    scrollProgress: (target?: boolean) => number;
-    scrollSnapList: () => ScrollSnap[];
+    scrollProgress: () => number;
+    scrollSnapList: () => number[];
     scrollTo: (index: number) => void;
-    scrollToProgress: (progress: number, snap: boolean) => void;
     selectedScrollSnap: () => number;
     slideNodes: () => HTMLElement[];
+    slidesInView: (target?: boolean) => number[];
+    slidesNotInView: (target?: boolean) => number[];
 };
-export declare function EmblaCarousel(sliderRoot: HTMLElement, userOptions?: UserOptions): EmblaCarousel;
+export declare function EmblaCarousel(sliderRoot: HTMLElement, userOptions?: EmblaOptions): EmblaCarousel;
 export default EmblaCarousel;
-export { UserOptions };
+export { EmblaOptions, EmblaEvent };

lib/index.js

@@ -107,3 +107,81 @@ (function webpackUniversalModuleDefinition(root, factory) {
 });
+exports.addClass = exports.removeClass = exports.arrayKeys = exports.groupArray = exports.roundToDecimals = exports.debounce = exports.arrayFromCollection = exports.map = void 0;
 
+function map(value, iStart, iStop, oStart, oStop) {
+  return oStart + (oStop - oStart) * ((value - iStart) / (iStop - iStart));
+}
+
+exports.map = map;
+
+function arrayFromCollection(nodeList) {
+  return Array.prototype.slice.call(nodeList);
+}
+
+exports.arrayFromCollection = arrayFromCollection;
+
+function debounce(callback, time) {
+  var timeout = {
+    id: 0
+  };
+  return function () {
+    window.clearTimeout(timeout.id);
+    timeout.id = window.setTimeout(callback, time) || 0;
+  };
+}
+
+exports.debounce = debounce;
+
+function roundToDecimals(decimalPoints) {
+  var pow = Math.pow(10, decimalPoints);
+  return function (n) {
+    return Math.round(n * pow) / pow;
+  };
+}
+
+exports.roundToDecimals = roundToDecimals;
+
+function groupArray(array, size) {
+  var groups = [];
+
+  for (var i = 0; i < array.length; i += size) {
+    groups.push(array.slice(i, i + size));
+  }
+
+  return groups;
+}
+
+exports.groupArray = groupArray;
+
+function arrayKeys(array) {
+  return Object.keys(array).map(Number);
+}
+
+exports.arrayKeys = arrayKeys;
+
+function removeClass(node, className) {
+  var cl = node.classList;
+  if (cl.contains(className)) cl.remove(className);
+}
+
+exports.removeClass = removeClass;
+
+function addClass(node, className) {
+  var cl = node.classList;
+  if (!cl.contains(className)) cl.add(className);
+}
+
+exports.addClass = addClass;
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Vector1D = void 0;
+
 function Vector1D(value) {
@@ -159,3 +237,3 @@ var vector = value;
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -166,70 +244,2 @@
 /***/ }),
-/* 1 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-function rectWidth(node) {
-  return node.getBoundingClientRect().width;
-}
-
-exports.rectWidth = rectWidth;
-
-function map(value, iStart, iStop, oStart, oStop) {
-  return oStart + (oStop - oStart) * ((value - iStart) / (iStop - iStart));
-}
-
-exports.map = map;
-
-function arrayFromCollection(nodeList) {
-  return Array.prototype.slice.call(nodeList);
-}
-
-exports.arrayFromCollection = arrayFromCollection;
-
-function debounce(callback, time) {
-  var timeout = {
-    id: 0
-  };
-  return function () {
-    window.clearTimeout(timeout.id);
-    timeout.id = window.setTimeout(callback, time) || 0;
-  };
-}
-
-exports.debounce = debounce;
-
-function roundToDecimals(decimalPoints) {
-  var pow = Math.pow(10, decimalPoints);
-  return function (n) {
-    return Math.round(n * pow) / pow;
-  };
-}
-
-exports.roundToDecimals = roundToDecimals;
-
-function groupArray(array, size) {
-  var groups = [];
-
-  for (var i = 0; i < array.length; i += size) {
-    groups.push(array.slice(i, i + size));
-  }
-
-  return groups;
-}
-
-exports.groupArray = groupArray;
-
-function arrayKeys(array) {
-  return Object.keys(array).map(Number);
-}
-
-exports.arrayKeys = arrayKeys;
-
-/***/ }),
 /* 2 */
@@ -244,2 +254,3 @@ /***/ (function(module, exports, __webpack_require__) {
 });
+exports.Limit = void 0;
 
@@ -257,2 +268,3 @@ function Limit(params) {
   };
+  var length = Math.abs(min - max);
 
@@ -277,2 +289,16 @@ function reachedMin(n) {
 
+  function removeOffset(n) {
+    if (min === max) return n;
+
+    while (reachedMin(n)) {
+      n += length;
+    }
+
+    while (reachedMax(n)) {
+      n -= length;
+    }
+
+    return n;
+  }
+
   function loop(n) {
@@ -290,2 +316,3 @@ var which = reachedWhich(n);
     constrain: constrain,
+    length: length,
     loop: loop,
@@ -296,5 +323,6 @@ max: max,
     reachedMax: reachedMax,
-    reachedMin: reachedMin
+    reachedMin: reachedMin,
+    removeOffset: removeOffset
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -314,2 +342,3 @@
 });
+exports.Counter = void 0;
 
@@ -364,3 +393,3 @@ function Counter(params) {
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -380,4 +409,5 @@
 });
+exports.Direction = void 0;
 
-var vector1d_1 = __webpack_require__(0);
+var vector1d_1 = __webpack_require__(1);
 
@@ -402,3 +432,3 @@ function Direction(value) {
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -418,2 +448,3 @@
 });
+exports.EventStore = void 0;
 
@@ -444,3 +475,3 @@ function EventStore() {
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -469,48 +500,39 @@
 });
+exports.EmblaCarousel = void 0;
 
 var engine_1 = __webpack_require__(8);
 
-var eventDispatcher_1 = __webpack_require__(25);
+var eventEmitter_1 = __webpack_require__(27);
 
 var eventStore_1 = __webpack_require__(5);
 
-var options_1 = __webpack_require__(26);
+var options_1 = __webpack_require__(28);
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(0);
 
 function EmblaCarousel(sliderRoot) {
   var userOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var events = eventDispatcher_1.EventDispatcher();
+  var events = eventEmitter_1.EventEmitter();
   var eventStore = eventStore_1.EventStore();
   var debouncedResize = utils_1.debounce(resize, 500);
-  var changeOptions = reActivate;
+  var reInit = reActivate;
   var on = events.on,
       off = events.off;
   var engine;
+  var activated = false;
 
-  var options = _extends({}, options_1.defaultOptions, userOptions);
+  var options = _extends({}, options_1.defaultOptions);
 
-  var root;
+  var containerSize = 0;
   var container;
   var slides;
-  var activated = false;
-  var windowWidth = 0;
-  activate(options);
+  activate(userOptions);
 
   function storeElements() {
-    if (!sliderRoot) {
-      throw new Error('Missing root element 😢');
-    }
-
+    if (!sliderRoot) throw new Error('Missing root node 😢');
     var selector = options.containerSelector;
     var sliderContainer = sliderRoot.querySelector(selector);
-
-    if (!sliderContainer) {
-      throw new Error('Missing container element 😢');
-    }
-
-    root = sliderRoot;
+    if (!sliderContainer) throw new Error('Missing container node 😢');
     container = sliderContainer;
     slides = utils_1.arrayFromCollection(container.children);
-    activated = true;
   }
@@ -520,58 +542,73 @@
     var partialOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var isFirstInit = !activated;
-    windowWidth = window.innerWidth;
     storeElements();
-    if (slides.length === 0) return;
     options = _extends(options, partialOptions);
-    engine = engine_1.Engine(root, container, slides, options, events);
+    engine = engine_1.Engine(sliderRoot, container, slides, options, events);
+    var _engine = engine,
+        axis = _engine.axis,
+        scrollBody = _engine.scrollBody,
+        translate = _engine.translate,
+        dragHandler = _engine.dragHandler,
+        slideLooper = _engine.slideLooper;
+    var _options = options,
+        loop = _options.loop,
+        draggable = _options.draggable,
+        draggableClass = _options.draggableClass,
+        selectedClass = _options.selectedClass,
+        draggingClass = _options.draggingClass;
+    containerSize = axis.measure(container);
     eventStore.add(window, 'resize', debouncedResize);
+    translate.to(scrollBody.location);
     slides.forEach(slideFocusEvent);
-    engine.translate.to(engine.scrollBody.location);
+    dragHandler.addActivationEvents();
 
-    if (options.loop && slides.length === 1) {
-      return activate({
+    if (loop) {
+      if (!slideLooper.canLoop()) return reActivate({
         loop: false
       });
+      slideLooper.loop(slides);
     }
 
-    if (options.draggable) activateDragFeature();
-    if (options.loop) engine.slideLooper.loop(slides);
+    if (draggable) {
+      if (draggableClass) {
+        utils_1.addClass(sliderRoot, draggableClass);
+      }
 
-    if (isFirstInit) {
+      if (draggingClass) {
+        events.on('pointerDown', toggleDraggingClass);
+        events.on('pointerUp', toggleDraggingClass);
+      }
+    } else {
+      events.on('pointerDown', dragHandler.removeInteractionEvents);
+    }
+
+    if (selectedClass) {
+      toggleSelectedClass();
       events.on('select', toggleSelectedClass);
-      events.on('init', toggleSelectedClass);
+      events.on('pointerUp', toggleSelectedClass);
+    }
+
+    if (!activated) {
       setTimeout(function () {
-        return events.dispatch('init');
+        return events.emit('init');
       }, 0);
+      activated = true;
     }
   }
 
-  function activateDragFeature() {
-    var cl = root.classList;
-    var _options = options,
-        draggingClass = _options.draggingClass,
-        draggableClass = _options.draggableClass;
-    engine.dragHandler.addActivationEvents();
-    events.on('dragStart', function () {
-      return cl.add(draggingClass);
-    });
-    events.on('dragEnd', function () {
-      return cl.remove(draggingClass);
-    });
-    cl.add(draggableClass);
+  function toggleDraggingClass(evt) {
+    var _options2 = options,
+        draggingClass = _options2.draggingClass;
+    if (evt === 'pointerDown') utils_1.addClass(sliderRoot, draggingClass);else utils_1.removeClass(sliderRoot, draggingClass);
   }
 
   function toggleSelectedClass() {
-    var _engine = engine,
-        index = _engine.index,
-        indexPrevious = _engine.indexPrevious,
-        indexGroups = _engine.indexGroups;
-    var selected = options.selectedClass;
-    var previousGroup = indexGroups[indexPrevious.get()];
-    var currentGroup = indexGroups[index.get()];
-    previousGroup.forEach(function (i) {
-      return slides[i].classList.remove(selected);
+    var _options3 = options,
+        selectedClass = _options3.selectedClass;
+    var inView = slidesInView(true);
+    var notInView = slidesNotInView(true);
+    notInView.forEach(function (i) {
+      return utils_1.removeClass(slides[i], selectedClass);
     });
-    currentGroup.forEach(function (i) {
-      return slides[i].classList.add(selected);
+    inView.forEach(function (i) {
+      return utils_1.addClass(slides[i], selectedClass);
     });
@@ -593,3 +630,2 @@ }
     var partialOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (!activated) return;
     var startIndex = engine.index.get();
@@ -603,60 +639,59 @@
     activate(newOptions);
+    events.emit('reInit');
   }
 
   function deActivate() {
-    engine.dragHandler.removeAllEvents();
+    var _options4 = options,
+        selectedClass = _options4.selectedClass,
+        draggableClass = _options4.draggableClass;
+    engine.dragHandler.removeActivationEvents();
+    engine.dragHandler.removeInteractionEvents();
     engine.animation.stop();
     eventStore.removeAll();
-    root.classList.remove(options.draggableClass);
-    container.style.transform = '';
+    engine.translate.clear();
+    engine.slideLooper.clear(slides);
+    utils_1.removeClass(sliderRoot, draggableClass);
     slides.forEach(function (s) {
-      return s.style.left = '';
+      return utils_1.removeClass(s, selectedClass);
     });
+    events.off('select', toggleSelectedClass);
+    events.off('pointerUp', toggleSelectedClass);
+    events.off('pointerDown', toggleDraggingClass);
+    events.off('pointerUp', toggleDraggingClass);
   }
 
   function destroy() {
+    if (!activated) return;
     deActivate();
     activated = false;
     engine = {};
-    events.dispatch('destroy');
+    events.emit('destroy');
   }
 
   function resize() {
-    if (windowWidth === window.innerWidth) return;
-    windowWidth = window.innerWidth;
-    reActivate();
-    events.dispatch('resize');
+    var newContainerSize = engine.axis.measure(container);
+    if (containerSize !== newContainerSize) reActivate();
+    events.emit('resize');
   }
 
-  function scrollSnapList() {
-    return engine.indexGroups.map(function (g) {
-      return {
-        slideIndexes: g,
-        slideNodes: g.map(function (i) {
-          return slides[i];
-        })
-      };
-    });
+  function slidesInView() {
+    var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var location = engine[target ? 'target' : 'location'].get();
+    var type = options.loop ? 'removeOffset' : 'constrain';
+    return engine.slidesInView.check(engine.limit[type](location));
   }
 
-  function scrollBy(progress, snap) {
-    var distance = engine.scrollProgress.add(progress);
-    engine.scrollBody.useDefaultMass().useDefaultSpeed();
-    engine.scrollTo.distance(distance, snap);
+  function slidesNotInView() {
+    var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var inView = slidesInView(target);
+    return engine.snapIndexes.filter(function (i) {
+      return inView.indexOf(i) === -1;
+    });
   }
 
-  function scrollToProgress(progress, snap) {
-    var desired = engine.scrollProgress.set(progress);
-    var distance = engine.scrollTarget.shortcut(desired, 0);
-    engine.scrollBody.useDefaultMass().useDefaultSpeed();
-    engine.scrollTo.distance(distance, snap);
+  function scrollSnapList() {
+    var getScrollProgress = engine.scrollProgress.get;
+    return engine.scrollSnaps.map(getScrollProgress);
   }
 
-  function scrollProgress() {
-    var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    var locationType = target ? 'target' : 'location';
-    var location = engine[locationType].get();
-    return engine.scrollProgress.get(location);
-  }
-
   function scrollTo(index) {
@@ -691,2 +726,7 @@ engine.scrollBody.useDefaultMass().useDefaultSpeed();
 
+  function scrollProgress() {
+    var location = engine.location.get();
+    return engine.scrollProgress.get(location);
+  }
+
   function selectedScrollSnap() {
@@ -704,2 +744,6 @@ return engine.index.get();
 
+  function dangerouslyGetEngine() {
+    return engine;
+  }
+
   function containerNode() {
@@ -716,5 +760,5 @@ return container;
     canScrollPrev: canScrollPrev,
-    changeOptions: changeOptions,
     clickAllowed: clickAllowed,
     containerNode: containerNode,
+    dangerouslyGetEngine: dangerouslyGetEngine,
     destroy: destroy,
@@ -724,3 +768,3 @@ off: off,
     previousScrollSnap: previousScrollSnap,
-    scrollBy: scrollBy,
+    reInit: reInit,
     scrollNext: scrollNext,
@@ -731,7 +775,8 @@ scrollPrev: scrollPrev,
     scrollTo: scrollTo,
-    scrollToProgress: scrollToProgress,
     selectedScrollSnap: selectedScrollSnap,
-    slideNodes: slideNodes
+    slideNodes: slideNodes,
+    slidesInView: slidesInView,
+    slidesNotInView: slidesNotInView
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -754,2 +799,3 @@
 });
+exports.Engine = void 0;
 
@@ -760,42 +806,48 @@ var alignment_1 = __webpack_require__(9);
 
+var axis_1 = __webpack_require__(11);
+
 var counter_1 = __webpack_require__(3);
 
-var dragHandler_1 = __webpack_require__(11);
+var dragHandler_1 = __webpack_require__(12);
 
-var dragTracker_1 = __webpack_require__(12);
+var dragTracker_1 = __webpack_require__(13);
 
 var limit_1 = __webpack_require__(2);
 
-var pxToPercent_1 = __webpack_require__(13);
+var pxToPercent_1 = __webpack_require__(14);
 
-var scrollBody_1 = __webpack_require__(14);
+var scrollBody_1 = __webpack_require__(15);
 
-var scrollBounds_1 = __webpack_require__(15);
+var scrollBounds_1 = __webpack_require__(16);
 
-var scrollContain_1 = __webpack_require__(16);
+var scrollContain_1 = __webpack_require__(17);
 
-var scrollLimit_1 = __webpack_require__(17);
+var scrollLimit_1 = __webpack_require__(18);
 
-var scrollLooper_1 = __webpack_require__(18);
+var scrollLooper_1 = __webpack_require__(19);
 
-var scrollProgress_1 = __webpack_require__(19);
+var scrollProgress_1 = __webpack_require__(20);
 
-var scrollSnap_1 = __webpack_require__(20);
+var scrollSnap_1 = __webpack_require__(21);
 
-var scrollTarget_1 = __webpack_require__(21);
+var scrollTarget_1 = __webpack_require__(22);
 
-var scrollTo_1 = __webpack_require__(22);
+var scrollTo_1 = __webpack_require__(23);
 
-var slideLooper_1 = __webpack_require__(23);
+var slideLooper_1 = __webpack_require__(24);
 
-var translate_1 = __webpack_require__(24);
+var slidesInView_1 = __webpack_require__(25);
 
-var utils_1 = __webpack_require__(1);
+var translate_1 = __webpack_require__(26);
 
-var vector1d_1 = __webpack_require__(0);
+var utils_1 = __webpack_require__(0);
 
+var vector1d_1 = __webpack_require__(1);
+
 function Engine(root, container, slides, options, events) {
   // Options
   var align = options.align,
+      scrollAxis = options.axis,
       startIndex = options.startIndex,
+      inViewThreshold = options.inViewThreshold,
       loop = options.loop,
@@ -807,7 +859,6 @@ speed = options.speed,
 
-  var containerSize = utils_1.rectWidth(container);
-  var pxToPercent = pxToPercent_1.PxToPercent(containerSize);
+  var axis = axis_1.Axis(scrollAxis);
+  var pxToPercent = pxToPercent_1.PxToPercent(axis.measure(container));
   var viewSize = pxToPercent.totalPercent;
-  var slideIndexes = utils_1.arrayKeys(slides);
-  var slideSizes = slides.map(utils_1.rectWidth).map(pxToPercent.measure);
+  var slideSizes = slides.map(axis.measure).map(pxToPercent.measure);
   var groupedSizes = utils_1.groupArray(slideSizes, slidesToScroll);
@@ -822,3 +873,3 @@ var snapSizes = groupedSizes.map(function (g) {
     return a + s;
-  });
+  }, 0);
   var alignment = alignment_1.Alignment({
@@ -833,22 +884,16 @@ align: align,
   });
-  var scrollContain = scrollContain_1.ScrollContain({
+  var defaultSnaps = snapIndexes.map(scrollSnap.measure);
+  var contain = scrollContain_1.ScrollContain({
     alignment: alignment,
     contentSize: contentSize,
-    slideIndexes: slideIndexes,
-    slidesToScroll: slidesToScroll,
     viewSize: viewSize
   });
-  var contain = !loop && containScroll;
-  var defaultSnaps = snapIndexes.map(scrollSnap.measure);
-  var containedSnaps = scrollContain.snaps(defaultSnaps);
-  var scrollSnaps = contain ? containedSnaps : defaultSnaps; // Index
+  var shouldContain = !loop && containScroll !== '';
+  var trimSnaps = containScroll === 'trimSnaps';
+  var containedSnaps = contain.measure(defaultSnaps, trimSnaps);
+  var scrollSnaps = shouldContain ? containedSnaps : defaultSnaps; // Index
 
-  var defaultIndexes = utils_1.groupArray(slideIndexes, slidesToScroll);
-  var containedIndexes = scrollContain.indexes(defaultSnaps);
-  var indexMin = 0;
-  var indexMax = scrollSnaps.length - 1;
-  var indexGroups = contain ? containedIndexes : defaultIndexes;
   var indexSpan = limit_1.Limit({
-    min: indexMin,
-    max: indexMax
+    min: 0,
+    max: scrollSnaps.length - 1
   });
@@ -870,6 +915,11 @@ var index = counter_1.Counter({
     engine.scrollBody.seek(target).update();
+    var settled = engine.scrollBody.settle(target);
 
     if (!dragHandler.pointerDown()) {
       if (!loop) engine.scrollBounds.constrain(target);
-      if (engine.scrollBody.settle(target)) engine.animation.stop();
+
+      if (settled) {
+        engine.animation.stop();
+        events.emit('settle');
+      }
     }
@@ -883,4 +933,3 @@
 
-    var settled = engine.scrollBody.settle(target);
-    events.dispatch(settled ? 'settle' : 'scroll');
+    if (!settled) events.emit('scroll');
     engine.translate.to(engine.scrollBody.location);
@@ -920,4 +969,8 @@ engine.animation.proceed();
     animation: animation,
+    axis: axis,
     dragFree: dragFree,
-    dragTracker: dragTracker_1.DragTracker(pxToPercent),
+    dragTracker: dragTracker_1.DragTracker({
+      axis: axis,
+      pxToPercent: pxToPercent
+    }),
     element: root,
@@ -937,7 +990,10 @@ events: events,
     animation: animation,
+    axis: axis,
     dragHandler: dragHandler,
+    pxToPercent: pxToPercent,
     index: index,
-    indexGroups: indexGroups,
     indexPrevious: indexPrevious,
+    limit: limit,
     location: location,
+    options: options,
     scrollBody: scrollBody,
@@ -957,9 +1013,9 @@ scrollBounds: scrollBounds_1.ScrollBounds({
     scrollProgress: scrollProgress_1.ScrollProgress({
-      limit: limit,
-      loop: loop,
-      target: target
+      limit: limit
     }),
+    scrollSnaps: scrollSnaps,
     scrollTarget: scrollTarget,
     scrollTo: scrollTo,
     slideLooper: slideLooper_1.SlideLooper({
+      axis: axis,
       contentSize: contentSize,
@@ -971,6 +1027,17 @@ location: location,
     }),
+    slidesInView: slidesInView_1.SlidesInView({
+      contentSize: contentSize,
+      inViewThreshold: inViewThreshold,
+      loop: loop,
+      slideSizes: slideSizes,
+      viewSize: viewSize
+    }),
+    snapIndexes: snapIndexes,
     target: target,
-    translate: translate_1.Translate(container)
+    translate: translate_1.Translate({
+      axis: axis,
+      container: container
+    })
   };
-  return Object.freeze(engine);
+  return engine;
 }
@@ -990,2 +1057,3 @@
 });
+exports.Alignment = void 0;
 
@@ -995,3 +1063,3 @@ function Alignment(params) {
       align = params.align;
-  var alignment = {
+  var predefined = {
     start: start,
@@ -1020,3 +1088,3 @@ center: center,
     if (typeof align === 'number') return percent();
-    return alignment[align](n);
+    return predefined[align](n);
   }
@@ -1027,3 +1095,3 @@
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1043,2 +1111,3 @@
 });
+exports.Animation = void 0;
 
@@ -1070,3 +1139,3 @@ function Animation(callback) {
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1086,3 +1155,38 @@
 });
+exports.Axis = void 0;
 
+function Axis(axis) {
+  var scroll = axis === 'y' ? 'y' : 'x';
+  var cross = axis === 'y' ? 'x' : 'y';
+
+  function measure(node) {
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+        width = _node$getBoundingClie.width,
+        height = _node$getBoundingClie.height;
+
+    return scroll === 'x' ? width : height;
+  }
+
+  var self = {
+    cross: cross,
+    measure: measure,
+    scroll: scroll
+  };
+  return self;
+}
+
+exports.Axis = Axis;
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandler = void 0;
+
 var direction_1 = __webpack_require__(4);
@@ -1092,3 +1196,3 @@
 
-var vector1d_1 = __webpack_require__(0);
+var vector1d_1 = __webpack_require__(1);
 
@@ -1099,3 +1203,4 @@ function DragHandler(params) {
       dragFree = params.dragFree,
-      animation = params.animation;
+      animation = params.animation,
+      axis = params.axis;
   var element = params.element,
@@ -1106,8 +1211,12 @@ dragTracker = params.dragTracker,
       limit = params.limit;
+  var scrollAxis = axis.scroll,
+      crossAxis = axis.cross;
   var focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
-  var startX = vector1d_1.Vector1D(0);
-  var startY = vector1d_1.Vector1D(0);
-  var dragStartLocation = vector1d_1.Vector1D(0);
+  var startScroll = vector1d_1.Vector1D(0);
+  var startCross = vector1d_1.Vector1D(0);
+  var dragStartPoint = vector1d_1.Vector1D(0);
   var activationEvents = eventStore_1.EventStore();
   var interactionEvents = eventStore_1.EventStore();
+  var removeActivationEvents = activationEvents.removeAll;
+  var removeInteractionEvents = interactionEvents.removeAll;
   var snapForceBoost = {
@@ -1149,7 +1258,2 @@ mouse: 2.5,
 
-  function removeAllEvents() {
-    activationEvents.removeAll();
-    interactionEvents.removeAll();
-  }
-
   function isFocusNode(node) {
@@ -1192,18 +1296,16 @@ var name = node.nodeName || '';
     isMouse = evt.type === 'mousedown';
-    var diffToTarget = target.get() - location.get();
-    var isMoving = Math.abs(diffToTarget) >= 2;
+    if (isMouse && evt.button !== 0) return;
+    var isMoving = delta(target.get(), location.get()) >= 2;
     var clearPreventClick = isMouse || !isMoving;
     var isNotFocusNode = !isFocusNode(evt.target);
     var preventDefault = isMoving || isMouse && isNotFocusNode;
-    if (isMouse && evt.button !== 0) return;
     pointerIsDown = true;
     dragTracker.pointerDown(evt);
-    dragStartLocation.set(target);
+    dragStartPoint.set(target);
     target.set(location);
     scrollBody.useDefaultMass().useSpeed(80);
     addInteractionEvents();
-    animation.start();
-    startX.set(dragTracker.readPoint(evt, 'x'));
-    startY.set(dragTracker.readPoint(evt, 'y'));
-    events.dispatch('dragStart');
+    startScroll.set(dragTracker.readPoint(evt, scrollAxis));
+    startCross.set(dragTracker.readPoint(evt, crossAxis));
+    events.emit('pointerDown');
     if (clearPreventClick) preventClick = false;
@@ -1215,7 +1317,7 @@ if (preventDefault) evt.preventDefault();
     if (!preventScroll && !isMouse) {
-      var X = dragTracker.readPoint(evt, 'x').get();
-      var Y = dragTracker.readPoint(evt, 'y').get();
-      var diffX = Math.abs(X - startX.get());
-      var diffY = Math.abs(Y - startY.get());
-      preventScroll = diffX > diffY;
+      var moveScroll = dragTracker.readPoint(evt, scrollAxis).get();
+      var moveCross = dragTracker.readPoint(evt, crossAxis).get();
+      var diffScroll = delta(moveScroll, startScroll.get());
+      var diffCross = delta(moveCross, startCross.get());
+      preventScroll = diffScroll > diffCross;
       if (!preventScroll && !preventClick) return up();
@@ -1228,2 +1330,3 @@ }
     if (!preventClick && diff) preventClick = true;
+    animation.start();
     target.add(diff / resist);
@@ -1235,4 +1338,3 @@ evt.preventDefault();
     var force = dragTracker.pointerUp() * dragForceBoost();
-    var diffToTarget = target.get() - dragStartLocation.get();
-    var isMoving = Math.abs(diffToTarget) >= 0.5;
+    var isMoving = delta(target.get(), dragStartPoint.get()) >= 0.5;
     if (isMoving && !isMouse) preventClick = true;
@@ -1245,5 +1347,9 @@ isMouse = false;
     seekTargetBy(force);
-    events.dispatch('dragEnd');
+    events.emit('pointerUp');
   }
 
+  function delta(pointB, pointA) {
+    return Math.abs(pointB - pointA);
+  }
+
   function click(evt) {
@@ -1265,5 +1371,6 @@ if (preventClick) evt.preventDefault();
     pointerDown: pointerDown,
-    removeAllEvents: removeAllEvents
+    removeActivationEvents: removeActivationEvents,
+    removeInteractionEvents: removeInteractionEvents
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1274,3 +1381,3 @@
 /***/ }),
-/* 12 */
+/* 13 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1284,6 +1391,10 @@
 });
+exports.DragTracker = void 0;
 
-var vector1d_1 = __webpack_require__(0);
+var vector1d_1 = __webpack_require__(1);
 
-function DragTracker(pxToPercent) {
+function DragTracker(params) {
+  var axis = params.axis,
+      pxToPercent = params.pxToPercent;
+  var scrollAxis = axis.scroll;
   var coords = {
@@ -1302,5 +1413,5 @@ x: 'clientX',
 
-  function readPoint(evt, axis) {
+  function readPoint(evt, type) {
     isMouse = !evt.touches;
-    var c = coords[axis];
+    var c = coords[type];
     var value = isMouse ? evt[c] : evt.touches[0][c];
@@ -1311,3 +1422,3 @@ return pointValue.set(value);
   function pointerDown(evt) {
-    var point = readPoint(evt, 'x');
+    var point = readPoint(evt, scrollAxis);
     startDrag.set(point);
@@ -1319,3 +1430,3 @@ lastDrag.set(point);
   function pointerMove(evt) {
-    var point = readPoint(evt, 'x');
+    var point = readPoint(evt, scrollAxis);
     var time2 = new Date().getTime();
@@ -1353,3 +1464,3 @@ var time1 = trackTime;
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1360,3 +1471,3 @@
 /***/ }),
-/* 13 */
+/* 14 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1370,2 +1481,3 @@
 });
+exports.PxToPercent = void 0;
 
@@ -1383,3 +1495,3 @@ function PxToPercent(viewInPx) {
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1390,3 +1502,3 @@
 /***/ }),
-/* 14 */
+/* 15 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1400,8 +1512,9 @@
 });
+exports.ScrollBody = void 0;
 
 var direction_1 = __webpack_require__(4);
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(0);
 
-var vector1d_1 = __webpack_require__(0);
+var vector1d_1 = __webpack_require__(1);
 
@@ -1482,3 +1595,3 @@ function ScrollBody(params) {
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1489,3 +1602,3 @@
 /***/ }),
-/* 15 */
+/* 16 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1499,2 +1612,3 @@
 });
+exports.ScrollBounds = void 0;
 
@@ -1511,6 +1625,7 @@ function ScrollBounds(params) {
   var tolerance = 50;
+  var disabled = false;
   var timeout = 0;
 
   function shouldConstrain(v) {
-    if (timeout) return false;
+    if (disabled || timeout) return false;
     if (reachedMin(location.get())) return v.get() !== min;
@@ -1532,6 +1647,11 @@ if (reachedMax(location.get())) return v.get() !== max;
 
+  function toggleActive(active) {
+    disabled = !active;
+  }
+
   var self = {
-    constrain: constrain
+    constrain: constrain,
+    toggleActive: toggleActive
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1542,3 +1662,3 @@
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1552,7 +1672,6 @@
 });
+exports.ScrollContain = void 0;
 
 var limit_1 = __webpack_require__(2);
 
-var utils_1 = __webpack_require__(1);
-
 function ScrollContain(params) {
@@ -1562,18 +1681,9 @@ var alignment = params.alignment,
       viewSize = params.viewSize;
-  var slideIndexes = params.slideIndexes,
-      slidesToScroll = params.slidesToScroll;
-  var indexGroups = utils_1.groupArray(slideIndexes, slidesToScroll);
-  var contentExceedsView = contentSize > viewSize;
-  var bounds = limit_1.Limit({
+  var scrollBounds = limit_1.Limit({
     min: -contentSize + viewSize,
     max: 0
   });
+  var alignedWithinView = [alignment.measure(contentSize)];
+  var contentExceedsView = contentSize > viewSize;
 
-  function groupDuplicates(start, end) {
-    var duplicates = indexGroups.slice(start, end);
-    return duplicates.reduce(function (a, g) {
-      return a.concat(g);
-    }, []);
-  }
-
   function findDuplicates(scrollSnaps) {
@@ -1590,5 +1700,4 @@ var startSnap = scrollSnaps[0];
 
-  function indexes(scrollSnaps) {
-    if (!contentExceedsView) return [slideIndexes];
-    var containedSnaps = scrollSnaps.map(bounds.constrain);
+  function measure(scrollSnaps, trim) {
+    var containedSnaps = scrollSnaps.map(scrollBounds.constrain);
 
@@ -1599,16 +1708,4 @@ var _findDuplicates = findDuplicates(containedSnaps),
 
-    var start = groupDuplicates(0, min);
-    var middle = indexGroups.slice(min, max);
-    var end = groupDuplicates(max, scrollSnaps.length);
-    return [start].concat(middle.concat([end]));
-  }
-
-  function snaps(scrollSnaps) {
-    if (!contentExceedsView) return [alignment.measure(contentSize)];
-    var containedSnaps = scrollSnaps.map(bounds.constrain);
-
-    var _findDuplicates2 = findDuplicates(containedSnaps),
-        min = _findDuplicates2.min,
-        max = _findDuplicates2.max;
-
+    if (!contentExceedsView) return alignedWithinView;
+    if (!trim) return containedSnaps;
     return containedSnaps.slice(min - 1, max + 1);
@@ -1618,6 +1715,5 @@ }
   var self = {
-    indexes: indexes,
-    snaps: snaps
+    measure: measure
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1628,3 +1724,3 @@
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1638,2 +1734,3 @@
 });
+exports.ScrollLimit = void 0;
 
@@ -1660,3 +1757,3 @@ var limit_1 = __webpack_require__(2);
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1667,3 +1764,3 @@
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1677,2 +1774,3 @@
 });
+exports.ScrollLooper = void 0;
 
@@ -1713,3 +1811,3 @@ var limit_1 = __webpack_require__(2);
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1720,3 +1818,3 @@
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1730,41 +1828,18 @@
 });
+exports.ScrollProgress = void 0;
 
 function ScrollProgress(params) {
-  var limit = params.limit,
-      loop = params.loop,
-      target = params.target;
-  var min = limit.min,
-      max = limit.max,
-      reachedMin = limit.reachedMin,
-      reachedMax = limit.reachedMax;
-  var scrollLength = min - max;
+  var _params$limit = params.limit,
+      max = _params$limit.max,
+      scrollLength = _params$limit.length;
 
-  function withinBounds(n) {
-    var desiredTarget = target.get() + n;
-    if (reachedMax(desiredTarget)) return max - target.get();
-    if (reachedMin(desiredTarget)) return min - target.get();
-    return n;
-  }
-
   function get(n) {
     var currentLocation = n - max;
-    return currentLocation / scrollLength;
+    return currentLocation / -scrollLength;
   }
 
-  function set(n) {
-    var progressToTarget = n - get(target.get());
-    return withinBounds(add(progressToTarget));
-  }
-
-  function add(n) {
-    var distance = scrollLength * n;
-    return loop ? distance : withinBounds(distance);
-  }
-
   var self = {
-    get: get,
-    set: set,
-    add: add
+    get: get
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1775,3 +1850,3 @@
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1785,2 +1860,3 @@
 });
+exports.ScrollSnap = void 0;
 
@@ -1824,3 +1900,3 @@ var counter_1 = __webpack_require__(3);
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1831,3 +1907,3 @@
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1841,2 +1917,3 @@
 });
+exports.ScrollTarget = void 0;
 
@@ -1848,5 +1925,5 @@ function ScrollTarget(params) {
       contentSize = params.contentSize;
-  var reachedMin = limit.reachedMin,
-      reachedMax = limit.reachedMax,
-      reachedAny = limit.reachedAny;
+  var reachedMax = limit.reachedMax,
+      reachedAny = limit.reachedAny,
+      removeOffset = limit.removeOffset;
 
@@ -1858,12 +1935,5 @@ function minDistance(d1, d2) {
   function findTargetSnap(target) {
-    while (reachedMin(target)) {
-      target += contentSize;
-    }
-
-    while (reachedMax(target)) {
-      target -= contentSize;
-    }
-
+    var distance = removeOffset(target);
     var ascDiffsToSnaps = scrollSnaps.map(function (scrollSnap) {
-      return scrollSnap - target;
+      return scrollSnap - distance;
     }).map(function (diffToSnap) {
@@ -1882,3 +1952,3 @@ return shortcut(diffToSnap, 0);
       index: index,
-      distance: target
+      distance: distance
     };
@@ -1938,3 +2008,3 @@ }
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -1945,3 +2015,3 @@
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -1955,2 +2025,3 @@
 });
+exports.ScrollTo = void 0;
 
@@ -1977,3 +2048,3 @@ function ScrollTo(params) {
       indexCurrent.set(target.index);
-      events.dispatch('select');
+      events.emit('select');
     }
@@ -1997,3 +2068,3 @@ }
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -2004,3 +2075,3 @@
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2014,8 +2085,9 @@
 });
+exports.SlideLooper = void 0;
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(0);
 
-var vector1d_1 = __webpack_require__(0);
-
 function SlideLooper(params) {
+  var axis = params.axis,
+      containerLocation = params.location;
   var contentSize = params.contentSize,
@@ -2026,6 +2098,7 @@ viewSize = params.viewSize,
   var ascItems = utils_1.arrayKeys(slideSizes);
-  var descItems = ascItems.slice().reverse();
+  var descItems = utils_1.arrayKeys(slideSizes).reverse();
   var loopPoints = startPoints().concat(endPoints());
+  var loopStyle = axis.scroll === 'x' ? 'left' : 'top';
 
-  function subtractItemSizesOf(indexes, from) {
+  function subtractItemSizes(indexes, from) {
     return indexes.reduce(function (a, i) {
@@ -2039,3 +2112,3 @@ var size = slideSizes[i];
     return indexes.reduce(function (a, i) {
-      var gapLeft = subtractItemSizesOf(a, sizeOfGap);
+      var gapLeft = subtractItemSizes(a, sizeOfGap);
       return gapLeft > 0 ? a.concat([i]) : a;
@@ -2052,5 +2125,5 @@ }, []);
 
-  function loopPoint(indexes, from, direction) {
+  function loopPointFor(indexes, from, direction) {
     var slideCount = ascItems.length - 1;
-    return subtractItemSizesOf(indexes.map(function (i) {
+    return subtractItemSizes(indexes.map(function (i) {
       return (i + direction) % slideCount;
@@ -2064,14 +2137,10 @@ }), from);
     });
-    return ascIndexes.map(function (i, j) {
-      var index = i;
+    return ascIndexes.map(function (index, loopIndex) {
       var initial = contentSize * (!direction ? 0 : -1);
       var offset = contentSize * (!direction ? 1 : 0);
-      var slidesInSpan = ascIndexes.slice(0, j);
-      var point = loopPoint(slidesInSpan, from, direction);
-      var location = vector1d_1.Vector1D(-1);
-      var target = vector1d_1.Vector1D(0);
+      var slidesInSpan = ascIndexes.slice(0, loopIndex);
+      var point = loopPointFor(slidesInSpan, from, direction);
 
-      var findTarget = function findTarget(loc) {
-        var t = loc > point ? initial : offset;
-        return target.set(0).set(t);
+      var getTarget = function getTarget(location) {
+        return location > point ? initial : offset;
       };
@@ -2081,5 +2150,5 @@
         point: point,
-        findTarget: findTarget,
-        location: location,
-        index: index
+        getTarget: getTarget,
+        index: index,
+        location: -1
       };
@@ -2103,13 +2172,22 @@ });
 
+  function canLoop() {
+    return loopPoints.every(function (_ref) {
+      var index = _ref.index;
+      var otherIndexes = ascItems.filter(function (i) {
+        return i !== index;
+      });
+      return subtractItemSizes(otherIndexes, viewSize) <= 0;
+    });
+  }
+
   function loop(slides) {
-    var parentLocation = params.location;
-    loopPoints.forEach(function (loopTarget) {
-      var findTarget = loopTarget.findTarget,
-          location = loopTarget.location,
-          index = loopTarget.index;
-      var target = findTarget(parentLocation.get());
+    loopPoints.forEach(function (loopPoint) {
+      var getTarget = loopPoint.getTarget,
+          location = loopPoint.location,
+          index = loopPoint.index;
+      var target = getTarget(containerLocation.get());
 
-      if (target.get() !== location.get()) {
-        slides[index].style.left = "".concat(target.get(), "%");
-        location.set(target);
+      if (target !== location) {
+        slides[index].style[loopStyle] = "".concat(target, "%");
+        loopPoint.location = target;
       }
@@ -2119,7 +2197,16 @@ });
 
+  function clear(slides) {
+    loopPoints.forEach(function (_ref2) {
+      var index = _ref2.index;
+      slides[index].style[loopStyle] = '';
+    });
+  }
+
   var self = {
+    canLoop: canLoop,
+    clear: clear,
     loop: loop,
     loopPoints: loopPoints
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -2130,3 +2217,3 @@
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2140,25 +2227,113 @@
 });
+exports.SlidesInView = void 0;
 
-var utils_1 = __webpack_require__(1);
+var utils_1 = __webpack_require__(0);
 
-function Translate(node) {
+function SlidesInView(params) {
+  var contentSize = params.contentSize,
+      slideSizes = params.slideSizes,
+      viewSize = params.viewSize;
+  var inViewThreshold = params.inViewThreshold,
+      loop = params.loop;
+  var thresholds = slideSizes.map(function (s) {
+    return s * inViewThreshold;
+  });
+  var scrollSnaps = utils_1.arrayKeys(slideSizes).map(scrollSnap);
+  var pointsToCheck = concatSlidePoints();
+
+  function scrollSnap(index) {
+    var span = slideSizes.slice(0, index);
+    return span.reduce(function (a, s) {
+      return a - s;
+    }, 0);
+  }
+
+  function concatSlidePoints() {
+    var offsets = loop ? [0, contentSize, -contentSize] : [0];
+    return offsets.map(slidePoints).reduce(function (a, b) {
+      return a.concat(b);
+    }, []);
+  }
+
+  function slidePoints(offset) {
+    return scrollSnaps.map(function (snap, index) {
+      return {
+        start: snap - slideSizes[index] + thresholds[index] + offset,
+        end: snap + viewSize - thresholds[index] + offset,
+        index: index
+      };
+    });
+  }
+
+  function check(location) {
+    return pointsToCheck.reduce(function (list, point) {
+      var index = point.index,
+          start = point.start,
+          end = point.end;
+      var inList = list.indexOf(index) !== -1;
+      var inView = start < location && end > location;
+      return !inList && inView ? list.concat([index]) : list;
+    }, []);
+  }
+
+  var self = {
+    check: check
+  };
+  return self;
+}
+
+exports.SlidesInView = SlidesInView;
+
+/***/ }),
+/* 26 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Translate = void 0;
+
+var utils_1 = __webpack_require__(0);
+
+function Translate(params) {
+  var axis = params.axis,
+      container = params.container;
+  var translates = {
+    x: x,
+    y: y
+  };
+  var translateAxis = translates[axis.scroll];
   var roundToTwoDecimals = utils_1.roundToDecimals(2);
-  var translate = 0;
+  var containerStyle = container.style;
+  var location = 0;
 
-  function translateX(n) {
+  function x(n) {
     return "translate3d(".concat(n, "%,0px,0px)");
   }
 
+  function y(n) {
+    return "translate3d(0px,".concat(n, "%,0px)");
+  }
+
   function to(v) {
     var target = roundToTwoDecimals(v.get());
-    if (translate === target) return;
-    getComputedStyle(node).transform;
-    node.style.transform = translateX(target);
-    translate = target;
+    if (location === target) return;
+    getComputedStyle(container).transform;
+    containerStyle.transform = translateAxis(target);
+    location = target;
   }
 
+  function clear() {
+    containerStyle.transform = '';
+    location = 0;
+  }
+
   var self = {
+    clear: clear,
     to: to
   };
-  return Object.freeze(self);
+  return self;
 }
@@ -2169,3 +2344,3 @@
 /***/ }),
-/* 25 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2179,9 +2354,11 @@
 });
+exports.EventEmitter = void 0;
 
-function EventDispatcher() {
+function EventEmitter() {
   var listeners = {
     destroy: [],
-    dragEnd: [],
-    dragStart: [],
+    pointerDown: [],
+    pointerUp: [],
     init: [],
+    reInit: [],
     resize: [],
@@ -2193,5 +2370,5 @@ scroll: [],
 
-  function dispatch(evt) {
+  function emit(evt) {
     listeners[evt].forEach(function (e) {
-      return e();
+      return e(evt);
     });
@@ -2214,13 +2391,13 @@ return self;
   var self = {
-    dispatch: dispatch,
+    emit: emit,
     off: off,
     on: on
   };
-  return Object.freeze(self);
+  return self;
 }
 
-exports.EventDispatcher = EventDispatcher;
+exports.EventEmitter = EventEmitter;
 
 /***/ }),
-/* 26 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -2234,5 +2411,7 @@
 });
-exports.defaultOptions = Object.freeze({
+exports.defaultOptions = void 0;
+exports.defaultOptions = {
   align: 'center',
-  containScroll: false,
+  axis: 'x',
+  containScroll: '',
   containerSelector: '*',
@@ -2243,2 +2422,3 @@ dragFree: false,
   draggingClass: 'is-dragging',
+  inViewThreshold: 0,
   loop: false,
@@ -2249,3 +2429,3 @@ selectedClass: 'is-selected',
   startIndex: 0
-});
+};
 
@@ -2252,0 +2432,0 @@ /***/ })

package.json

 {
   "name": "embla-carousel",
-  "version": "2.9.1",
+  "version": "3.0.0",
   "author": "David Cetinkaya",
@@ -42,3 +42,3 @@ "private": false,
     "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run lint",
+    "prepublishOnly": "npm-run-all test lint",
     "preversion": "npm run lint",
@@ -49,8 +49,8 @@ "version": "npm run format && git add -A src",
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-env": "^7.9.6",
     "@types/jest": "^24.9.1",
     "@types/jest-diff": "^20.0.0",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^9.8.0",
     "awesome-typescript-loader": "^5.2.1",
@@ -60,3 +60,3 @@ "babel-loader": "^8.1.0",
     "jest": "^24.9.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
@@ -66,9 +66,10 @@ "postcss-cli": "^6.1.3",
     "ts-jest": "^23.10.5",
-    "tslint": "^6.1.1",
+    "tslint": "^6.1.2",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.8.3",
-    "webpack": "^4.42.1",
+    "typescript": "^3.9.3",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^4.2.2"
   }
 }

README.md

 <br />
 <div align="center">
   <p align="center">
-    <a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank"><img width="80" height="80" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel">
+    <a href="https://davidcetinkaya.github.io/embla-carousel" target="_blank"><img width="70" height="70" src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/embla-logo.svg" alt="Embla Carousel">
     </a>
@@ -6,0 +6,0 @@ </p>

lib/components/eventDispatcher.d.ts

-export declare type Callback = () => void;
-export declare type Event = 'init' | 'scroll' | 'select' | 'settle' | 'dragStart' | 'dragEnd' | 'destroy' | 'resize';
-export declare type EventDispatcher = {
-    dispatch: (evt: Event) => EventDispatcher;
-    on: (evt: Event, cb: Callback) => EventDispatcher;
-    off: (evt: Event, cb: Callback) => EventDispatcher;
-};
-export declare function EventDispatcher(): EventDispatcher;

No alert changes

Improved metrics

Total package byte prevSize

129258

4.35%

Number of package files

32

6.67%

Lines of code

2327

8.94%

Worsened metrics

Dev dependency count

22

4.76%

No dependency changes