embla-carousel - npm Package Compare versions

Comparing version 2.7.4 to 2.8.0

lib/components/engine.d.ts

 import { Animation } from './animation';
 import { Counter } from './counter';
-import { DragBehaviour } from './dragBehaviour';
+import { DragHandler } from './dragHandler';
 import { EventDispatcher } from './eventDispatcher';
-import { Mover } from './mover';
 import { Options } from './options';
+import { ScrollBody } from './scrollBody';
 import { ScrollBounds } from './scrollBounds';
@@ -23,4 +23,4 @@ import { ScrollBy } from './scrollBy';
     indexGroups: number[][];
-    mover: Mover;
-    pointer: DragBehaviour;
+    scrollBody: ScrollBody;
+    dragHandler: DragHandler;
     slideLooper: SlideLooper;
@@ -27,0 +27,0 @@ target: Vector1D;

lib/components/eventDispatcher.d.ts

 export declare type Callback = () => void;
-export declare type Event = 'init' | 'scroll' | 'select' | 'dragStart' | 'dragEnd' | 'destroy' | 'resize';
+export declare type Event = 'init' | 'scroll' | 'select' | 'settle' | 'dragStart' | 'dragEnd' | 'destroy' | 'resize';
 export declare type EventDispatcher = {
@@ -4,0 +4,0 @@ dispatch: (evt: Event) => EventDispatcher;

lib/components/eventStore.d.ts

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

lib/components/options.d.ts

@@ -1,2 +0,2 @@
-import { Alignments } from './alignSize';
+import { Alignments } from './alignment';
 export declare type Options = {
@@ -3,0 +3,0 @@ align: Alignments;

lib/components/scrollBounds.d.ts

 import { Animation } from './animation';
 import { Limit } from './limit';
-import { Mover } from './mover';
+import { ScrollBody } from './scrollBody';
 import { Vector1D } from './vector1d';
@@ -8,3 +8,3 @@ declare type Params = {
     location: Vector1D;
-    mover: Mover;
+    scrollBody: ScrollBody;
     animation: Animation;
@@ -11,0 +11,0 @@ tolerance: number;

lib/components/scrollContain.d.ts

@@ -1,2 +0,2 @@
-import { AlignSize } from './alignSize';
+import { Alignment } from './alignment';
 declare type Params = {
@@ -7,3 +7,3 @@ slideIndexes: number[];
     viewSize: number;
-    alignSize: AlignSize;
+    alignment: Alignment;
 };
@@ -10,0 +10,0 @@ export declare type ScrollContain = {

lib/components/scrollLooper.d.ts

@@ -1,9 +0,9 @@
-import { ChunkSize } from './chunkSize';
 import { Limit } from './limit';
+import { PxToPercent } from './pxToPercent';
 import { Vector1D } from './vector1d';
 declare type Params = {
-    chunkSize: ChunkSize;
     contentSize: number;
     limit: Limit;
     location: Vector1D;
+    pxToPercent: PxToPercent;
     vectors: Vector1D[];
@@ -10,0 +10,0 @@ };

lib/components/scrollSnap.d.ts

@@ -1,5 +0,5 @@
-import { AlignSize } from './alignSize';
+import { Alignment } from './alignment';
 declare type Params = {
     snapSizes: number[];
-    alignSize: AlignSize;
+    alignment: Alignment;
     loop: boolean;
@@ -6,0 +6,0 @@ };

lib/components/scrollTarget.d.ts

@@ -1,2 +0,2 @@
-import { Alignments } from './alignSize';
+import { Alignments } from './alignment';
 import { Counter } from './counter';
@@ -3,0 +3,0 @@ import { Limit } from './limit';

lib/index.js

@@ -542,3 +542,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
       slides.forEach(slideFocusEvent);
-      slider.translate.to(slider.mover.location);
+      slider.translate.to(slider.scrollBody.location);
 
@@ -568,3 +568,3 @@ if (options.loop && slides.length === 1) {
         draggableClass = options.draggableClass;
-    slider.pointer.addActivationEvents();
+    slider.dragHandler.addActivationEvents();
     events.on('dragStart', function () {
@@ -626,3 +626,3 @@ return root.add(draggingClass);
         slides = elements.slides;
-    slider.pointer.removeAllEvents();
+    slider.dragHandler.removeAllEvents();
     slider.animation.stop();
@@ -666,3 +666,3 @@ eventStore.removeAll();
     var next = slider.index.clone().add(1);
-    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.scrollBody.useDefaultMass().useDefaultSpeed();
     slider.scrollTo.index(next.get(), -1);
@@ -673,3 +673,3 @@ }
     var prev = slider.index.clone().add(-1);
-    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.scrollBody.useDefaultMass().useDefaultSpeed();
     slider.scrollTo.index(prev.get(), 1);
@@ -680,3 +680,3 @@ }
     var distance = slider.scrollBy.distance(progress);
-    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.scrollBody.useDefaultMass().useDefaultSpeed();
     slider.scrollTo.distance(distance, false);
@@ -686,3 +686,3 @@ }
   function scrollTo(index) {
-    slider.mover.useDefaultMass().useDefaultSpeed();
+    slider.scrollBody.useDefaultMass().useDefaultSpeed();
     slider.scrollTo.index(index, 0);
@@ -714,3 +714,3 @@ }
   function clickAllowed() {
-    return slider.pointer.clickAllowed();
+    return slider.dragHandler.clickAllowed();
   }
@@ -764,17 +764,17 @@
 
-var alignSize_1 = __webpack_require__(9);
+var alignment_1 = __webpack_require__(9);
 
 var animation_1 = __webpack_require__(10);
 
-var chunkSize_1 = __webpack_require__(11);
-
 var counter_1 = __webpack_require__(4);
 
-var dragBehaviour_1 = __webpack_require__(12);
+var dragHandler_1 = __webpack_require__(11);
 
+var dragTracker_1 = __webpack_require__(12);
+
 var limit_1 = __webpack_require__(1);
 
-var mover_1 = __webpack_require__(13);
+var pxToPercent_1 = __webpack_require__(13);
 
-var pointer_1 = __webpack_require__(14);
+var scrollBody_1 = __webpack_require__(14);
 
@@ -818,6 +818,6 @@ var scrollBounds_1 = __webpack_require__(15);
   var containerSize = utils_1.rectWidth(container);
-  var chunkSize = chunkSize_1.ChunkSize(containerSize);
-  var viewSize = chunkSize.root;
+  var pxToPercent = pxToPercent_1.PxToPercent(containerSize);
+  var viewSize = pxToPercent.totalPercent;
   var slideIndexes = Object.keys(slides).map(Number);
-  var slideSizes = slides.map(utils_1.rectWidth).map(chunkSize.measure);
+  var slideSizes = slides.map(utils_1.rectWidth).map(pxToPercent.measure);
   var groupedSizes = utils_1.groupNumbers(slideSizes, slidesToScroll);
@@ -832,3 +832,3 @@ var snapSizes = groupedSizes.map(function (g) {
   });
-  var alignSize = alignSize_1.AlignSize({
+  var alignment = alignment_1.Alignment({
     align: align,
@@ -839,7 +839,7 @@ viewSize: viewSize
     snapSizes: snapSizes,
-    alignSize: alignSize,
+    alignment: alignment,
     loop: loop
   });
   var scrollContain = scrollContain_1.ScrollContain({
-    alignSize: alignSize,
+    alignment: alignment,
     contentSize: contentSize,
@@ -878,3 +878,3 @@ slideIndexes: slideIndexes,
   var direction = function direction() {
-    return pointer.isDown() ? pointer.direction.get() : engine.mover.direction.get();
+    return dragHandler.pointerDown() ? dragHandler.direction.get() : engine.scrollBody.direction.get();
   }; // Draw
@@ -884,7 +884,7 @@
   var update = function update() {
-    engine.mover.seek(target).update();
+    engine.scrollBody.seek(target).update();
 
-    if (!pointer.isDown()) {
+    if (!dragHandler.pointerDown()) {
       if (!loop) engine.scrollBounds.constrain(target);
-      if (engine.mover.settle(target)) engine.animation.stop();
+      if (engine.scrollBody.settle(target)) engine.animation.stop();
     }
@@ -897,7 +897,5 @@
 
-    if (engine.mover.location.get() !== target.get()) {
-      events.dispatch('scroll');
-    }
-
-    engine.translate.to(engine.mover.location);
+    var settled = engine.scrollBody.settle(target);
+    events.dispatch(settled ? 'settle' : 'scroll');
+    engine.translate.to(engine.scrollBody.location);
     engine.animation.proceed();
@@ -911,3 +909,3 @@ }; // Shared
   var target = vector1d_1.Vector1D(startLocation);
-  var mover = mover_1.Mover({
+  var scrollBody = scrollBody_1.ScrollBody({
     location: location,
@@ -933,7 +931,8 @@ speed: speed,
     target: target
-  }); // Pointer
+  }); // DragHandler
 
-  var pointer = dragBehaviour_1.DragBehaviour({
+  var dragHandler = dragHandler_1.DragHandler({
     animation: animation,
     dragFree: dragFree,
+    dragTracker: dragTracker_1.DragTracker(pxToPercent),
     element: root,
@@ -945,4 +944,3 @@ events: events,
     loop: loop,
-    mover: mover,
-    pointer: pointer_1.Pointer(chunkSize),
+    scrollBody: scrollBody,
     scrollTo: scrollTo,
@@ -955,7 +953,7 @@ snapSizes: snapSizes,
     animation: animation,
+    dragHandler: dragHandler,
     index: index,
     indexGroups: indexGroups,
     indexPrevious: indexPrevious,
-    mover: mover,
-    pointer: pointer,
+    scrollBody: scrollBody,
     scrollBounds: scrollBounds_1.ScrollBounds({
@@ -965,3 +963,3 @@ animation: animation,
       location: location,
-      mover: mover,
+      scrollBody: scrollBody,
       tolerance: 50
@@ -975,6 +973,6 @@ }),
     scrollLooper: scrollLooper_1.ScrollLooper({
-      chunkSize: chunkSize,
       contentSize: contentSize,
       limit: limit,
       location: location,
+      pxToPercent: pxToPercent,
       vectors: [location, target]
@@ -1013,3 +1011,3 @@ }),
 
-function AlignSize(params) {
+function Alignment(params) {
   var viewSize = params.viewSize,
@@ -1045,3 +1043,3 @@ align = params.align;
 
-exports.AlignSize = AlignSize;
+exports.Alignment = Alignment;
 
@@ -1102,31 +1100,2 @@ /***/ }),
 
-function ChunkSize(root) {
-  var size = {
-    root: root
-  };
-
-  function measure(n) {
-    return n / size.root * 100;
-  }
-
-  var self = {
-    measure: measure,
-    root: 100
-  };
-  return Object.freeze(self);
-}
-
-exports.ChunkSize = ChunkSize;
-
-/***/ }),
-/* 12 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
 var direction_1 = __webpack_require__(3);
@@ -1138,13 +1107,13 @@
 
-function DragBehaviour(params) {
+function DragHandler(params) {
   var target = params.target,
-      mover = params.mover,
+      scrollBody = params.scrollBody,
       dragFree = params.dragFree,
       animation = params.animation;
   var element = params.element,
-      pointer = params.pointer,
+      dragTracker = params.dragTracker,
       location = params.location,
       events = params.events,
       limit = params.limit;
-  var direction = pointer.direction;
+  var direction = dragTracker.direction;
   var focusNodes = ['INPUT', 'SELECT', 'TEXTAREA'];
@@ -1210,3 +1179,3 @@ var startX = vector1d_1.Vector1D(0);
 
-  function pointerForceBoost() {
+  function dragForceBoost() {
     var boost = dragFree ? freeForceBoost : snapForceBoost;
@@ -1245,10 +1214,10 @@ var type = state.isMouse ? 'mouse' : 'touch';
     state.isMouse = isMouse;
-    pointer.down(evt);
+    dragTracker.pointerDown(evt);
     dragStartLocation.set(target);
     target.set(location);
-    mover.useDefaultMass().useSpeed(80);
+    scrollBody.useDefaultMass().useSpeed(80);
     addInteractionEvents();
     animation.start();
-    startX.set(pointer.read(evt, 'x'));
-    startY.set(pointer.read(evt, 'y'));
+    startX.set(dragTracker.readPoint(evt, 'x'));
+    startY.set(dragTracker.readPoint(evt, 'y'));
     events.dispatch('dragStart');
@@ -1261,4 +1230,4 @@ if (clearPreventClick) state.preventClick = false;
     if (!state.preventScroll && !state.isMouse) {
-      var X = pointer.read(evt, 'x').get();
-      var Y = pointer.read(evt, 'y').get();
+      var X = dragTracker.readPoint(evt, 'x').get();
+      var Y = dragTracker.readPoint(evt, 'y').get();
       var diffX = Math.abs(X - startX.get());
@@ -1270,3 +1239,3 @@ var diffY = Math.abs(Y - startY.get());
 
-    var diff = pointer.move(evt);
+    var diff = dragTracker.pointerMove(evt);
     var reachedLimit = limit.reachedAny(location.get());
@@ -1281,3 +1250,3 @@ var resist = !params.loop && reachedLimit ? 2 : 1;
   function up() {
-    var force = pointer.up() * pointerForceBoost();
+    var force = dragTracker.pointerUp() * dragForceBoost();
     var diffToTarget = target.get() - dragStartLocation.get();
@@ -1291,3 +1260,3 @@ var isMoving = Math.abs(diffToTarget) >= 0.5;
     interactionEvents.removeAll();
-    mover.useSpeed(movementSpeed());
+    scrollBody.useSpeed(movementSpeed());
     seekTargetBy(force);
@@ -1305,3 +1274,3 @@ events.dispatch('dragEnd');
 
-  function isDown() {
+  function pointerDown() {
     return state.isDown;
@@ -1314,3 +1283,3 @@ }
     direction: direction,
-    isDown: isDown,
+    pointerDown: pointerDown,
     removeAllEvents: removeAllEvents
@@ -1321,5 +1290,92 @@ };
 
-exports.DragBehaviour = DragBehaviour;
+exports.DragHandler = DragHandler;
 
 /***/ }),
+/* 12 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var direction_1 = __webpack_require__(3);
+
+var vector1d_1 = __webpack_require__(0);
+
+function DragTracker(pxToPercent) {
+  var coords = {
+    x: 'clientX',
+    y: 'clientY'
+  };
+  var startDrag = vector1d_1.Vector1D(0);
+  var diffDrag = vector1d_1.Vector1D(0);
+  var lastDrag = vector1d_1.Vector1D(0);
+  var pointValue = vector1d_1.Vector1D(0);
+  var direction = direction_1.Direction(0);
+  var trackInterval = 10;
+  var state = {
+    isMouse: false,
+    trackPoints: [],
+    trackTime: new Date().getTime()
+  };
+
+  function readPoint(evt, axis) {
+    state.isMouse = !evt.touches;
+    var c = coords[axis];
+    var value = state.isMouse ? evt[c] : evt.touches[0][c];
+    return pointValue.setNumber(value);
+  }
+
+  function pointerDown(evt) {
+    var point = readPoint(evt, 'x');
+    startDrag.set(point);
+    lastDrag.set(point);
+    return pxToPercent.measure(startDrag.get());
+  }
+
+  function pointerMove(evt) {
+    var point = readPoint(evt, 'x');
+    var time2 = new Date().getTime();
+    var time1 = state.trackTime;
+
+    if (time2 - time1 >= trackInterval) {
+      state.trackPoints.push(point.get());
+      state.trackTime = time2;
+    }
+
+    diffDrag.set(point).subtract(lastDrag);
+    direction.set(diffDrag);
+    lastDrag.set(point);
+    return pxToPercent.measure(diffDrag.get());
+  }
+
+  function pointerUp() {
+    var currentPoint = lastDrag.get();
+    var trackLength = state.isMouse ? 5 : 4;
+    var point = state.trackPoints.slice(-trackLength).map(function (trackPoint) {
+      return currentPoint - trackPoint;
+    }).sort(function (p1, p2) {
+      return Math.abs(p1) < Math.abs(p2) ? 1 : -1;
+    })[0];
+    lastDrag.setNumber(point || 0);
+    state.trackPoints = [];
+    return pxToPercent.measure(lastDrag.get());
+  }
+
+  var self = {
+    direction: direction,
+    pointerDown: pointerDown,
+    pointerMove: pointerMove,
+    pointerUp: pointerUp,
+    readPoint: readPoint
+  };
+  return Object.freeze(self);
+}
+
+exports.DragTracker = DragTracker;
+
+/***/ }),
 /* 13 */
@@ -1335,2 +1391,29 @@ /***/ (function(module, exports, __webpack_require__) {
 
+function PxToPercent(viewInPx) {
+  var totalPercent = 100;
+
+  function measure(n) {
+    return n / viewInPx * totalPercent;
+  }
+
+  var self = {
+    measure: measure,
+    totalPercent: totalPercent
+  };
+  return Object.freeze(self);
+}
+
+exports.PxToPercent = PxToPercent;
+
+/***/ }),
+/* 14 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
 var direction_1 = __webpack_require__(3);
@@ -1342,3 +1425,3 @@
 
-function Mover(params) {
+function ScrollBody(params) {
   var roundToTwoDecimals = utils_1.roundToDecimals(2);
@@ -1420,91 +1503,5 @@ var location = params.location,
 
-exports.Mover = Mover;
+exports.ScrollBody = ScrollBody;
 
 /***/ }),
-/* 14 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var direction_1 = __webpack_require__(3);
-
-var vector1d_1 = __webpack_require__(0);
-
-function Pointer(size) {
-  var coords = {
-    x: 'clientX',
-    y: 'clientY'
-  };
-  var startDrag = vector1d_1.Vector1D(0);
-  var diffDrag = vector1d_1.Vector1D(0);
-  var lastDrag = vector1d_1.Vector1D(0);
-  var pointValue = vector1d_1.Vector1D(0);
-  var direction = direction_1.Direction(0);
-  var trackInterval = 10;
-  var state = {
-    isMouse: false,
-    trackPoints: [],
-    trackTime: new Date().getTime()
-  };
-
-  function read(evt, axis) {
-    state.isMouse = !evt.touches;
-    var c = coords[axis];
-    var value = state.isMouse ? evt[c] : evt.touches[0][c];
-    return pointValue.setNumber(value);
-  }
-
-  function down(evt) {
-    var point = read(evt, 'x');
-    startDrag.set(point);
-    lastDrag.set(point);
-    return size.measure(startDrag.get());
-  }
-
-  function move(evt) {
-    var point = read(evt, 'x');
-    var time2 = new Date().getTime();
-    var time1 = state.trackTime;
-
-    if (time2 - time1 >= trackInterval) {
-      state.trackPoints.push(point.get());
-      state.trackTime = time2;
-    }
-
-    diffDrag.set(point).subtract(lastDrag);
-    direction.set(diffDrag);
-    lastDrag.set(point);
-    return size.measure(diffDrag.get());
-  }
-
-  function up() {
-    var currentPoint = lastDrag.get();
-    var trackLength = state.isMouse ? 5 : 4;
-    lastDrag.setNumber(state.trackPoints.slice(-trackLength).map(function (point) {
-      return currentPoint - point;
-    }).sort(function (p1, p2) {
-      return Math.abs(p1) < Math.abs(p2) ? 1 : -1;
-    })[0] || 0);
-    state.trackPoints = [];
-    return size.measure(lastDrag.get());
-  }
-
-  var self = {
-    direction: direction,
-    down: down,
-    move: move,
-    read: read,
-    up: up
-  };
-  return Object.freeze(self);
-}
-
-exports.Pointer = Pointer;
-
-/***/ }),
 /* 15 */
@@ -1523,3 +1520,3 @@ /***/ (function(module, exports, __webpack_require__) {
       location = params.location,
-      mover = params.mover,
+      scrollBody = params.scrollBody,
       animation = params.animation,
@@ -1546,3 +1543,3 @@ tolerance = params.tolerance;
         v.setNumber(constraint);
-        mover.useSpeed(10).useMass(3);
+        scrollBody.useSpeed(10).useMass(3);
         animation.start();
@@ -1619,3 +1616,3 @@ state.timeout = 0;
 function ScrollContain(params) {
-  var alignSize = params.alignSize,
+  var alignment = params.alignment,
       contentSize = params.contentSize,
@@ -1665,3 +1662,3 @@ viewSize = params.viewSize;
   function snaps(scrollSnaps) {
-    if (!contentExceedsView) return [alignSize.measure(contentSize)];
+    if (!contentExceedsView) return [alignment.measure(contentSize)];
     var containedSnaps = scrollSnaps.map(bounds.constrain);
@@ -1735,9 +1732,9 @@
 function ScrollLooper(params) {
-  var limit = params.limit,
+  var contentSize = params.contentSize,
       location = params.location,
-      chunkSize = params.chunkSize,
-      contentSize = params.contentSize,
       vectors = params.vectors;
-  var min = limit.min + chunkSize.measure(0.1);
-  var max = limit.max + chunkSize.measure(0.1);
+  var limit = params.limit,
+      pxToPercent = params.pxToPercent;
+  var min = limit.min + pxToPercent.measure(0.1);
+  var max = limit.max + pxToPercent.measure(0.1);
 
@@ -1821,5 +1818,5 @@ var _limit_1$Limit = limit_1.Limit({
   var snapSizes = params.snapSizes,
-      alignSize = params.alignSize,
+      alignment = params.alignment,
       loop = params.loop;
-  var alignSizes = snapSizes.map(alignSize.measure);
+  var alignments = snapSizes.map(alignment.measure);
   var distancesBetween = distancesBetweenScrollSnaps();
@@ -1839,3 +1836,3 @@
       var next = counter.clone().set(index + 1);
-      return size + alignSizes[index] - alignSizes[next.get()];
+      return size + alignments[index] - alignments[next.get()];
     });
@@ -1848,3 +1845,3 @@ }
       return a - d;
-    }, alignSizes[0]);
+    }, alignments[0]);
   }
@@ -2173,8 +2170,7 @@
 
+var vector1d_1 = __webpack_require__(0);
+
 function Translate(node) {
   var roundToTwoDecimals = utils_1.roundToDecimals(2);
-  var nodeStyle = node.style;
-  var state = {
-    value: 0
-  };
+  var translate = vector1d_1.Vector1D(0);
 
@@ -2188,6 +2184,6 @@ function translateX(n) {
 
-    if (state.value !== target) {
-      state.value = target;
+    if (translate.get() !== target) {
       getComputedStyle(node).transform;
-      nodeStyle.transform = translateX(target);
+      node.style.transform = translateX(target);
+      translate.setNumber(target);
     }
@@ -2223,3 +2219,4 @@ }
     scroll: [],
-    select: []
+    select: [],
+    settle: []
   };
@@ -2226,0 +2223,0 @@

package.json

 {
   "name": "embla-carousel",
-  "version": "2.7.4",
+  "version": "2.8.0",
   "author": "David Cetinkaya",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -1707,3 +1707,3 @@ <br />
 const onInitCallback = () => {
-  console.log('The carousel has just been initialized.')
+  console.log('The carousel is ready to rock.')
 }
@@ -1797,7 +1797,13 @@
   <summary>
-    Under construction...
+    Fire a callback when the carousel mounts.
   </summary>
   <hr>
   <div>
-    Under construction...
+    This event fires the given callback when the carousel has initialised and its
+    <a href="#api">
+      <code>API</code>
+    </a> is ready to use. Note that the init event only fires once upon the first initialisation and won't trigger when invoking 
+    <a href="#changeOptions">
+      <code>changeOptions</code>
+    </a> or similar.
   </div>
@@ -1811,3 +1817,3 @@ <br>
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
@@ -1822,2 +1828,8 @@ </div>
 const embla = EmblaCarousel(emblaNode, options)
+
+const onInitCallback = () => {
+  console.log('The carousel is ready to rock.')
+})
+
+embla.on('init', onInitCallback)
 ```
@@ -1832,3 +1844,3 @@
   <summary>
-    Under construction...
+    Fire a callback when the carousel is destroyed.
   </summary>
@@ -1846,3 +1858,3 @@ <hr>
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
@@ -1866,3 +1878,3 @@ </div>
   <summary>
-    Under construction...
+    Fire a callback when selected scroll snap changes.
   </summary>
@@ -1880,3 +1892,3 @@ <hr>
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
@@ -1900,3 +1912,3 @@ </div>
   <summary>
-    Under construction...
+    Fire a callback when the carousel is scrolling.
   </summary>
@@ -1934,2 +1946,38 @@ <hr>
 
+##### `settle`
+
+<details>
+  <summary>
+    Fire a callback when the carousel has settled.
+  </summary>
+  <hr>
+  <div>
+    Under construction...
+  </div>
+  <br>
+  <div>
+    <a href="https://codesandbox.io/s/embla-carousel-scrollprogress-cghc5">
+      <img src="https://rawgit.com/davidcetinkaya/embla-carousel/master/docs/assets/codesandbox-logo.svg" height="23" align="top" />
+    </a>
+    &nbsp;
+    <a href="https://codesandbox.io/s/embla-carousel-scrollprogress-cghc5">
+      <code>CodeSandbox (upcoming)</code>
+    </a>
+  </div>
+  <br>
+  <p>
+    <strong>Usage</strong>
+  </p>
+
+```javascript
+const embla = EmblaCarousel(emblaNode, options)
+
+embla.on('settle', () => {
+  console.log(`The carousel has stopped scrolling.`)
+})
+```
+
+<hr>
+</details>
+
 ##### `resize`
@@ -1939,3 +1987,3 @@
   <summary>
-    Under construction...
+    Fire a callback when the carousel has resized.
   </summary>
@@ -1953,3 +2001,3 @@ <hr>
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
@@ -1986,3 +2034,3 @@ </div>
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
@@ -2019,3 +2067,3 @@ </div>
     <a href="#">
-      <code>CodeSandbox</code>
+      <code>CodeSandbox (upcoming)</code>
     </a>
@@ -2022,0 +2070,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123454

increased by1.78%

Number of lines in readme file

2157

increased by2.28%

Worsened metrics

Lines of code

2226

decreased by-0.13%

No dependency changes