Use `const` for typing constructors. Add the `lazyload:error` event.

dist/js/splide.cjs.js

@@ -441,13 +441,14 @@ const EVENT_AUTOPLAY_PLAY = "autoplay:play";
 const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
 const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
 const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
-const EVENT_SLIDE_KEYDOWN = "sk";
-const EVENT_SHIFTED = "sh";
-const EVENT_END_INDEX_CHANGED = "ei";
+const EVENT_LAZYLOAD_ERROR = "lazyload:error";
+const EVENT_SLIDE_KEYDOWN = "_sk";
+const EVENT_SHIFTED = "_sh";
+const EVENT_END_INDEX_CHANGED = "_ei";
 
 const NOT_OVERFLOW_KEY = "!overflow";
-function Breakpoints(Splide2, Components2, options, event) {
-  const { state } = Splide2;
+const Breakpoints = (Splide, Components, options, event) => {
+  const { state } = Splide;
   const breakpoints = options.breakpoints || {};
   const reducedMotion = options.reducedMotion || {};
   const binder = EventBinder();
@@ -460,7 +461,7 @@ function Breakpoints(Splide2, Components2, options, event) {
       }
     });
     if (breakpoints[NOT_OVERFLOW_KEY]) {
-      entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components2.Layout && !Components2.Layout.isOverflow()]);
+      entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components.Layout && !Components.Layout.isOverflow()]);
       event.on(EVENT_OVERFLOW, update);
     }
     register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
@@ -485,12 +486,12 @@ function Breakpoints(Splide2, Components2, options, event) {
     omit(options);
     set(merged, false, !state.is(CREATED));
     if (options.destroy) {
-      Splide2.destroy(options.destroy === "completely");
+      Splide.destroy(options.destroy === "completely");
     } else if (destroyed) {
       destroy(true);
-      Splide2.mount();
+      Splide.mount();
     } else {
-      direction !== options.direction && Splide2.refresh();
+      direction !== options.direction && Splide.refresh();
     }
   }
   function reduce(enable) {
@@ -502,7 +503,7 @@ function Breakpoints(Splide2, Components2, options, event) {
     merge(options, opts);
     base && merge(Object.getPrototypeOf(options), opts);
     if (notify) {
-      Splide2.emit(EVENT_UPDATED, options);
+      Splide.emit(EVENT_UPDATED, options);
     }
   }
   return {
@@ -511,7 +512,7 @@ function Breakpoints(Splide2, Components2, options, event) {
     reduce,
     set
   };
-}
+};
 
 const ARROW = "Arrow";
 const ARROW_LEFT = `${ARROW}Left`;
@@ -533,7 +534,7 @@ const ORIENTATION_MAP = {
   ArrowLeft: [ARROW_UP, ARROW_RIGHT],
   ArrowRight: [ARROW_DOWN, ARROW_LEFT]
 };
-function Direction(Splide2, Components2, options) {
+const Direction = (Splide2, Components2, options) => {
   function resolve(prop, axisOnly, direction) {
     direction = direction || options.direction;
     const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
@@ -549,7 +550,7 @@ function Direction(Splide2, Components2, options) {
     resolve,
     orient
   };
-}
+};
 
 const ROLE = "role";
 const TAB_INDEX = "tabindex";
@@ -644,9 +645,9 @@ const POINTER_DOWN_EVENTS = "touchstart mousedown";
 const POINTER_MOVE_EVENTS = "touchmove mousemove";
 const POINTER_UP_EVENTS = "touchend touchcancel mouseup click";
 
-function Elements(Splide2, Components2, options, event) {
+const Elements = (Splide, Components, options, event) => {
   const { on, bind } = event;
-  const { root } = Splide2;
+  const { root } = Splide;
   const { i18n } = options;
   const elements = {};
   const slides = [];
@@ -737,13 +738,13 @@ function Elements(Splide2, Components2, options, event) {
     mount,
     destroy
   });
-}
+};
 
 const SLIDE = "slide";
 const LOOP = "loop";
 const FADE = "fade";
 
-function Slide$1(Splide2, index, slideIndex, slide) {
+const Slide$1 = (Splide2, index, slideIndex, slide) => {
   const event = Splide2.event.create();
   const { on, emit, bind } = event;
   const { Components, root, options } = Splide2;
@@ -879,11 +880,11 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     isWithin
   };
   return self;
-}
+};
 
-function Slides(Splide2, Components2, options, event) {
+const Slides = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
-  const { slides, list } = Components2.Elements;
+  const { slides, list } = Components.Elements;
   const Slides2 = [];
   function mount() {
     init();
@@ -907,7 +908,7 @@ function Slides(Splide2, Components2, options, event) {
     });
   }
   function register(slide, index, slideIndex) {
-    const object = Slide$1(Splide2, index, slideIndex, slide);
+    const object = Slide$1(Splide, index, slideIndex, slide);
     object.mount();
     Slides2.push(object);
     Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index);
@@ -916,7 +917,7 @@ function Slides(Splide2, Components2, options, event) {
     return excludeClones ? filter((Slide2) => !Slide2.isClone) : Slides2;
   }
   function getIn(page) {
-    const { Controller } = Components2;
+    const { Controller } = Components;
     const index = Controller.toIndex(page);
     const max = Controller.hasFocus() ? 1 : options.perPage;
     return filter((Slide2) => between(Slide2.index, index, index + max - 1));
@@ -992,13 +993,13 @@ function Slides(Splide2, Components2, options, event) {
     getLength,
     isEnough
   };
-}
+};
 
-function Layout(Splide2, Components2, options, event) {
+const Layout = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const { Slides } = Components2;
-  const { resolve } = Components2.Direction;
-  const { root, track, list } = Components2.Elements;
+  const { Slides } = Components;
+  const { resolve } = Components.Direction;
+  const { root, track, list } = Components.Elements;
   const { getAt, style: styleSlides } = Slides;
   let vertical;
   let rootRect;
@@ -1070,7 +1071,7 @@ function Layout(Splide2, Components2, options, event) {
     return Slide ? Slide.pos() + Slide.size() + (withoutGap ? 0 : getGap()) : 0;
   }
   function sliderSize(withoutGap) {
-    return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
+    return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap);
   }
   function getGap() {
     const first = getAt(0);
@@ -1084,7 +1085,7 @@ function Layout(Splide2, Components2, options, event) {
     )) || 0;
   }
   function isOverflow() {
-    return Splide2.is(FADE) || sliderSize(true) > listSize();
+    return Splide.is(FADE) || sliderSize(true) > listSize();
   }
   return {
     mount,
@@ -1096,13 +1097,13 @@ function Layout(Splide2, Components2, options, event) {
     getPadding,
     isOverflow
   };
-}
+};
 
 const MULTIPLIER = 2;
-function Clones(Splide2, Components2, options, event) {
+const Clones = (Splide, Components, options, event) => {
   const { on } = event;
-  const { Elements, Slides, Layout: { resize } } = Components2;
-  const { resolve } = Components2.Direction;
+  const { Elements, Slides, Layout: { resize } } = Components;
+  const { resolve } = Components.Direction;
   const clones = [];
   let cloneCount;
   function mount() {
@@ -1127,7 +1128,7 @@ function Clones(Splide2, Components2, options, event) {
     const count = computeCloneCount();
     if (cloneCount !== count) {
       if (cloneCount < count || !count) {
-        !count && Splide2.go(0);
+        !count && Splide.go(0);
         event.emit(EVENT_REFRESH);
       }
     }
@@ -1151,17 +1152,17 @@ function Clones(Splide2, Components2, options, event) {
   function cloneDeep(elm, index) {
     const clone = elm.cloneNode(true);
     addClass(clone, options.classes.clone);
-    clone.id = `${Splide2.root.id}-clone${pad(index + 1)}`;
+    clone.id = `${Splide.root.id}-clone${pad(index + 1)}`;
     return clone;
   }
   function computeCloneCount() {
     let { clones: clones2 } = options;
-    if (!Splide2.is(LOOP)) {
+    if (!Splide.is(LOOP)) {
       clones2 = 0;
     } else if (isUndefined(clones2)) {
-      const fixedSize = options[resolve("fixedWidth")] && Components2.Layout.slideSize(0);
+      const fixedSize = options[resolve("fixedWidth")] && Components.Layout.slideSize(0);
       const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
-      clones2 = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage * MULTIPLIER;
+      clones2 = fixedCount || options[resolve("autoWidth")] && Splide.length || options.perPage * MULTIPLIER;
     }
     return clones2;
   }
@@ -1169,25 +1170,25 @@ function Clones(Splide2, Components2, options, event) {
     mount,
     destroy
   };
-}
+};
 
-function Move(Splide2, Components2, options, event) {
+const Move = (Splide, Components, options, event) => {
   const { on, emit } = event;
-  const { set } = Splide2.state;
-  const { Slides } = Components2;
-  const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components2.Layout;
-  const { resolve, orient } = Components2.Direction;
-  const { list, track } = Components2.Elements;
+  const { set } = Splide.state;
+  const { Slides } = Components;
+  const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components.Layout;
+  const { resolve, orient } = Components.Direction;
+  const { list, track } = Components.Elements;
   let Transition;
   function mount() {
-    Transition = Components2.Transition;
+    Transition = Components.Transition;
     on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
   }
   function reposition() {
-    if (!Components2.Controller.isBusy()) {
-      Components2.Scroll.cancel();
-      jump(Splide2.index);
-      Components2.Slides.update();
+    if (!Components.Controller.isBusy()) {
+      Components.Scroll.cancel();
+      jump(Splide.index);
+      Components.Slides.update();
     }
   }
   function move(dest, index, prev, callback) {
@@ -1207,16 +1208,16 @@ function Move(Splide2, Components2, options, event) {
     translate(toPosition(index, true));
   }
   function translate(position, preventLoop) {
-    if (!Splide2.is(FADE)) {
+    if (!Splide.is(FADE)) {
       const destination = preventLoop ? position : loop(position);
       style(list, "transform", `translate${resolve("X")}(${destination}px)`);
       position !== destination && emit(EVENT_SHIFTED);
     }
   }
   function loop(position) {
-    if (Splide2.is(LOOP)) {
+    if (Splide.is(LOOP)) {
       const index = toIndex(position);
-      const exceededMax = index > Components2.Controller.getEnd();
+      const exceededMax = index > Components.Controller.getEnd();
       const exceededMin = index < 0;
       if (exceededMin || exceededMax) {
         position = shift(position, exceededMax);
@@ -1259,7 +1260,7 @@ function Move(Splide2, Components2, options, event) {
     return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
   }
   function trim(position) {
-    if (options.trimSpace && Splide2.is(SLIDE)) {
+    if (options.trimSpace && Splide.is(SLIDE)) {
       position = clamp(position, 0, orient(sliderSize(true) - listSize()));
     }
     return position;
@@ -1269,7 +1270,7 @@ function Move(Splide2, Components2, options, event) {
     return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
   }
   function getLimit(max) {
-    return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
+    return toPosition(max ? Components.Controller.getEnd() : 0, !!options.trimSpace);
   }
   function canShift(backwards) {
     const padding = getPadding(false);
@@ -1295,16 +1296,16 @@ function Move(Splide2, Components2, options, event) {
     exceededLimit,
     reposition
   };
-}
+};
 
-function Controller(Splide2, Components2, options, event) {
+const Controller = (Splide, Components, options, event) => {
   const { on, emit } = event;
-  const { Move } = Components2;
+  const { Move } = Components;
   const { getPosition, getLimit, toPosition } = Move;
-  const { isEnough, getLength } = Components2.Slides;
+  const { isEnough, getLength } = Components.Slides;
   const { omitEnd } = options;
-  const isLoop = Splide2.is(LOOP);
-  const isSlide = Splide2.is(SLIDE);
+  const isLoop = Splide.is(LOOP);
+  const isSlide = Splide.is(SLIDE);
   const getNext = apply(getAdjacent, false);
   const getPrev = apply(getAdjacent, true);
   let currIndex = options.start || 0;
@@ -1347,14 +1348,14 @@ function Controller(Splide2, Components2, options, event) {
     }
   }
   function jump(control) {
-    const { set } = Components2.Breakpoints;
+    const { set } = Components.Breakpoints;
     const { speed } = options;
     set({ speed: 0 });
     go(control);
     set({ speed });
   }
   function scroll(destination, duration, snap, callback) {
-    Components2.Scroll.scroll(destination, duration, snap, () => {
+    Components.Scroll.scroll(destination, duration, snap, () => {
       const index = loop(Move.toIndex(getPosition()));
       setIndex(omitEnd ? min(index, endIndex) : index);
       callback && callback();
@@ -1419,7 +1420,7 @@ function Controller(Splide2, Components2, options, event) {
   function computeMovableDestIndex(dest) {
     if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
       const position = getPosition();
-      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
+      while (position === toPosition(dest, true) && between(dest, 0, Splide.length - 1, !options.rewind)) {
         dest < currIndex ? --dest : ++dest;
       }
     }
@@ -1461,7 +1462,7 @@ function Controller(Splide2, Components2, options, event) {
     return !isUndefined(options.focus) || options.isNavigation;
   }
   function isBusy() {
-    return Splide2.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
+    return Splide.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
   }
   return {
     mount,
@@ -1480,16 +1481,16 @@ function Controller(Splide2, Components2, options, event) {
     hasFocus,
     isBusy
   };
-}
+};
 
 const XML_NAME_SPACE = "http://www.w3.org/2000/svg";
 const PATH = "m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z";
 const SIZE = 40;
 
-function Arrows(Splide2, Components2, options, event) {
+const Arrows = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
   const { classes, i18n } = options;
-  const { Elements, Controller } = Components2;
+  const { Elements, Controller } = Components;
   const { arrows: placeholder, track } = Elements;
   let wrapper = placeholder;
   let prev = Elements.prev;
@@ -1554,7 +1555,7 @@ function Arrows(Splide2, Components2, options, event) {
   }
   function update() {
     if (prev && next) {
-      const index = Splide2.index;
+      const index = Splide.index;
       const prevIndex = Controller.getPrev();
       const nextIndex = Controller.getNext();
       const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
@@ -1572,15 +1573,15 @@ function Arrows(Splide2, Components2, options, event) {
     destroy,
     update
   };
-}
+};
 
 const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
-function Autoplay(Splide2, Components2, options, event) {
+const Autoplay = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
+  const interval = RequestInterval(options.interval, Splide.go.bind(Splide, ">"), onAnimationFrame);
   const { isPaused } = interval;
-  const { Elements, Elements: { root, toggle } } = Components2;
+  const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
   let hovered;
   let focused;
@@ -1615,7 +1616,7 @@ function Autoplay(Splide2, Components2, options, event) {
     on(EVENT_MOVE, onMove);
   }
   function play() {
-    if (isPaused() && Components2.Slides.isEnough()) {
+    if (isPaused() && Components.Slides.isEnough()) {
       interval.start(!options.resetProgress);
       focused = hovered = stopped = false;
       update();
@@ -1647,7 +1648,7 @@ function Autoplay(Splide2, Components2, options, event) {
     emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
   function onMove(index) {
-    const Slide = Components2.Slides.getAt(index);
+    const Slide = Components.Slides.getAt(index);
     interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
   }
   return {
@@ -1657,7 +1658,7 @@ function Autoplay(Splide2, Components2, options, event) {
     pause,
     isPaused
   };
-}
+};
 
 const BOUNCE_DIFF_THRESHOLD = 10;
 const BOUNCE_DURATION = 600;
@@ -1665,12 +1666,12 @@ const FRICTION_FACTOR = 0.6;
 const BASE_VELOCITY = 1.5;
 const MIN_DURATION = 800;
 
-function Scroll(Splide2, Components2, options, event) {
+const Scroll = (Splide, Components, options, event) => {
   const { on, emit } = event;
-  const { state: { set } } = Splide2;
-  const { Move } = Components2;
+  const { state: { set } } = Splide;
+  const { Move } = Components;
   const { getPosition, getLimit, exceededLimit, translate } = Move;
-  const isSlide = Splide2.is(SLIDE);
+  const isSlide = Splide.is(SLIDE);
   let interval;
   let callback;
   let friction = 1;
@@ -1682,9 +1683,9 @@ function Scroll(Splide2, Components2, options, event) {
     const from = getPosition();
     clear();
     if (snap && (!isSlide || !exceededLimit())) {
-      const size = Components2.Layout.sliderSize();
+      const size = Components.Layout.sliderSize();
       const offset = sign(destination) * size * floor(abs(destination) / size) || 0;
-      destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;
+      destination = Move.toPosition(Components.Controller.toDest(destination % size)) + offset;
     }
     const immediately = approximatelyEqual(from, destination, 1) || duration === 0;
     friction = 1;
@@ -1733,16 +1734,16 @@ function Scroll(Splide2, Components2, options, event) {
     scroll,
     cancel
   };
-}
+};
 
 const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };
 
-function Drag(Splide2, Components2, options, event) {
+const Drag = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
   const binder = event.create();
-  const { state } = Splide2;
-  const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components2;
-  const { resolve, orient } = Components2.Direction;
+  const { state } = Splide;
+  const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components;
+  const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
   let basePosition;
   let baseEvent;
@@ -1837,9 +1838,9 @@ function Drag(Splide2, Components2, options, event) {
     reduce(false);
     if (isFree) {
       Controller.scroll(destination, 0, options.snap);
-    } else if (Splide2.is(FADE)) {
+    } else if (Splide.is(FADE)) {
       Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
-    } else if (Splide2.is(SLIDE) && exceeded && rewind) {
+    } else if (Splide.is(SLIDE) && exceeded && rewind) {
       Controller.go(exceededLimit(true) ? ">" : "<");
     } else {
       Controller.go(Controller.toDest(destination), true);
@@ -1857,7 +1858,7 @@ function Drag(Splide2, Components2, options, event) {
     return abs(diffCoord(e)) > abs(diffCoord(e, true));
   }
   function computeVelocity(e) {
-    if (Splide2.is(LOOP) || !exceeded) {
+    if (Splide.is(LOOP) || !exceeded) {
       const time = diffTime(e);
       if (time && time < LOG_INTERVAL) {
         return diffCoord(e) / time;
@@ -1868,7 +1869,7 @@ function Drag(Splide2, Components2, options, event) {
   function computeDestination(velocity) {
     return getPosition() + sign(velocity) * min(
       abs(velocity) * (options.flickPower || 600),
-      isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1)
+      isFree ? Infinity : Components.Layout.listSize() * (options.flickMaxPages || 1)
     );
   }
   function diffCoord(e, orthogonal) {
@@ -1884,7 +1885,7 @@ function Drag(Splide2, Components2, options, event) {
     return (isTouchEvent(e) ? e.changedTouches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
   }
   function constrain(diff) {
-    return diff / (exceeded && Splide2.is(SLIDE) ? FRICTION : 1);
+    return diff / (exceeded && Splide.is(SLIDE) ? FRICTION : 1);
   }
   function isDraggable(target2) {
     const { noDrag } = options;
@@ -1904,13 +1905,13 @@ function Drag(Splide2, Components2, options, event) {
     disable,
     isDragging
   };
-}
+};
 
 const KEYBOARD_EVENT = "keydown";
-function Keyboard(Splide2, Components2, options, event) {
+const Keyboard = (Splide, Components, options, event) => {
   const { on, bind, destroy } = event;
-  const { root } = Splide2;
-  const { resolve } = Components2.Direction;
+  const { root } = Splide;
+  const { resolve } = Components.Direction;
   let target;
   let disabled;
   function mount() {
@@ -1939,9 +1940,9 @@ function Keyboard(Splide2, Components2, options, event) {
   function onKeydown(e) {
     if (!disabled) {
       if (e.key === resolve(ARROW_LEFT)) {
-        Splide2.go("<");
+        Splide.go("<");
       } else if (e.key === resolve(ARROW_RIGHT)) {
-        Splide2.go(">");
+        Splide.go(">");
       }
     }
   }
@@ -1950,13 +1951,13 @@ function Keyboard(Splide2, Components2, options, event) {
     destroy,
     disable
   };
-}
+};
 
 const SRC_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-lazy`;
 const SRCSET_DATA_ATTRIBUTE = `${SRC_DATA_ATTRIBUTE}-srcset`;
 const IMAGE_SELECTOR = `[${SRC_DATA_ATTRIBUTE}], [${SRCSET_DATA_ATTRIBUTE}]`;
 
-function LazyLoad(Splide2, Components2, options, event) {
+const LazyLoad = (Splide, Components, options, event) => {
   const { on, off, bind, emit } = event;
   const isSequential = options.lazyLoad === "sequential";
   const events = [EVENT_MOVED, EVENT_SCROLLED];
@@ -1979,7 +1980,7 @@ function LazyLoad(Splide2, Components2, options, event) {
     }
   }
   function register() {
-    Components2.Slides.forEach((Slide) => {
+    Components.Slides.forEach((Slide) => {
       queryAll(Slide.slide, IMAGE_SELECTOR).forEach((img) => {
         const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
         const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
@@ -1996,7 +1997,7 @@ function LazyLoad(Splide2, Components2, options, event) {
   function check() {
     entries = entries.filter((data) => {
       const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
-      return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
+      return data[1].isWithin(Splide.index, distance) ? load(data) : true;
     });
     entries.length || off(events);
   }
@@ -2017,6 +2018,8 @@ function LazyLoad(Splide2, Components2, options, event) {
       display(img, "");
       emit(EVENT_LAZYLOAD_LOADED, img, Slide);
       emit(EVENT_RESIZE);
+    } else {
+      emit(EVENT_LAZYLOAD_ERROR, img, Slide);
     }
     isSequential && loadNext();
   }
@@ -2028,13 +2031,13 @@ function LazyLoad(Splide2, Components2, options, event) {
     destroy: apply(empty, entries),
     check
   };
-}
+};
 
-function Pagination(Splide2, Components2, options, event) {
+const Pagination = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
-  const { Slides, Elements, Controller } = Components2;
+  const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
-  const { resolve } = Components2.Direction;
+  const { resolve } = Components.Direction;
   const { pagination: placeholder } = Elements;
   const items = [];
   let list;
@@ -2048,7 +2051,7 @@ function Pagination(Splide2, Components2, options, event) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
       update();
-      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide2.index));
+      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide.index));
     }
   }
   function destroy() {
@@ -2061,7 +2064,7 @@ function Pagination(Splide2, Components2, options, event) {
     event.destroy();
   }
   function createPagination() {
-    const { length } = Splide2;
+    const { length } = Splide;
     const { classes, i18n, perPage } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
     list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
@@ -2140,10 +2143,10 @@ function Pagination(Splide2, Components2, options, event) {
     getAt,
     update
   };
-}
+};
 
 const TRIGGER_KEYS = [" ", "Enter"];
-function Sync(Splide2, Components2, options, event) {
+const Sync = (Splide2, Components, options, event) => {
   const { isNavigation, slideFocus } = options;
   const events = [];
   function mount() {
@@ -2185,7 +2188,7 @@ function Sync(Splide2, Components2, options, event) {
   }
   function update() {
     setAttribute(
-      Components2.Elements.list,
+      Components.Elements.list,
       ARIA_ORIENTATION,
       options.direction === TTB ? "vertical" : ""
     );
@@ -2201,7 +2204,7 @@ function Sync(Splide2, Components2, options, event) {
   }
   return {
     setup: apply(
-      Components2.Breakpoints.set,
+      Components.Breakpoints.set,
       { slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus },
       true
     ),
@@ -2209,13 +2212,13 @@ function Sync(Splide2, Components2, options, event) {
     destroy,
     remount
   };
-}
+};
 
-function Wheel(Splide2, Components2, options, event) {
+const Wheel = (Splide, Components, options, event) => {
   let lastTime = 0;
   function mount() {
     if (options.wheel) {
-      event.bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
+      event.bind(Components.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
     }
   }
   function onWheel(e) {
@@ -2226,32 +2229,32 @@ function Wheel(Splide2, Components2, options, event) {
       const min = options.wheelMinThreshold || 0;
       const sleep = options.wheelSleep || 0;
       if (abs(deltaY) > min && timeStamp - lastTime > sleep) {
-        Splide2.go(backwards ? "<" : ">");
+        Splide.go(backwards ? "<" : ">");
         lastTime = timeStamp;
       }
       shouldPrevent(backwards) && prevent(e);
     }
   }
   function shouldPrevent(backwards) {
-    return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+    return !options.releaseWheel || Splide.state.is(MOVING) || Components.Controller.getAdjacent(backwards) !== -1;
   }
   return {
     mount
   };
-}
+};
 
 const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;
 
 const SR_REMOVAL_DELAY = 90;
-function Live(Splide2, Components2, options, event) {
+const Live = (Splide, Components, options, event) => {
   const { on } = event;
-  const { track } = Components2.Elements;
+  const { track } = Components.Elements;
   const enabled = options.live && !options.isNavigation;
   const sr = create("span", CLASS_SR);
   const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
   function mount() {
     if (enabled) {
-      disable(!Components2.Autoplay.isPaused());
+      disable(!Components.Autoplay.isPaused());
       setAttribute(track, ARIA_ATOMIC, true);
       sr.textContent = "\u2026";
       sr.style.cssText = VISUALLY_HIDDEN;
@@ -2284,7 +2287,7 @@ function Live(Splide2, Components2, options, event) {
     disable,
     destroy
   };
-}
+};
 
 const COMPONENTS = {
   Breakpoints,
@@ -2350,8 +2353,8 @@ const DEFAULTS = {
   }
 };
 
-function Fade(Splide2, Components2, options, event) {
-  const { Slides } = Components2;
+const Fade = (Splide, Components, options, event) => {
+  const { Slides } = Components;
   function mount() {
     event.on([EVENT_MOUNTED, EVENT_REFRESH], init);
   }
@@ -2369,11 +2372,11 @@ function Fade(Splide2, Components2, options, event) {
     start,
     cancel: noop
   };
-}
+};
 
-function Slide(Splide2, Components2, options, event) {
-  const { Move, Controller, Scroll } = Components2;
-  const { list } = Components2.Elements;
+const Slide = (Splide, Components, options, event) => {
+  const { Move, Controller, Scroll } = Components;
+  const { list } = Components.Elements;
   const transition = apply(style, list, "transition");
   let endCallback;
   function mount() {
@@ -2407,7 +2410,7 @@ function Slide(Splide2, Components2, options, event) {
   }
   function getSpeed(index) {
     const { rewindSpeed } = options;
-    if (Splide2.is(SLIDE) && rewindSpeed) {
+    if (Splide.is(SLIDE) && rewindSpeed) {
       const prev = Controller.getIndex(true);
       const end = Controller.getEnd();
       if (prev === 0 && index >= end || prev >= end && index === 0) {
@@ -2421,7 +2424,7 @@ function Slide(Splide2, Components2, options, event) {
     start,
     cancel
   };
-}
+};
 
 class Splide {
   static defaults = {};
@@ -2961,6 +2964,7 @@ exports.EVENT_DRAGGING = EVENT_DRAGGING;
 exports.EVENT_END_INDEX_CHANGED = EVENT_END_INDEX_CHANGED;
 exports.EVENT_HIDDEN = EVENT_HIDDEN;
 exports.EVENT_INACTIVE = EVENT_INACTIVE;
+exports.EVENT_LAZYLOAD_ERROR = EVENT_LAZYLOAD_ERROR;
 exports.EVENT_LAZYLOAD_LOADED = EVENT_LAZYLOAD_LOADED;
 exports.EVENT_MOUNTED = EVENT_MOUNTED;
 exports.EVENT_MOVE = EVENT_MOVE;

dist/js/splide.esm.js

@@ -437,13 +437,14 @@ const EVENT_AUTOPLAY_PLAY = "autoplay:play";
 const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
 const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
 const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
-const EVENT_SLIDE_KEYDOWN = "sk";
-const EVENT_SHIFTED = "sh";
-const EVENT_END_INDEX_CHANGED = "ei";
+const EVENT_LAZYLOAD_ERROR = "lazyload:error";
+const EVENT_SLIDE_KEYDOWN = "_sk";
+const EVENT_SHIFTED = "_sh";
+const EVENT_END_INDEX_CHANGED = "_ei";
 
 const NOT_OVERFLOW_KEY = "!overflow";
-function Breakpoints(Splide2, Components2, options, event) {
-  const { state } = Splide2;
+const Breakpoints = (Splide, Components, options, event) => {
+  const { state } = Splide;
   const breakpoints = options.breakpoints || {};
   const reducedMotion = options.reducedMotion || {};
   const binder = EventBinder();
@@ -456,7 +457,7 @@ function Breakpoints(Splide2, Components2, options, event) {
       }
     });
     if (breakpoints[NOT_OVERFLOW_KEY]) {
-      entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components2.Layout && !Components2.Layout.isOverflow()]);
+      entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components.Layout && !Components.Layout.isOverflow()]);
       event.on(EVENT_OVERFLOW, update);
     }
     register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
@@ -481,12 +482,12 @@ function Breakpoints(Splide2, Components2, options, event) {
     omit(options);
     set(merged, false, !state.is(CREATED));
     if (options.destroy) {
-      Splide2.destroy(options.destroy === "completely");
+      Splide.destroy(options.destroy === "completely");
     } else if (destroyed) {
       destroy(true);
-      Splide2.mount();
+      Splide.mount();
     } else {
-      direction !== options.direction && Splide2.refresh();
+      direction !== options.direction && Splide.refresh();
     }
   }
   function reduce(enable) {
@@ -498,7 +499,7 @@ function Breakpoints(Splide2, Components2, options, event) {
     merge(options, opts);
     base && merge(Object.getPrototypeOf(options), opts);
     if (notify) {
-      Splide2.emit(EVENT_UPDATED, options);
+      Splide.emit(EVENT_UPDATED, options);
     }
   }
   return {
@@ -507,7 +508,7 @@ function Breakpoints(Splide2, Components2, options, event) {
     reduce,
     set
   };
-}
+};
 
 const ARROW = "Arrow";
 const ARROW_LEFT = `${ARROW}Left`;
@@ -529,7 +530,7 @@ const ORIENTATION_MAP = {
   ArrowLeft: [ARROW_UP, ARROW_RIGHT],
   ArrowRight: [ARROW_DOWN, ARROW_LEFT]
 };
-function Direction(Splide2, Components2, options) {
+const Direction = (Splide2, Components2, options) => {
   function resolve(prop, axisOnly, direction) {
     direction = direction || options.direction;
     const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
@@ -545,7 +546,7 @@ function Direction(Splide2, Components2, options) {
     resolve,
     orient
   };
-}
+};
 
 const ROLE = "role";
 const TAB_INDEX = "tabindex";
@@ -640,9 +641,9 @@ const POINTER_DOWN_EVENTS = "touchstart mousedown";
 const POINTER_MOVE_EVENTS = "touchmove mousemove";
 const POINTER_UP_EVENTS = "touchend touchcancel mouseup click";
 
-function Elements(Splide2, Components2, options, event) {
+const Elements = (Splide, Components, options, event) => {
   const { on, bind } = event;
-  const { root } = Splide2;
+  const { root } = Splide;
   const { i18n } = options;
   const elements = {};
   const slides = [];
@@ -733,13 +734,13 @@ function Elements(Splide2, Components2, options, event) {
     mount,
     destroy
   });
-}
+};
 
 const SLIDE = "slide";
 const LOOP = "loop";
 const FADE = "fade";
 
-function Slide$1(Splide2, index, slideIndex, slide) {
+const Slide$1 = (Splide2, index, slideIndex, slide) => {
   const event = Splide2.event.create();
   const { on, emit, bind } = event;
   const { Components, root, options } = Splide2;
@@ -875,11 +876,11 @@ function Slide$1(Splide2, index, slideIndex, slide) {
     isWithin
   };
   return self;
-}
+};
 
-function Slides(Splide2, Components2, options, event) {
+const Slides = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
-  const { slides, list } = Components2.Elements;
+  const { slides, list } = Components.Elements;
   const Slides2 = [];
   function mount() {
     init();
@@ -903,7 +904,7 @@ function Slides(Splide2, Components2, options, event) {
     });
   }
   function register(slide, index, slideIndex) {
-    const object = Slide$1(Splide2, index, slideIndex, slide);
+    const object = Slide$1(Splide, index, slideIndex, slide);
     object.mount();
     Slides2.push(object);
     Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index);
@@ -912,7 +913,7 @@ function Slides(Splide2, Components2, options, event) {
     return excludeClones ? filter((Slide2) => !Slide2.isClone) : Slides2;
   }
   function getIn(page) {
-    const { Controller } = Components2;
+    const { Controller } = Components;
     const index = Controller.toIndex(page);
     const max = Controller.hasFocus() ? 1 : options.perPage;
     return filter((Slide2) => between(Slide2.index, index, index + max - 1));
@@ -988,13 +989,13 @@ function Slides(Splide2, Components2, options, event) {
     getLength,
     isEnough
   };
-}
+};
 
-function Layout(Splide2, Components2, options, event) {
+const Layout = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const { Slides } = Components2;
-  const { resolve } = Components2.Direction;
-  const { root, track, list } = Components2.Elements;
+  const { Slides } = Components;
+  const { resolve } = Components.Direction;
+  const { root, track, list } = Components.Elements;
   const { getAt, style: styleSlides } = Slides;
   let vertical;
   let rootRect;
@@ -1066,7 +1067,7 @@ function Layout(Splide2, Components2, options, event) {
     return Slide ? Slide.pos() + Slide.size() + (withoutGap ? 0 : getGap()) : 0;
   }
   function sliderSize(withoutGap) {
-    return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
+    return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap);
   }
   function getGap() {
     const first = getAt(0);
@@ -1080,7 +1081,7 @@ function Layout(Splide2, Components2, options, event) {
     )) || 0;
   }
   function isOverflow() {
-    return Splide2.is(FADE) || sliderSize(true) > listSize();
+    return Splide.is(FADE) || sliderSize(true) > listSize();
   }
   return {
     mount,
@@ -1092,13 +1093,13 @@ function Layout(Splide2, Components2, options, event) {
     getPadding,
     isOverflow
   };
-}
+};
 
 const MULTIPLIER = 2;
-function Clones(Splide2, Components2, options, event) {
+const Clones = (Splide, Components, options, event) => {
   const { on } = event;
-  const { Elements, Slides, Layout: { resize } } = Components2;
-  const { resolve } = Components2.Direction;
+  const { Elements, Slides, Layout: { resize } } = Components;
+  const { resolve } = Components.Direction;
   const clones = [];
   let cloneCount;
   function mount() {
@@ -1123,7 +1124,7 @@ function Clones(Splide2, Components2, options, event) {
     const count = computeCloneCount();
     if (cloneCount !== count) {
       if (cloneCount < count || !count) {
-        !count && Splide2.go(0);
+        !count && Splide.go(0);
         event.emit(EVENT_REFRESH);
       }
     }
@@ -1147,17 +1148,17 @@ function Clones(Splide2, Components2, options, event) {
   function cloneDeep(elm, index) {
     const clone = elm.cloneNode(true);
     addClass(clone, options.classes.clone);
-    clone.id = `${Splide2.root.id}-clone${pad(index + 1)}`;
+    clone.id = `${Splide.root.id}-clone${pad(index + 1)}`;
     return clone;
   }
   function computeCloneCount() {
     let { clones: clones2 } = options;
-    if (!Splide2.is(LOOP)) {
+    if (!Splide.is(LOOP)) {
       clones2 = 0;
     } else if (isUndefined(clones2)) {
-      const fixedSize = options[resolve("fixedWidth")] && Components2.Layout.slideSize(0);
+      const fixedSize = options[resolve("fixedWidth")] && Components.Layout.slideSize(0);
       const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
-      clones2 = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage * MULTIPLIER;
+      clones2 = fixedCount || options[resolve("autoWidth")] && Splide.length || options.perPage * MULTIPLIER;
     }
     return clones2;
   }
@@ -1165,25 +1166,25 @@ function Clones(Splide2, Components2, options, event) {
     mount,
     destroy
   };
-}
+};
 
-function Move(Splide2, Components2, options, event) {
+const Move = (Splide, Components, options, event) => {
   const { on, emit } = event;
-  const { set } = Splide2.state;
-  const { Slides } = Components2;
-  const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components2.Layout;
-  const { resolve, orient } = Components2.Direction;
-  const { list, track } = Components2.Elements;
+  const { set } = Splide.state;
+  const { Slides } = Components;
+  const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components.Layout;
+  const { resolve, orient } = Components.Direction;
+  const { list, track } = Components.Elements;
   let Transition;
   function mount() {
-    Transition = Components2.Transition;
+    Transition = Components.Transition;
     on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
   }
   function reposition() {
-    if (!Components2.Controller.isBusy()) {
-      Components2.Scroll.cancel();
-      jump(Splide2.index);
-      Components2.Slides.update();
+    if (!Components.Controller.isBusy()) {
+      Components.Scroll.cancel();
+      jump(Splide.index);
+      Components.Slides.update();
     }
   }
   function move(dest, index, prev, callback) {
@@ -1203,16 +1204,16 @@ function Move(Splide2, Components2, options, event) {
     translate(toPosition(index, true));
   }
   function translate(position, preventLoop) {
-    if (!Splide2.is(FADE)) {
+    if (!Splide.is(FADE)) {
       const destination = preventLoop ? position : loop(position);
       style(list, "transform", `translate${resolve("X")}(${destination}px)`);
       position !== destination && emit(EVENT_SHIFTED);
     }
   }
   function loop(position) {
-    if (Splide2.is(LOOP)) {
+    if (Splide.is(LOOP)) {
       const index = toIndex(position);
-      const exceededMax = index > Components2.Controller.getEnd();
+      const exceededMax = index > Components.Controller.getEnd();
       const exceededMin = index < 0;
       if (exceededMin || exceededMax) {
         position = shift(position, exceededMax);
@@ -1255,7 +1256,7 @@ function Move(Splide2, Components2, options, event) {
     return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
   }
   function trim(position) {
-    if (options.trimSpace && Splide2.is(SLIDE)) {
+    if (options.trimSpace && Splide.is(SLIDE)) {
       position = clamp(position, 0, orient(sliderSize(true) - listSize()));
     }
     return position;
@@ -1265,7 +1266,7 @@ function Move(Splide2, Components2, options, event) {
     return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
   }
   function getLimit(max) {
-    return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
+    return toPosition(max ? Components.Controller.getEnd() : 0, !!options.trimSpace);
   }
   function canShift(backwards) {
     const padding = getPadding(false);
@@ -1291,16 +1292,16 @@ function Move(Splide2, Components2, options, event) {
     exceededLimit,
     reposition
   };
-}
+};
 
-function Controller(Splide2, Components2, options, event) {
+const Controller = (Splide, Components, options, event) => {
   const { on, emit } = event;
-  const { Move } = Components2;
+  const { Move } = Components;
   const { getPosition, getLimit, toPosition } = Move;
-  const { isEnough, getLength } = Components2.Slides;
+  const { isEnough, getLength } = Components.Slides;
   const { omitEnd } = options;
-  const isLoop = Splide2.is(LOOP);
-  const isSlide = Splide2.is(SLIDE);
+  const isLoop = Splide.is(LOOP);
+  const isSlide = Splide.is(SLIDE);
   const getNext = apply(getAdjacent, false);
   const getPrev = apply(getAdjacent, true);
   let currIndex = options.start || 0;
@@ -1343,14 +1344,14 @@ function Controller(Splide2, Components2, options, event) {
     }
   }
   function jump(control) {
-    const { set } = Components2.Breakpoints;
+    const { set } = Components.Breakpoints;
     const { speed } = options;
     set({ speed: 0 });
     go(control);
     set({ speed });
   }
   function scroll(destination, duration, snap, callback) {
-    Components2.Scroll.scroll(destination, duration, snap, () => {
+    Components.Scroll.scroll(destination, duration, snap, () => {
       const index = loop(Move.toIndex(getPosition()));
       setIndex(omitEnd ? min(index, endIndex) : index);
       callback && callback();
@@ -1415,7 +1416,7 @@ function Controller(Splide2, Components2, options, event) {
   function computeMovableDestIndex(dest) {
     if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
       const position = getPosition();
-      while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
+      while (position === toPosition(dest, true) && between(dest, 0, Splide.length - 1, !options.rewind)) {
         dest < currIndex ? --dest : ++dest;
       }
     }
@@ -1457,7 +1458,7 @@ function Controller(Splide2, Components2, options, event) {
     return !isUndefined(options.focus) || options.isNavigation;
   }
   function isBusy() {
-    return Splide2.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
+    return Splide.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
   }
   return {
     mount,
@@ -1476,16 +1477,16 @@ function Controller(Splide2, Components2, options, event) {
     hasFocus,
     isBusy
   };
-}
+};
 
 const XML_NAME_SPACE = "http://www.w3.org/2000/svg";
 const PATH = "m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z";
 const SIZE = 40;
 
-function Arrows(Splide2, Components2, options, event) {
+const Arrows = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
   const { classes, i18n } = options;
-  const { Elements, Controller } = Components2;
+  const { Elements, Controller } = Components;
   const { arrows: placeholder, track } = Elements;
   let wrapper = placeholder;
   let prev = Elements.prev;
@@ -1550,7 +1551,7 @@ function Arrows(Splide2, Components2, options, event) {
   }
   function update() {
     if (prev && next) {
-      const index = Splide2.index;
+      const index = Splide.index;
       const prevIndex = Controller.getPrev();
       const nextIndex = Controller.getNext();
       const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
@@ -1568,15 +1569,15 @@ function Arrows(Splide2, Components2, options, event) {
     destroy,
     update
   };
-}
+};
 
 const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
-function Autoplay(Splide2, Components2, options, event) {
+const Autoplay = (Splide, Components, options, event) => {
   const { on, bind, emit } = event;
-  const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
+  const interval = RequestInterval(options.interval, Splide.go.bind(Splide, ">"), onAnimationFrame);
   const { isPaused } = interval;
-  const { Elements, Elements: { root, toggle } } = Components2;
+  const { Elements, Elements: { root, toggle } } = Components;
   const { autoplay } = options;
   let hovered;
   let focused;
@@ -1611,7 +1612,7 @@ function Autoplay(Splide2, Components2, options, event) {
     on(EVENT_MOVE, onMove);
   }
   function play() {
-    if (isPaused() && Components2.Slides.isEnough()) {
+    if (isPaused() && Components.Slides.isEnough()) {
       interval.start(!options.resetProgress);
       focused = hovered = stopped = false;
       update();
@@ -1643,7 +1644,7 @@ function Autoplay(Splide2, Components2, options, event) {
     emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
   function onMove(index) {
-    const Slide = Components2.Slides.getAt(index);
+    const Slide = Components.Slides.getAt(index);
     interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
   }
   return {
@@ -1653,7 +1654,7 @@ function Autoplay(Splide2, Components2, options, event) {
     pause,
     isPaused
   };
-}
+};
 
 const BOUNCE_DIFF_THRESHOLD = 10;
 const BOUNCE_DURATION = 600;
@@ -1661,12 +1662,12 @@ const FRICTION_FACTOR = 0.6;
 const BASE_VELOCITY = 1.5;
 const MIN_DURATION = 800;
 
-function Scroll(Splide2, Components2, options, event) {
+const Scroll = (Splide, Components, options, event) => {
   const { on, emit } = event;
-  const { state: { set } } = Splide2;
-  const { Move } = Components2;
+  const { state: { set } } = Splide;
+  const { Move } = Components;
   const { getPosition, getLimit, exceededLimit, translate } = Move;
-  const isSlide = Splide2.is(SLIDE);
+  const isSlide = Splide.is(SLIDE);
   let interval;
   let callback;
   let friction = 1;
@@ -1678,9 +1679,9 @@ function Scroll(Splide2, Components2, options, event) {
     const from = getPosition();
     clear();
     if (snap && (!isSlide || !exceededLimit())) {
-      const size = Components2.Layout.sliderSize();
+      const size = Components.Layout.sliderSize();
       const offset = sign(destination) * size * floor(abs(destination) / size) || 0;
-      destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;
+      destination = Move.toPosition(Components.Controller.toDest(destination % size)) + offset;
     }
     const immediately = approximatelyEqual(from, destination, 1) || duration === 0;
     friction = 1;
@@ -1729,16 +1730,16 @@ function Scroll(Splide2, Components2, options, event) {
     scroll,
     cancel
   };
-}
+};
 
 const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };
 
-function Drag(Splide2, Components2, options, event) {
+const Drag = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
   const binder = event.create();
-  const { state } = Splide2;
-  const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components2;
-  const { resolve, orient } = Components2.Direction;
+  const { state } = Splide;
+  const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components;
+  const { resolve, orient } = Components.Direction;
   const { getPosition, exceededLimit } = Move;
   let basePosition;
   let baseEvent;
@@ -1833,9 +1834,9 @@ function Drag(Splide2, Components2, options, event) {
     reduce(false);
     if (isFree) {
       Controller.scroll(destination, 0, options.snap);
-    } else if (Splide2.is(FADE)) {
+    } else if (Splide.is(FADE)) {
       Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
-    } else if (Splide2.is(SLIDE) && exceeded && rewind) {
+    } else if (Splide.is(SLIDE) && exceeded && rewind) {
       Controller.go(exceededLimit(true) ? ">" : "<");
     } else {
       Controller.go(Controller.toDest(destination), true);
@@ -1853,7 +1854,7 @@ function Drag(Splide2, Components2, options, event) {
     return abs(diffCoord(e)) > abs(diffCoord(e, true));
   }
   function computeVelocity(e) {
-    if (Splide2.is(LOOP) || !exceeded) {
+    if (Splide.is(LOOP) || !exceeded) {
       const time = diffTime(e);
       if (time && time < LOG_INTERVAL) {
         return diffCoord(e) / time;
@@ -1864,7 +1865,7 @@ function Drag(Splide2, Components2, options, event) {
   function computeDestination(velocity) {
     return getPosition() + sign(velocity) * min(
       abs(velocity) * (options.flickPower || 600),
-      isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1)
+      isFree ? Infinity : Components.Layout.listSize() * (options.flickMaxPages || 1)
     );
   }
   function diffCoord(e, orthogonal) {
@@ -1880,7 +1881,7 @@ function Drag(Splide2, Components2, options, event) {
     return (isTouchEvent(e) ? e.changedTouches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
   }
   function constrain(diff) {
-    return diff / (exceeded && Splide2.is(SLIDE) ? FRICTION : 1);
+    return diff / (exceeded && Splide.is(SLIDE) ? FRICTION : 1);
   }
   function isDraggable(target2) {
     const { noDrag } = options;
@@ -1900,13 +1901,13 @@ function Drag(Splide2, Components2, options, event) {
     disable,
     isDragging
   };
-}
+};
 
 const KEYBOARD_EVENT = "keydown";
-function Keyboard(Splide2, Components2, options, event) {
+const Keyboard = (Splide, Components, options, event) => {
   const { on, bind, destroy } = event;
-  const { root } = Splide2;
-  const { resolve } = Components2.Direction;
+  const { root } = Splide;
+  const { resolve } = Components.Direction;
   let target;
   let disabled;
   function mount() {
@@ -1935,9 +1936,9 @@ function Keyboard(Splide2, Components2, options, event) {
   function onKeydown(e) {
     if (!disabled) {
       if (e.key === resolve(ARROW_LEFT)) {
-        Splide2.go("<");
+        Splide.go("<");
       } else if (e.key === resolve(ARROW_RIGHT)) {
-        Splide2.go(">");
+        Splide.go(">");
       }
     }
   }
@@ -1946,13 +1947,13 @@ function Keyboard(Splide2, Components2, options, event) {
     destroy,
     disable
   };
-}
+};
 
 const SRC_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-lazy`;
 const SRCSET_DATA_ATTRIBUTE = `${SRC_DATA_ATTRIBUTE}-srcset`;
 const IMAGE_SELECTOR = `[${SRC_DATA_ATTRIBUTE}], [${SRCSET_DATA_ATTRIBUTE}]`;
 
-function LazyLoad(Splide2, Components2, options, event) {
+const LazyLoad = (Splide, Components, options, event) => {
   const { on, off, bind, emit } = event;
   const isSequential = options.lazyLoad === "sequential";
   const events = [EVENT_MOVED, EVENT_SCROLLED];
@@ -1975,7 +1976,7 @@ function LazyLoad(Splide2, Components2, options, event) {
     }
   }
   function register() {
-    Components2.Slides.forEach((Slide) => {
+    Components.Slides.forEach((Slide) => {
       queryAll(Slide.slide, IMAGE_SELECTOR).forEach((img) => {
         const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
         const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
@@ -1992,7 +1993,7 @@ function LazyLoad(Splide2, Components2, options, event) {
   function check() {
     entries = entries.filter((data) => {
       const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
-      return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
+      return data[1].isWithin(Splide.index, distance) ? load(data) : true;
     });
     entries.length || off(events);
   }
@@ -2013,6 +2014,8 @@ function LazyLoad(Splide2, Components2, options, event) {
       display(img, "");
       emit(EVENT_LAZYLOAD_LOADED, img, Slide);
       emit(EVENT_RESIZE);
+    } else {
+      emit(EVENT_LAZYLOAD_ERROR, img, Slide);
     }
     isSequential && loadNext();
   }
@@ -2024,13 +2027,13 @@ function LazyLoad(Splide2, Components2, options, event) {
     destroy: apply(empty, entries),
     check
   };
-}
+};
 
-function Pagination(Splide2, Components2, options, event) {
+const Pagination = (Splide, Components, options, event) => {
   const { on, emit, bind } = event;
-  const { Slides, Elements, Controller } = Components2;
+  const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
-  const { resolve } = Components2.Direction;
+  const { resolve } = Components.Direction;
   const { pagination: placeholder } = Elements;
   const items = [];
   let list;
@@ -2044,7 +2047,7 @@ function Pagination(Splide2, Components2, options, event) {
       on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
       createPagination();
       update();
-      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide2.index));
+      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide.index));
     }
   }
   function destroy() {
@@ -2057,7 +2060,7 @@ function Pagination(Splide2, Components2, options, event) {
     event.destroy();
   }
   function createPagination() {
-    const { length } = Splide2;
+    const { length } = Splide;
     const { classes, i18n, perPage } = options;
     const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
     list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
@@ -2136,10 +2139,10 @@ function Pagination(Splide2, Components2, options, event) {
     getAt,
     update
   };
-}
+};
 
 const TRIGGER_KEYS = [" ", "Enter"];
-function Sync(Splide2, Components2, options, event) {
+const Sync = (Splide2, Components, options, event) => {
   const { isNavigation, slideFocus } = options;
   const events = [];
   function mount() {
@@ -2181,7 +2184,7 @@ function Sync(Splide2, Components2, options, event) {
   }
   function update() {
     setAttribute(
-      Components2.Elements.list,
+      Components.Elements.list,
       ARIA_ORIENTATION,
       options.direction === TTB ? "vertical" : ""
     );
@@ -2197,7 +2200,7 @@ function Sync(Splide2, Components2, options, event) {
   }
   return {
     setup: apply(
-      Components2.Breakpoints.set,
+      Components.Breakpoints.set,
       { slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus },
       true
     ),
@@ -2205,13 +2208,13 @@ function Sync(Splide2, Components2, options, event) {
     destroy,
     remount
   };
-}
+};
 
-function Wheel(Splide2, Components2, options, event) {
+const Wheel = (Splide, Components, options, event) => {
   let lastTime = 0;
   function mount() {
     if (options.wheel) {
-      event.bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
+      event.bind(Components.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
     }
   }
   function onWheel(e) {
@@ -2222,32 +2225,32 @@ function Wheel(Splide2, Components2, options, event) {
       const min = options.wheelMinThreshold || 0;
       const sleep = options.wheelSleep || 0;
       if (abs(deltaY) > min && timeStamp - lastTime > sleep) {
-        Splide2.go(backwards ? "<" : ">");
+        Splide.go(backwards ? "<" : ">");
         lastTime = timeStamp;
       }
       shouldPrevent(backwards) && prevent(e);
     }
   }
   function shouldPrevent(backwards) {
-    return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+    return !options.releaseWheel || Splide.state.is(MOVING) || Components.Controller.getAdjacent(backwards) !== -1;
   }
   return {
     mount
   };
-}
+};
 
 const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;
 
 const SR_REMOVAL_DELAY = 90;
-function Live(Splide2, Components2, options, event) {
+const Live = (Splide, Components, options, event) => {
   const { on } = event;
-  const { track } = Components2.Elements;
+  const { track } = Components.Elements;
   const enabled = options.live && !options.isNavigation;
   const sr = create("span", CLASS_SR);
   const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
   function mount() {
     if (enabled) {
-      disable(!Components2.Autoplay.isPaused());
+      disable(!Components.Autoplay.isPaused());
       setAttribute(track, ARIA_ATOMIC, true);
       sr.textContent = "\u2026";
       sr.style.cssText = VISUALLY_HIDDEN;
@@ -2280,7 +2283,7 @@ function Live(Splide2, Components2, options, event) {
     disable,
     destroy
   };
-}
+};
 
 const COMPONENTS = {
   Breakpoints,
@@ -2346,8 +2349,8 @@ const DEFAULTS = {
   }
 };
 
-function Fade(Splide2, Components2, options, event) {
-  const { Slides } = Components2;
+const Fade = (Splide, Components, options, event) => {
+  const { Slides } = Components;
   function mount() {
     event.on([EVENT_MOUNTED, EVENT_REFRESH], init);
   }
@@ -2365,11 +2368,11 @@ function Fade(Splide2, Components2, options, event) {
     start,
     cancel: noop
   };
-}
+};
 
-function Slide(Splide2, Components2, options, event) {
-  const { Move, Controller, Scroll } = Components2;
-  const { list } = Components2.Elements;
+const Slide = (Splide, Components, options, event) => {
+  const { Move, Controller, Scroll } = Components;
+  const { list } = Components.Elements;
   const transition = apply(style, list, "transition");
   let endCallback;
   function mount() {
@@ -2403,7 +2406,7 @@ function Slide(Splide2, Components2, options, event) {
   }
   function getSpeed(index) {
     const { rewindSpeed } = options;
-    if (Splide2.is(SLIDE) && rewindSpeed) {
+    if (Splide.is(SLIDE) && rewindSpeed) {
       const prev = Controller.getIndex(true);
       const end = Controller.getEnd();
       if (prev === 0 && index >= end || prev >= end && index === 0) {
@@ -2417,7 +2420,7 @@ function Slide(Splide2, Components2, options, event) {
     start,
     cancel
   };
-}
+};
 
 class Splide {
   static defaults = {};
@@ -2914,4 +2917,4 @@ class SplideRenderer {
   }
 }
 
-export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_OVERFLOW, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, DEFAULTS, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, FADE, LOOP, LTR, RTL, SLIDE, STATUS_CLASSES, Splide, SplideRenderer, TTB, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_OVERFLOW, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, DEFAULTS, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_ERROR, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, FADE, LOOP, LTR, RTL, SLIDE, STATUS_CLASSES, Splide, SplideRenderer, TTB, Splide as default };

dist/js/splide.js

@@ -440,13 +440,14 @@
   const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
   const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
   const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
-  const EVENT_SLIDE_KEYDOWN = "sk";
-  const EVENT_SHIFTED = "sh";
-  const EVENT_END_INDEX_CHANGED = "ei";
+  const EVENT_LAZYLOAD_ERROR = "lazyload:error";
+  const EVENT_SLIDE_KEYDOWN = "_sk";
+  const EVENT_SHIFTED = "_sh";
+  const EVENT_END_INDEX_CHANGED = "_ei";
 
   const NOT_OVERFLOW_KEY = "!overflow";
-  function Breakpoints(Splide2, Components2, options, event) {
-    const { state } = Splide2;
+  const Breakpoints = (Splide, Components, options, event) => {
+    const { state } = Splide;
     const breakpoints = options.breakpoints || {};
     const reducedMotion = options.reducedMotion || {};
     const binder = EventBinder();
@@ -459,7 +460,7 @@
         }
       });
       if (breakpoints[NOT_OVERFLOW_KEY]) {
-        entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components2.Layout && !Components2.Layout.isOverflow()]);
+        entries.push([breakpoints[NOT_OVERFLOW_KEY], () => Components.Layout && !Components.Layout.isOverflow()]);
         event.on(EVENT_OVERFLOW, update);
       }
       register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);
@@ -484,12 +485,12 @@
       omit(options);
       set(merged, false, !state.is(CREATED));
       if (options.destroy) {
-        Splide2.destroy(options.destroy === "completely");
+        Splide.destroy(options.destroy === "completely");
       } else if (destroyed) {
         destroy(true);
-        Splide2.mount();
+        Splide.mount();
       } else {
-        direction !== options.direction && Splide2.refresh();
+        direction !== options.direction && Splide.refresh();
       }
     }
     function reduce(enable) {
@@ -501,7 +502,7 @@
       merge(options, opts);
       base && merge(Object.getPrototypeOf(options), opts);
       if (notify) {
-        Splide2.emit(EVENT_UPDATED, options);
+        Splide.emit(EVENT_UPDATED, options);
       }
     }
     return {
@@ -510,7 +511,7 @@
       reduce,
       set
     };
-  }
+  };
 
   const ARROW = "Arrow";
   const ARROW_LEFT = `${ARROW}Left`;
@@ -531,7 +532,7 @@
     ArrowLeft: [ARROW_UP, ARROW_RIGHT],
     ArrowRight: [ARROW_DOWN, ARROW_LEFT]
   };
-  function Direction(Splide2, Components2, options) {
+  const Direction = (Splide2, Components2, options) => {
     function resolve(prop, axisOnly, direction) {
       direction = direction || options.direction;
       const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
@@ -547,7 +548,7 @@
       resolve,
       orient
     };
-  }
+  };
 
   const ROLE = "role";
   const TAB_INDEX = "tabindex";
@@ -640,9 +641,9 @@
   const POINTER_MOVE_EVENTS = "touchmove mousemove";
   const POINTER_UP_EVENTS = "touchend touchcancel mouseup click";
 
-  function Elements(Splide2, Components2, options, event) {
+  const Elements = (Splide, Components, options, event) => {
     const { on, bind } = event;
-    const { root } = Splide2;
+    const { root } = Splide;
     const { i18n } = options;
     const elements = {};
     const slides = [];
@@ -733,13 +734,13 @@
       mount,
       destroy
     });
-  }
+  };
 
   const SLIDE = "slide";
   const LOOP = "loop";
   const FADE = "fade";
 
-  function Slide$1(Splide2, index, slideIndex, slide) {
+  const Slide$1 = (Splide2, index, slideIndex, slide) => {
     const event = Splide2.event.create();
     const { on, emit, bind } = event;
     const { Components, root, options } = Splide2;
@@ -875,11 +876,11 @@
       isWithin
     };
     return self;
-  }
+  };
 
-  function Slides(Splide2, Components2, options, event) {
+  const Slides = (Splide, Components, options, event) => {
     const { on, emit, bind } = event;
-    const { slides, list } = Components2.Elements;
+    const { slides, list } = Components.Elements;
     const Slides2 = [];
     function mount() {
       init();
@@ -903,7 +904,7 @@
       });
     }
     function register(slide, index, slideIndex) {
-      const object = Slide$1(Splide2, index, slideIndex, slide);
+      const object = Slide$1(Splide, index, slideIndex, slide);
       object.mount();
       Slides2.push(object);
       Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index);
@@ -912,7 +913,7 @@
       return excludeClones ? filter((Slide2) => !Slide2.isClone) : Slides2;
     }
     function getIn(page) {
-      const { Controller } = Components2;
+      const { Controller } = Components;
       const index = Controller.toIndex(page);
       const max = Controller.hasFocus() ? 1 : options.perPage;
       return filter((Slide2) => between(Slide2.index, index, index + max - 1));
@@ -988,13 +989,13 @@
       getLength,
       isEnough
     };
-  }
+  };
 
-  function Layout(Splide2, Components2, options, event) {
+  const Layout = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
-    const { Slides } = Components2;
-    const { resolve } = Components2.Direction;
-    const { root, track, list } = Components2.Elements;
+    const { Slides } = Components;
+    const { resolve } = Components.Direction;
+    const { root, track, list } = Components.Elements;
     const { getAt, style: styleSlides } = Slides;
     let vertical;
     let rootRect;
@@ -1066,7 +1067,7 @@
       return Slide ? Slide.pos() + Slide.size() + (withoutGap ? 0 : getGap()) : 0;
     }
     function sliderSize(withoutGap) {
-      return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);
+      return totalSize(Splide.length - 1) - totalSize(0) + slideSize(0, withoutGap);
     }
     function getGap() {
       const first = getAt(0);
@@ -1080,7 +1081,7 @@
       )) || 0;
     }
     function isOverflow() {
-      return Splide2.is(FADE) || sliderSize(true) > listSize();
+      return Splide.is(FADE) || sliderSize(true) > listSize();
     }
     return {
       mount,
@@ -1092,13 +1093,13 @@
       getPadding,
       isOverflow
     };
-  }
+  };
 
   const MULTIPLIER = 2;
-  function Clones(Splide2, Components2, options, event) {
+  const Clones = (Splide, Components, options, event) => {
     const { on } = event;
-    const { Elements, Slides, Layout: { resize } } = Components2;
-    const { resolve } = Components2.Direction;
+    const { Elements, Slides, Layout: { resize } } = Components;
+    const { resolve } = Components.Direction;
     const clones = [];
     let cloneCount;
     function mount() {
@@ -1123,7 +1124,7 @@
       const count = computeCloneCount();
       if (cloneCount !== count) {
         if (cloneCount < count || !count) {
-          !count && Splide2.go(0);
+          !count && Splide.go(0);
           event.emit(EVENT_REFRESH);
         }
       }
@@ -1147,17 +1148,17 @@
     function cloneDeep(elm, index) {
       const clone = elm.cloneNode(true);
       addClass(clone, options.classes.clone);
-      clone.id = `${Splide2.root.id}-clone${pad(index + 1)}`;
+      clone.id = `${Splide.root.id}-clone${pad(index + 1)}`;
       return clone;
     }
     function computeCloneCount() {
       let { clones: clones2 } = options;
-      if (!Splide2.is(LOOP)) {
+      if (!Splide.is(LOOP)) {
         clones2 = 0;
       } else if (isUndefined(clones2)) {
-        const fixedSize = options[resolve("fixedWidth")] && Components2.Layout.slideSize(0);
+        const fixedSize = options[resolve("fixedWidth")] && Components.Layout.slideSize(0);
         const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
-        clones2 = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage * MULTIPLIER;
+        clones2 = fixedCount || options[resolve("autoWidth")] && Splide.length || options.perPage * MULTIPLIER;
       }
       return clones2;
     }
@@ -1165,25 +1166,25 @@
       mount,
       destroy
     };
-  }
+  };
 
-  function Move(Splide2, Components2, options, event) {
+  const Move = (Splide, Components, options, event) => {
     const { on, emit } = event;
-    const { set } = Splide2.state;
-    const { Slides } = Components2;
-    const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components2.Layout;
-    const { resolve, orient } = Components2.Direction;
-    const { list, track } = Components2.Elements;
+    const { set } = Splide.state;
+    const { Slides } = Components;
+    const { slideSize, getPadding, listSize, sliderSize, totalSize } = Components.Layout;
+    const { resolve, orient } = Components.Direction;
+    const { list, track } = Components.Elements;
     let Transition;
     function mount() {
-      Transition = Components2.Transition;
+      Transition = Components.Transition;
       on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
     }
     function reposition() {
-      if (!Components2.Controller.isBusy()) {
-        Components2.Scroll.cancel();
-        jump(Splide2.index);
-        Components2.Slides.update();
+      if (!Components.Controller.isBusy()) {
+        Components.Scroll.cancel();
+        jump(Splide.index);
+        Components.Slides.update();
       }
     }
     function move(dest, index, prev, callback) {
@@ -1203,16 +1204,16 @@
       translate(toPosition(index, true));
     }
     function translate(position, preventLoop) {
-      if (!Splide2.is(FADE)) {
+      if (!Splide.is(FADE)) {
         const destination = preventLoop ? position : loop(position);
         style(list, "transform", `translate${resolve("X")}(${destination}px)`);
         position !== destination && emit(EVENT_SHIFTED);
       }
     }
     function loop(position) {
-      if (Splide2.is(LOOP)) {
+      if (Splide.is(LOOP)) {
         const index = toIndex(position);
-        const exceededMax = index > Components2.Controller.getEnd();
+        const exceededMax = index > Components.Controller.getEnd();
         const exceededMin = index < 0;
         if (exceededMin || exceededMax) {
           position = shift(position, exceededMax);
@@ -1255,7 +1256,7 @@
       return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
     }
     function trim(position) {
-      if (options.trimSpace && Splide2.is(SLIDE)) {
+      if (options.trimSpace && Splide.is(SLIDE)) {
         position = clamp(position, 0, orient(sliderSize(true) - listSize()));
       }
       return position;
@@ -1265,7 +1266,7 @@
       return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
     }
     function getLimit(max) {
-      return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
+      return toPosition(max ? Components.Controller.getEnd() : 0, !!options.trimSpace);
     }
     function canShift(backwards) {
       const padding = getPadding(false);
@@ -1291,16 +1292,16 @@
       exceededLimit,
       reposition
     };
-  }
+  };
 
-  function Controller(Splide2, Components2, options, event) {
+  const Controller = (Splide, Components, options, event) => {
     const { on, emit } = event;
-    const { Move } = Components2;
+    const { Move } = Components;
     const { getPosition, getLimit, toPosition } = Move;
-    const { isEnough, getLength } = Components2.Slides;
+    const { isEnough, getLength } = Components.Slides;
     const { omitEnd } = options;
-    const isLoop = Splide2.is(LOOP);
-    const isSlide = Splide2.is(SLIDE);
+    const isLoop = Splide.is(LOOP);
+    const isSlide = Splide.is(SLIDE);
     const getNext = apply(getAdjacent, false);
     const getPrev = apply(getAdjacent, true);
     let currIndex = options.start || 0;
@@ -1343,14 +1344,14 @@
       }
     }
     function jump(control) {
-      const { set } = Components2.Breakpoints;
+      const { set } = Components.Breakpoints;
       const { speed } = options;
       set({ speed: 0 });
       go(control);
       set({ speed });
     }
     function scroll(destination, duration, snap, callback) {
-      Components2.Scroll.scroll(destination, duration, snap, () => {
+      Components.Scroll.scroll(destination, duration, snap, () => {
         const index = loop(Move.toIndex(getPosition()));
         setIndex(omitEnd ? min(index, endIndex) : index);
         callback && callback();
@@ -1415,7 +1416,7 @@
     function computeMovableDestIndex(dest) {
       if (isSlide && options.trimSpace === "move" && dest !== currIndex) {
         const position = getPosition();
-        while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {
+        while (position === toPosition(dest, true) && between(dest, 0, Splide.length - 1, !options.rewind)) {
           dest < currIndex ? --dest : ++dest;
         }
       }
@@ -1457,7 +1458,7 @@
       return !isUndefined(options.focus) || options.isNavigation;
     }
     function isBusy() {
-      return Splide2.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
+      return Splide.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;
     }
     return {
       mount,
@@ -1476,16 +1477,16 @@
       hasFocus,
       isBusy
     };
-  }
+  };
 
   const XML_NAME_SPACE = "http://www.w3.org/2000/svg";
   const PATH = "m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z";
   const SIZE = 40;
 
-  function Arrows(Splide2, Components2, options, event) {
+  const Arrows = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
     const { classes, i18n } = options;
-    const { Elements, Controller } = Components2;
+    const { Elements, Controller } = Components;
     const { arrows: placeholder, track } = Elements;
     let wrapper = placeholder;
     let prev = Elements.prev;
@@ -1550,7 +1551,7 @@
     }
     function update() {
       if (prev && next) {
-        const index = Splide2.index;
+        const index = Splide.index;
         const prevIndex = Controller.getPrev();
         const nextIndex = Controller.getNext();
         const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
@@ -1568,15 +1569,15 @@
       destroy,
       update
     };
-  }
+  };
 
   const INTERVAL_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-interval`;
 
-  function Autoplay(Splide2, Components2, options, event) {
+  const Autoplay = (Splide, Components, options, event) => {
     const { on, bind, emit } = event;
-    const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), onAnimationFrame);
+    const interval = RequestInterval(options.interval, Splide.go.bind(Splide, ">"), onAnimationFrame);
     const { isPaused } = interval;
-    const { Elements, Elements: { root, toggle } } = Components2;
+    const { Elements, Elements: { root, toggle } } = Components;
     const { autoplay } = options;
     let hovered;
     let focused;
@@ -1611,7 +1612,7 @@
       on(EVENT_MOVE, onMove);
     }
     function play() {
-      if (isPaused() && Components2.Slides.isEnough()) {
+      if (isPaused() && Components.Slides.isEnough()) {
         interval.start(!options.resetProgress);
         focused = hovered = stopped = false;
         update();
@@ -1643,7 +1644,7 @@
       emit(EVENT_AUTOPLAY_PLAYING, rate);
     }
     function onMove(index) {
-      const Slide = Components2.Slides.getAt(index);
+      const Slide = Components.Slides.getAt(index);
       interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);
     }
     return {
@@ -1653,7 +1654,7 @@
       pause,
       isPaused
     };
-  }
+  };
 
   const BOUNCE_DIFF_THRESHOLD = 10;
   const BOUNCE_DURATION = 600;
@@ -1661,12 +1662,12 @@
   const BASE_VELOCITY = 1.5;
   const MIN_DURATION = 800;
 
-  function Scroll(Splide2, Components2, options, event) {
+  const Scroll = (Splide, Components, options, event) => {
     const { on, emit } = event;
-    const { state: { set } } = Splide2;
-    const { Move } = Components2;
+    const { state: { set } } = Splide;
+    const { Move } = Components;
     const { getPosition, getLimit, exceededLimit, translate } = Move;
-    const isSlide = Splide2.is(SLIDE);
+    const isSlide = Splide.is(SLIDE);
     let interval;
     let callback;
     let friction = 1;
@@ -1678,9 +1679,9 @@
       const from = getPosition();
       clear();
       if (snap && (!isSlide || !exceededLimit())) {
-        const size = Components2.Layout.sliderSize();
+        const size = Components.Layout.sliderSize();
         const offset = sign(destination) * size * floor(abs(destination) / size) || 0;
-        destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;
+        destination = Move.toPosition(Components.Controller.toDest(destination % size)) + offset;
       }
       const immediately = approximatelyEqual(from, destination, 1) || duration === 0;
       friction = 1;
@@ -1729,16 +1730,16 @@
       scroll,
       cancel
     };
-  }
+  };
 
   const SCROLL_LISTENER_OPTIONS = { passive: false, capture: true };
 
-  function Drag(Splide2, Components2, options, event) {
+  const Drag = (Splide, Components, options, event) => {
     const { on, emit, bind } = event;
     const binder = event.create();
-    const { state } = Splide2;
-    const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components2;
-    const { resolve, orient } = Components2.Direction;
+    const { state } = Splide;
+    const { Move, Scroll, Controller, Elements: { track }, Breakpoints: { reduce } } = Components;
+    const { resolve, orient } = Components.Direction;
     const { getPosition, exceededLimit } = Move;
     let basePosition;
     let baseEvent;
@@ -1833,9 +1834,9 @@
       reduce(false);
       if (isFree) {
         Controller.scroll(destination, 0, options.snap);
-      } else if (Splide2.is(FADE)) {
+      } else if (Splide.is(FADE)) {
         Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
-      } else if (Splide2.is(SLIDE) && exceeded && rewind) {
+      } else if (Splide.is(SLIDE) && exceeded && rewind) {
         Controller.go(exceededLimit(true) ? ">" : "<");
       } else {
         Controller.go(Controller.toDest(destination), true);
@@ -1853,7 +1854,7 @@
       return abs(diffCoord(e)) > abs(diffCoord(e, true));
     }
     function computeVelocity(e) {
-      if (Splide2.is(LOOP) || !exceeded) {
+      if (Splide.is(LOOP) || !exceeded) {
         const time = diffTime(e);
         if (time && time < LOG_INTERVAL) {
           return diffCoord(e) / time;
@@ -1864,7 +1865,7 @@
     function computeDestination(velocity) {
       return getPosition() + sign(velocity) * min(
         abs(velocity) * (options.flickPower || 600),
-        isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1)
+        isFree ? Infinity : Components.Layout.listSize() * (options.flickMaxPages || 1)
       );
     }
     function diffCoord(e, orthogonal) {
@@ -1880,7 +1881,7 @@
       return (isTouchEvent(e) ? e.changedTouches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
     }
     function constrain(diff) {
-      return diff / (exceeded && Splide2.is(SLIDE) ? FRICTION : 1);
+      return diff / (exceeded && Splide.is(SLIDE) ? FRICTION : 1);
     }
     function isDraggable(target2) {
       const { noDrag } = options;
@@ -1900,13 +1901,13 @@
       disable,
       isDragging
     };
-  }
+  };
 
   const KEYBOARD_EVENT = "keydown";
-  function Keyboard(Splide2, Components2, options, event) {
+  const Keyboard = (Splide, Components, options, event) => {
     const { on, bind, destroy } = event;
-    const { root } = Splide2;
-    const { resolve } = Components2.Direction;
+    const { root } = Splide;
+    const { resolve } = Components.Direction;
     let target;
     let disabled;
     function mount() {
@@ -1935,9 +1936,9 @@
     function onKeydown(e) {
       if (!disabled) {
         if (e.key === resolve(ARROW_LEFT)) {
-          Splide2.go("<");
+          Splide.go("<");
         } else if (e.key === resolve(ARROW_RIGHT)) {
-          Splide2.go(">");
+          Splide.go(">");
         }
       }
     }
@@ -1946,13 +1947,13 @@
       destroy,
       disable
     };
-  }
+  };
 
   const SRC_DATA_ATTRIBUTE = `${DATA_ATTRIBUTE}-lazy`;
   const SRCSET_DATA_ATTRIBUTE = `${SRC_DATA_ATTRIBUTE}-srcset`;
   const IMAGE_SELECTOR = `[${SRC_DATA_ATTRIBUTE}], [${SRCSET_DATA_ATTRIBUTE}]`;
 
-  function LazyLoad(Splide2, Components2, options, event) {
+  const LazyLoad = (Splide, Components, options, event) => {
     const { on, off, bind, emit } = event;
     const isSequential = options.lazyLoad === "sequential";
     const events = [EVENT_MOVED, EVENT_SCROLLED];
@@ -1975,7 +1976,7 @@
       }
     }
     function register() {
-      Components2.Slides.forEach((Slide) => {
+      Components.Slides.forEach((Slide) => {
         queryAll(Slide.slide, IMAGE_SELECTOR).forEach((img) => {
           const src = getAttribute(img, SRC_DATA_ATTRIBUTE);
           const srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
@@ -1992,7 +1993,7 @@
     function check() {
       entries = entries.filter((data) => {
         const distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
-        return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
+        return data[1].isWithin(Splide.index, distance) ? load(data) : true;
       });
       entries.length || off(events);
     }
@@ -2013,6 +2014,8 @@
         display(img, "");
         emit(EVENT_LAZYLOAD_LOADED, img, Slide);
         emit(EVENT_RESIZE);
+      } else {
+        emit(EVENT_LAZYLOAD_ERROR, img, Slide);
       }
       isSequential && loadNext();
     }
@@ -2024,13 +2027,13 @@
       destroy: apply(empty, entries),
       check
     };
-  }
+  };
 
-  function Pagination(Splide2, Components2, options, event) {
+  const Pagination = (Splide, Components, options, event) => {
     const { on, emit, bind } = event;
-    const { Slides, Elements, Controller } = Components2;
+    const { Slides, Elements, Controller } = Components;
     const { hasFocus, getIndex, go } = Controller;
-    const { resolve } = Components2.Direction;
+    const { resolve } = Components.Direction;
     const { pagination: placeholder } = Elements;
     const items = [];
     let list;
@@ -2044,7 +2047,7 @@
         on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);
         createPagination();
         update();
-        emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide2.index));
+        emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide.index));
       }
     }
     function destroy() {
@@ -2057,7 +2060,7 @@
       event.destroy();
     }
     function createPagination() {
-      const { length } = Splide2;
+      const { length } = Splide;
       const { classes, i18n, perPage } = options;
       const max = hasFocus() ? Controller.getEnd() + 1 : ceil(length / perPage);
       list = placeholder || create("ul", classes.pagination, Elements.track.parentElement);
@@ -2136,10 +2139,10 @@
       getAt,
       update
     };
-  }
+  };
 
   const TRIGGER_KEYS = [" ", "Enter"];
-  function Sync(Splide2, Components2, options, event) {
+  const Sync = (Splide2, Components, options, event) => {
     const { isNavigation, slideFocus } = options;
     const events = [];
     function mount() {
@@ -2181,7 +2184,7 @@
     }
     function update() {
       setAttribute(
-        Components2.Elements.list,
+        Components.Elements.list,
         ARIA_ORIENTATION,
         options.direction === TTB ? "vertical" : ""
       );
@@ -2197,7 +2200,7 @@
     }
     return {
       setup: apply(
-        Components2.Breakpoints.set,
+        Components.Breakpoints.set,
         { slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus },
         true
       ),
@@ -2205,13 +2208,13 @@
       destroy,
       remount
     };
-  }
+  };
 
-  function Wheel(Splide2, Components2, options, event) {
+  const Wheel = (Splide, Components, options, event) => {
     let lastTime = 0;
     function mount() {
       if (options.wheel) {
-        event.bind(Components2.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
+        event.bind(Components.Elements.track, "wheel", onWheel, SCROLL_LISTENER_OPTIONS);
       }
     }
     function onWheel(e) {
@@ -2222,32 +2225,32 @@
         const min = options.wheelMinThreshold || 0;
         const sleep = options.wheelSleep || 0;
         if (abs(deltaY) > min && timeStamp - lastTime > sleep) {
-          Splide2.go(backwards ? "<" : ">");
+          Splide.go(backwards ? "<" : ">");
           lastTime = timeStamp;
         }
         shouldPrevent(backwards) && prevent(e);
       }
     }
     function shouldPrevent(backwards) {
-      return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;
+      return !options.releaseWheel || Splide.state.is(MOVING) || Components.Controller.getAdjacent(backwards) !== -1;
     }
     return {
       mount
     };
-  }
+  };
 
   const VISUALLY_HIDDEN = `border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px`;
 
   const SR_REMOVAL_DELAY = 90;
-  function Live(Splide2, Components2, options, event) {
+  const Live = (Splide, Components, options, event) => {
     const { on } = event;
-    const { track } = Components2.Elements;
+    const { track } = Components.Elements;
     const enabled = options.live && !options.isNavigation;
     const sr = create("span", CLASS_SR);
     const interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));
     function mount() {
       if (enabled) {
-        disable(!Components2.Autoplay.isPaused());
+        disable(!Components.Autoplay.isPaused());
         setAttribute(track, ARIA_ATOMIC, true);
         sr.textContent = "\u2026";
         sr.style.cssText = VISUALLY_HIDDEN;
@@ -2280,7 +2283,7 @@
       disable,
       destroy
     };
-  }
+  };
 
   const COMPONENTS = {
     Breakpoints,
@@ -2346,8 +2349,8 @@
     }
   };
 
-  function Fade(Splide2, Components2, options, event) {
-    const { Slides } = Components2;
+  const Fade = (Splide, Components, options, event) => {
+    const { Slides } = Components;
     function mount() {
       event.on([EVENT_MOUNTED, EVENT_REFRESH], init);
     }
@@ -2365,11 +2368,11 @@
       start,
       cancel: noop
     };
-  }
+  };
 
-  function Slide(Splide2, Components2, options, event) {
-    const { Move, Controller, Scroll } = Components2;
-    const { list } = Components2.Elements;
+  const Slide = (Splide, Components, options, event) => {
+    const { Move, Controller, Scroll } = Components;
+    const { list } = Components.Elements;
     const transition = apply(style, list, "transition");
     let endCallback;
     function mount() {
@@ -2403,7 +2406,7 @@
     }
     function getSpeed(index) {
       const { rewindSpeed } = options;
-      if (Splide2.is(SLIDE) && rewindSpeed) {
+      if (Splide.is(SLIDE) && rewindSpeed) {
         const prev = Controller.getIndex(true);
         const end = Controller.getEnd();
         if (prev === 0 && index >= end || prev >= end && index === 0) {
@@ -2417,7 +2420,7 @@
       start,
       cancel
     };
-  }
+  };
 
   class Splide {
     static defaults = {};

dist/types/index.d.ts

@@ -81,8 +81,8 @@ declare function EventBus<M extends Record<string, AnyFunction$1>, K extends key
  *
  * @since 0.0.1
  */
-interface EventInterface<M extends Record<string, AnyFunction$1> = Record<string, AnyFunction$1>> extends Omit<EventBinder, 'create'>, Omit<EventBus<M>, 'create'> {
-    create(): EventInterface<M>;
+interface EventInterface$1<M extends Record<string, AnyFunction$1> = Record<string, AnyFunction$1>> extends Omit<EventBinder, 'create'>, Omit<EventBus<M>, 'create'> {
+    create(): EventInterface$1<M>;
     destroy(): void;
 }
 /**
@@ -97,7 +97,7 @@ interface EventInterface<M extends Record<string, AnyFunction$1> = Record<string
  *
  * @return A collection of interface functions.
  */
-declare function EventInterface<M extends Record<string, AnyFunction$1> = Record<string, AnyFunction$1>>(binder?: EventBinder, bus?: EventBus<Record<string, AnyFunction$1>>): EventInterface<M>;
+declare function EventInterface$1<M extends Record<string, AnyFunction$1> = Record<string, AnyFunction$1>>(binder?: EventBinder, bus?: EventBus<Record<string, AnyFunction$1>>): EventInterface$1<M>;
 
 /**
  * The interface for the State object.
@@ -746,6 +746,89 @@ interface ResponsiveOptions {
     destroy?: boolean | 'completely';
 }
 
+declare const EVENT_MOUNTED = "mounted";
+declare const EVENT_READY = "ready";
+declare const EVENT_MOVE = "move";
+declare const EVENT_MOVED = "moved";
+declare const EVENT_CLICK = "click";
+declare const EVENT_ACTIVE = "active";
+declare const EVENT_INACTIVE = "inactive";
+declare const EVENT_VISIBLE = "visible";
+declare const EVENT_HIDDEN = "hidden";
+declare const EVENT_REFRESH = "refresh";
+declare const EVENT_UPDATED = "updated";
+declare const EVENT_RESIZE = "resize";
+declare const EVENT_RESIZED = "resized";
+declare const EVENT_DRAG = "drag";
+declare const EVENT_DRAGGING = "dragging";
+declare const EVENT_DRAGGED = "dragged";
+declare const EVENT_SCROLL = "scroll";
+declare const EVENT_SCROLLED = "scrolled";
+declare const EVENT_OVERFLOW = "overflow";
+declare const EVENT_DESTROY = "destroy";
+declare const EVENT_ARROWS_MOUNTED = "arrows:mounted";
+declare const EVENT_ARROWS_UPDATED = "arrows:updated";
+declare const EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+declare const EVENT_PAGINATION_UPDATED = "pagination:updated";
+declare const EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+declare const EVENT_AUTOPLAY_PLAY = "autoplay:play";
+declare const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+declare const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+declare const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+declare const EVENT_LAZYLOAD_ERROR = "lazyload:error";
+/** @internal */
+declare const EVENT_SLIDE_KEYDOWN = "_sk";
+declare const EVENT_SHIFTED = "_sh";
+declare const EVENT_END_INDEX_CHANGED = "_ei";
+
+/**
+ * The interface for all internal E.
+ *
+ * @since 3.0.0
+ */
+interface EventMap {
+    [EVENT_MOUNTED]: () => void;
+    [EVENT_READY]: () => void;
+    [EVENT_CLICK]: (Slide: SlideComponent, e: MouseEvent) => void;
+    [EVENT_MOVE]: (index: number, prev: number, dest: number) => void;
+    [EVENT_MOVED]: (index: number, prev: number, dest: number) => void;
+    [EVENT_ACTIVE]: (Slide: SlideComponent) => void;
+    [EVENT_INACTIVE]: (Slide: SlideComponent) => void;
+    [EVENT_VISIBLE]: (Slide: SlideComponent) => void;
+    [EVENT_HIDDEN]: (Slide: SlideComponent) => void;
+    [EVENT_REFRESH]: () => void;
+    [EVENT_UPDATED]: (options: Options) => void;
+    [EVENT_RESIZE]: () => void;
+    [EVENT_RESIZED]: () => void;
+    [EVENT_DRAG]: () => void;
+    [EVENT_DRAGGING]: () => void;
+    [EVENT_DRAGGED]: () => void;
+    [EVENT_SCROLL]: () => void;
+    [EVENT_SCROLLED]: () => void;
+    [EVENT_OVERFLOW]: (overflow: boolean) => void;
+    [EVENT_DESTROY]: () => void;
+    [EVENT_ARROWS_MOUNTED]: (prev: HTMLButtonElement, next: HTMLButtonElement) => void;
+    [EVENT_ARROWS_UPDATED]: (prev: HTMLButtonElement, next: HTMLButtonElement, prevIndex: number, nextIndex: number) => void;
+    [EVENT_PAGINATION_MOUNTED]: (data: PaginationData, item: PaginationItem) => void;
+    [EVENT_PAGINATION_UPDATED]: (data: PaginationData, prev: PaginationItem, curr: PaginationItem) => void;
+    [EVENT_NAVIGATION_MOUNTED]: (splides: Splide[]) => void;
+    [EVENT_AUTOPLAY_PLAY]: () => void;
+    [EVENT_AUTOPLAY_PLAYING]: (rate: number) => void;
+    [EVENT_AUTOPLAY_PAUSE]: () => void;
+    [EVENT_LAZYLOAD_LOADED]: (img: HTMLImageElement, Slide: SlideComponent) => void;
+    [EVENT_LAZYLOAD_ERROR]: (img: HTMLImageElement, Slide: SlideComponent) => void;
+    /** @internal */
+    [EVENT_SLIDE_KEYDOWN]: (Slide: SlideComponent, e: KeyboardEvent) => void;
+    [EVENT_SHIFTED]: () => void;
+    [EVENT_END_INDEX_CHANGED]: () => void;
+}
+/**
+ * The EventInterface type with Splide `EventMap`.
+ *
+ * @since 5.0.0
+ */
+declare type EventInterface = EventInterface$1<EventMap & Record<string, AnyFunction>>;
+
 /**
  * The type for any function.
  *
@@ -757,7 +840,7 @@ declare type AnyFunction = (...args: any[]) => any;
  *
  * @since 3.0.0
  */
-declare type ComponentConstructor = (Splide: Splide, Components: Components, options: Options, event: EventInterface) => BaseComponent;
+declare type ComponentConstructor<R extends BaseComponent = BaseComponent> = (Splide: Splide, Components: Components, options: Options, event: EventInterface) => R;
 /**
  * The interface for any component.
  *
@@ -815,43 +898,6 @@ interface Components {
     Transition: TransitionComponent;
 }
 
-/**
- * The interface for all internal events.
- *
- * @since 3.0.0
- */
-interface EventMap {
-    'mounted': () => void;
-    'ready': () => void;
-    'click': (Slide: SlideComponent, e: MouseEvent) => void;
-    'move': (index: number, prev: number, dest: number) => void;
-    'moved': (index: number, prev: number, dest: number) => void;
-    'active': (Slide: SlideComponent) => void;
-    'inactive': (Slide: SlideComponent) => void;
-    'visible': (Slide: SlideComponent) => void;
-    'hidden': (Slide: SlideComponent) => void;
-    'refresh': () => void;
-    'updated': (options: Options) => void;
-    'resize': () => void;
-    'resized': () => void;
-    'drag': () => void;
-    'dragging': () => void;
-    'dragged': () => void;
-    'scroll': () => void;
-    'scrolled': () => void;
-    'overflow': (overflow: boolean) => void;
-    'destroy': () => void;
-    'arrows:mounted': (prev: HTMLButtonElement, next: HTMLButtonElement) => void;
-    'arrows:updated': (prev: HTMLButtonElement, next: HTMLButtonElement, prevIndex: number, nextIndex: number) => void;
-    'pagination:mounted': (data: PaginationData, item: PaginationItem) => void;
-    'pagination:updated': (data: PaginationData, prev: PaginationItem, curr: PaginationItem) => void;
-    'navigation:mounted': (splides: Splide[]) => void;
-    'autoplay:play': () => void;
-    'autoplay:playing': (rate: number) => void;
-    'autoplay:pause': () => void;
-    'lazyload:loaded': (img: HTMLImageElement, Slide: SlideComponent) => void;
-}
-
 /**
  * Casts T to U.
  *
@@ -959,7 +1005,7 @@ declare class Splide {
     /**
      * The EventBusObject object.
      */
-    readonly event: EventInterface<Record<string, AnyFunction$1>>;
+    readonly event: EventInterface$1<Record<string, AnyFunction$1>>;
     /**
      * The collection of all component objects.
      */
@@ -1564,40 +1610,6 @@ declare class SplideRenderer {
     html(): string;
 }
 
-declare const EVENT_MOUNTED = "mounted";
-declare const EVENT_READY = "ready";
-declare const EVENT_MOVE = "move";
-declare const EVENT_MOVED = "moved";
-declare const EVENT_CLICK = "click";
-declare const EVENT_ACTIVE = "active";
-declare const EVENT_INACTIVE = "inactive";
-declare const EVENT_VISIBLE = "visible";
-declare const EVENT_HIDDEN = "hidden";
-declare const EVENT_REFRESH = "refresh";
-declare const EVENT_UPDATED = "updated";
-declare const EVENT_RESIZE = "resize";
-declare const EVENT_RESIZED = "resized";
-declare const EVENT_DRAG = "drag";
-declare const EVENT_DRAGGING = "dragging";
-declare const EVENT_DRAGGED = "dragged";
-declare const EVENT_SCROLL = "scroll";
-declare const EVENT_SCROLLED = "scrolled";
-declare const EVENT_OVERFLOW = "overflow";
-declare const EVENT_DESTROY = "destroy";
-declare const EVENT_ARROWS_MOUNTED = "arrows:mounted";
-declare const EVENT_ARROWS_UPDATED = "arrows:updated";
-declare const EVENT_PAGINATION_MOUNTED = "pagination:mounted";
-declare const EVENT_PAGINATION_UPDATED = "pagination:updated";
-declare const EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
-declare const EVENT_AUTOPLAY_PLAY = "autoplay:play";
-declare const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
-declare const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
-declare const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
-/** @internal */
-declare const EVENT_SLIDE_KEYDOWN = "sk";
-declare const EVENT_SHIFTED = "sh";
-declare const EVENT_END_INDEX_CHANGED = "ei";
-
 /**
  * All classes as constants.
  */
@@ -1691,4 +1703,4 @@ declare const LOOP = "loop";
  */
 declare const FADE = "fade";
 
-export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, BreakpointsComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_OVERFLOW, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, DEFAULTS, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventMap, FADE, Head, KeyboardComponent, LOOP, LTR, LayoutComponent, LazyLoadComponent, LiveComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RTL, Resolve, ResponsiveOptions, SLIDE, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, SyncComponent, SyncTarget, TTB, TransitionComponent, WheelComponent, Splide as default };
+export { AnyFunction, ArrowsComponent, AutoplayComponent, BaseComponent, BreakpointsComponent, CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_CLONE, CLASS_CONTAINER, CLASS_FOCUS_IN, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_OVERFLOW, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SPINNER, CLASS_SR, CLASS_TOGGLE, CLASS_TOGGLE_PAUSE, CLASS_TOGGLE_PLAY, CLASS_TRACK, CLASS_VISIBLE, Cast, ClonesComponent, ComponentConstructor, Components, ControllerComponent, DEFAULTS, DirectionComponent, DragComponent, EVENT_ACTIVE, EVENT_ARROWS_MOUNTED, EVENT_ARROWS_UPDATED, EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_AUTOPLAY_PLAYING, EVENT_CLICK, EVENT_DESTROY, EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_END_INDEX_CHANGED, EVENT_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_ERROR, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_OVERFLOW, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SHIFTED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, ElementsComponent, EventInterface, EventMap, FADE, Head, KeyboardComponent, LOOP, LTR, LayoutComponent, LazyLoadComponent, LiveComponent, MoveComponent, Options, PaginationComponent, PaginationData, PaginationItem, Push, RTL, Resolve, ResponsiveOptions, SLIDE, STATUS_CLASSES, ScrollComponent, Shift, ShiftN, SlideComponent, SlidesComponent, Splide, SplideRenderer, SyncComponent, SyncTarget, TTB, TransitionComponent, WheelComponent, Splide as default };

src/js/components/Arrows/Arrows.ts

@@ -10,8 +10,7 @@ import {
   EVENT_SCROLLED,
   EVENT_UPDATED,
 } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
+import { BaseComponent, ComponentConstructor } from '../../types';
 import {
   addClass,
   append,
@@ -20,11 +19,10 @@ import {
   before,
   create,
   display,
-  EventInterface,
   parseHtml,
-  removeNode,
   removeAttribute,
   removeClass,
+  removeNode,
   setAttribute,
 } from '@splidejs/utils';
 import { PATH, SIZE, XML_NAME_SPACE } from './path';
@@ -54,12 +52,7 @@ export interface ArrowsComponent extends BaseComponent {
  *
  * @return An Arrows component object.
  */
-export function Arrows(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): ArrowsComponent {
+export const Arrows: ComponentConstructor<ArrowsComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, emit } = event;
   const { classes, i18n } = options;
   const { Elements, Controller } = Components;
@@ -224,4 +217,4 @@ export function Arrows(
     destroy,
     update,
   };
-}
+};

src/js/components/Autoplay/Autoplay.ts

@@ -8,9 +8,8 @@ import {
   EVENT_REFRESH,
   EVENT_SCROLL,
 } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { EventInterface, getAttribute, RequestInterval, setAttribute, style, toggleClass } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { getAttribute, RequestInterval, setAttribute, style, toggleClass } from '@splidejs/utils';
 import { INTERVAL_DATA_ATTRIBUTE } from './constants';
 
 
@@ -37,12 +36,7 @@ export interface AutoplayComponent extends BaseComponent {
  *
  * @return An Autoplay component object.
  */
-export function Autoplay(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): AutoplayComponent {
+export const Autoplay: ComponentConstructor<AutoplayComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, emit } = event;
   const interval = RequestInterval( options.interval, Splide.go.bind( Splide, '>' ), onAnimationFrame );
   const { isPaused } = interval;
@@ -180,4 +174,4 @@ export function Autoplay(
     pause,
     isPaused,
   };
-}
+};

src/js/components/Breakpoints/Breakpoints.ts

@@ -1,8 +1,7 @@
 import { MEDIA_PREFERS_REDUCED_MOTION } from '../../constants/media';
 import { CREATED, DESTROYED } from '../../constants/states';
-import { EventBinder, EventInterface, merge, omit, ownKeys } from '@splidejs/utils';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
+import { EventBinder, merge, omit, ownKeys } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor, Options } from '../../types';
 import { EVENT_OVERFLOW, EVENT_UPDATED } from '../../constants/events';
 
 
@@ -37,12 +36,7 @@ const NOT_OVERFLOW_KEY = '!overflow';
  *
  * @return A Media component object.
  */
-export function Breakpoints(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): BreakpointsComponent {
+export const Breakpoints: ComponentConstructor<BreakpointsComponent> = ( Splide, Components, options, event ) => {
   const { state } = Splide;
   const breakpoints   = options.breakpoints || {};
   const reducedMotion = options.reducedMotion || {};
@@ -161,4 +155,4 @@ export function Breakpoints(
     reduce,
     set,
   };
-}
+};

src/js/components/Clones/Clones.ts

@@ -1,20 +1,7 @@
 import { EVENT_REFRESH, EVENT_RESIZE, EVENT_UPDATED } from '../../constants/events';
 import { LOOP } from '../../constants/types';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import {
-  addClass,
-  append,
-  before,
-  ceil,
-  empty,
-  EventInterface,
-  isUndefined,
-  pad,
-  push,
-  rect,
-  removeNode,
-} from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { addClass, append, before, ceil, empty, isUndefined, pad, push, rect, removeNode } from '@splidejs/utils';
 
 
 /**
@@ -44,12 +31,7 @@ export const MULTIPLIER = 2;
  *
  * @return A Clones component object.
  */
-export function Clones(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): ClonesComponent {
+export const Clones: ComponentConstructor<ClonesComponent> = ( Splide, Components, options, event ) => {
   const { on } = event;
   const { Elements, Slides, Layout: { resize } } = Components;
   const { resolve } = Components.Direction;
@@ -174,4 +156,4 @@ export function Clones(
     mount,
     destroy,
   };
-}
+};

src/js/components/Controller/Controller.ts

@@ -1,19 +1,8 @@
 import { EVENT_END_INDEX_CHANGED, EVENT_REFRESH, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
 import { MOVING, SCROLLING } from '../../constants/states';
 import { LOOP, SLIDE } from '../../constants/types';
-import { Splide } from '../../core/Splide/Splide';
-import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import {
-  apply,
-  approximatelyEqual,
-  between,
-  clamp,
-  EventInterface,
-  floor,
-  isString,
-  isUndefined,
-  min,
-} from '@splidejs/utils';
+import { AnyFunction, BaseComponent, ComponentConstructor } from '../../types';
+import { apply, approximatelyEqual, between, clamp, floor, isString, isUndefined, min } from '@splidejs/utils';
 
 
 /**
@@ -52,12 +41,7 @@ export interface ControllerComponent extends BaseComponent {
  *
  * @return A Controller component object.
  */
-export function Controller(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): ControllerComponent {
+export const Controller: ComponentConstructor<ControllerComponent> = ( Splide, Components, options, event ) => {
   const { on, emit } = event;
   const { Move } = Components;
   const { getPosition, getLimit, toPosition } = Move;
@@ -434,4 +418,4 @@ export function Controller(
     hasFocus,
     isBusy,
   };
-}
+};

src/js/components/Cover/Cover.ts

@@ -1,77 +0,0 @@
-import { EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_REFRESH, EVENT_UPDATED } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { apply, child, display, EventInterface } from '@splidejs/utils';
-import { SlideComponent } from '../Slides/Slide';
-
-
-/**
- * The interface for the Cover component.
- *
- * @since 3.0.0
- */
-export interface CoverComponent extends BaseComponent {
-}
-
-/**
- * The component for setting the image as the slide background.
- *
- * @since 3.0.0
- *
- * @param Splide     - A Splide instance.
- * @param Components - A collection of components.
- * @param options    - Options.
- * @param event      - An EventInterface instance.
- *
- * @return A Cover component object.
- */
-export function Cover(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): CoverComponent {
-  const { on } = event;
-
-  /**
-   * Called when the component is mounted.
-   */
-  function mount(): void {
-    if ( options.cover ) {
-      on( EVENT_LAZYLOAD_LOADED, apply( toggle, true ) );
-      on( [ EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH ], apply( cover, true ) );
-    }
-  }
-
-  /**
-   * Sets/removes the background image to/from all slides.
-   *
-   * @param cover - If `false`, removes the background image.
-   */
-  function cover( cover: boolean ): void {
-    Components.Slides.forEach( Slide => {
-      const img = child<HTMLImageElement>( Slide.container || Slide.slide, 'img' );
-
-      if ( img && img.src ) {
-        toggle( cover, img, Slide );
-      }
-    } );
-  }
-
-  /**
-   * Sets/removes the background image to/from the parent element.
-   *
-   * @param cover - If `false`, removes the background image.
-   * @param img   - A target image element.
-   * @param Slide - A SlideComponent object where the image belongs.
-   */
-  function toggle( cover: boolean, img: HTMLImageElement, Slide: SlideComponent ): void {
-    Slide.style( 'background', cover ? `center/cover no-repeat url("${ img.src }")` : '', true );
-    display( img, cover ? 'none' : '' );
-  }
-
-  return {
-    mount,
-    destroy: apply( cover, false ),
-  };
-}

src/js/components/Direction/Direction.ts

@@ -1,7 +1,7 @@
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '../../constants/arrows';
 import { RTL, TTB } from '../../constants/directions';
 import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
+import { BaseComponent, ComponentConstructor, Components, Options } from '../../types';
 
 
 /**
@@ -41,7 +41,7 @@ export const ORIENTATION_MAP = {
  *
  * @return A Direction component object.
  */
-export function Direction( Splide: Splide, Components: Components, options: Options ): DirectionComponent {
+export const Direction: ComponentConstructor<DirectionComponent> = ( Splide: Splide, Components: Components, options: Options ) => {
   /**
    * Resolves the provided property name.
    *
@@ -75,4 +75,4 @@ export function Direction( Splide: Splide, Components: Components, options: Opti
     resolve,
     orient,
   };
-}
+};

src/js/components/Drag/Drag.ts

@@ -3,9 +3,8 @@ import { EVENT_DRAG, EVENT_DRAGGED, EVENT_DRAGGING, EVENT_MOUNTED, EVENT_UPDATED
 import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
 import { DRAGGING, IDLE, MOVING, SCROLLING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { abs, EventInterface, isObject, matches, min, noop, prevent, sign, timeOf } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { abs, isObject, matches, min, noop, prevent, sign, timeOf } from '@splidejs/utils';
 import { FRICTION, LOG_INTERVAL, POINTER_DOWN_EVENTS, POINTER_MOVE_EVENTS, POINTER_UP_EVENTS } from './constants';
 
 
@@ -31,12 +30,7 @@ export interface DragComponent extends BaseComponent {
  *
  * @return A Drag component object.
  */
-export function Drag(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): DragComponent {
+export const Drag: ComponentConstructor<DragComponent> = ( Splide, Components, options, event ) => {
   const { on, emit, bind } = event;
   const binder = event.create();
   const { state } = Splide;
@@ -415,4 +409,4 @@ export function Drag(
     disable,
     isDragging,
   };
-}
+};

src/js/components/Elements/Elements.ts

@@ -16,8 +16,7 @@ import {
 } from '../../constants/classes';
 import { EVENT_REFRESH, EVENT_UPDATED } from '../../constants/events';
 import { PROJECT_CODE } from '../../constants/project';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
+import { BaseComponent, ComponentConstructor } from '../../types';
 import {
   addClass,
   assign,
@@ -25,7 +24,6 @@ import {
   children,
   closest,
   empty,
-  EventInterface,
   getAttribute,
   push,
   query,
@@ -77,12 +75,7 @@ export interface ElementsComponent extends BaseComponent, ElementCollection {
  *
  * @return An Elements component object.
  */
-export function Elements(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): ElementsComponent {
+export const Elements: ComponentConstructor<ElementsComponent> = ( Splide, Components, options, event ) => {
   const { on, bind } = event;
   const { root } = Splide;
   const { i18n } = options;
@@ -255,4 +248,4 @@ export function Elements(
     mount,
     destroy,
   } );
-}
+};

src/js/components/Keyboard/Keyboard.ts

@@ -1,8 +1,7 @@
 import { ARROW_LEFT, ARROW_RIGHT } from '../../constants/arrows';
 import { EVENT_MOVE, EVENT_UPDATED } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { EventInterface, nextTick } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { nextTick } from '@splidejs/utils';
 
 
 /**
@@ -33,12 +32,7 @@ const KEYBOARD_EVENT = 'keydown';
  *
  * @return A Keyboard component object.
  */
-export function Keyboard(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): KeyboardComponent {
+export const Keyboard: ComponentConstructor<KeyboardComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, destroy } = event;
   const { root } = Splide;
   const { resolve } = Components.Direction;
@@ -114,4 +108,4 @@ export function Keyboard(
     destroy,
     disable,
   };
-}
+};

src/js/components/Layout/Layout.ts

@@ -1,8 +1,7 @@
 import { TTB } from '../../constants/directions';
 import { EVENT_OVERFLOW, EVENT_REFRESH, EVENT_RESIZE, EVENT_RESIZED, EVENT_UPDATED } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { apply, EventInterface, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { apply, isObject, rect, style, Throttle, toggleClass, unit } from '@splidejs/utils';
 import { assert } from '../../utils';
 import { FADE } from '../../constants/types';
 import { CLASS_OVERFLOW } from '../../constants/classes';
@@ -37,12 +36,7 @@ export interface LayoutComponent extends BaseComponent {
  *
  * @return An Layout component object.
  */
-export function Layout(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): LayoutComponent {
+export const Layout: ComponentConstructor<LayoutComponent> = ( Splide, Components, options, event ) => {
   const { on, bind, emit } = event;
   const { Slides } = Components;
   const { resolve } = Components.Direction;
@@ -283,4 +277,4 @@ export function Layout(
     getPadding,
     isOverflow,
   };
-}
+};

src/js/components/LazyLoad/LazyLoad.ts

@@ -1,13 +1,13 @@
 import { CLASS_LOADING } from '../../constants/classes';
 import {
+  EVENT_LAZYLOAD_ERROR,
   EVENT_LAZYLOAD_LOADED,
   EVENT_MOVED,
   EVENT_REFRESH,
   EVENT_RESIZE,
   EVENT_SCROLLED,
 } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
+import { BaseComponent, ComponentConstructor } from '../../types';
 import {
   addClass,
   apply,
@@ -15,12 +15,11 @@ import {
   create,
   display,
   empty,
-  EventInterface,
   getAttribute,
   queryAll,
-  removeNode,
   removeAttribute,
   removeClass,
+  removeNode,
   setAttribute,
 } from '@splidejs/utils';
 import { SlideComponent } from '../Slides/Slide';
@@ -57,12 +56,7 @@ type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ];
  *
  * @return An LazyLoad component object.
  */
-export function LazyLoad(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): LazyLoadComponent {
+export const LazyLoad: ComponentConstructor<LazyLoadComponent> = ( Splide, Components, options, event ) => {
   const { on, off, bind, emit } = event;
   const isSequential = options.lazyLoad === 'sequential';
   const events       = [ EVENT_MOVED, EVENT_SCROLLED ];
@@ -167,6 +161,8 @@ export function LazyLoad(
       display( img, '' );
       emit( EVENT_LAZYLOAD_LOADED, img, Slide );
       emit( EVENT_RESIZE );
+    } else {
+      emit( EVENT_LAZYLOAD_ERROR, img, Slide );
     }
 
     isSequential && loadNext();
@@ -184,4 +180,4 @@ export function LazyLoad(
     destroy: apply( empty, entries ),
     check,
   };
-}
+};

src/js/components/Live/Live.ts

@@ -1,18 +1,8 @@
 import { ARIA_ATOMIC, ARIA_BUSY, ARIA_LIVE } from '../../constants/attributes';
 import { CLASS_SR } from '../../constants/classes';
 import { EVENT_AUTOPLAY_PAUSE, EVENT_AUTOPLAY_PLAY, EVENT_MOVED, EVENT_SCROLLED } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import {
-  append,
-  apply,
-  create,
-  EventInterface,
-  removeNode,
-  removeAttribute,
-  RequestInterval,
-  setAttribute,
-} from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { append, apply, create, removeAttribute, removeNode, RequestInterval, setAttribute } from '@splidejs/utils';
 import { VISUALLY_HIDDEN } from './constants';
 
 
@@ -44,12 +34,7 @@ const SR_REMOVAL_DELAY = 90;
  *
  * @return A Live component object.
  */
-export function Live(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): LiveComponent {
+export const Live: ComponentConstructor<LiveComponent> = ( Splide, Components, options, event ) => {
   const { on } = event;
   const { track } = Components.Elements;
 
@@ -128,4 +113,4 @@ export function Live(
     disable,
     destroy,
   };
-}
+};

src/js/components/Move/Move.ts

@@ -9,9 +9,8 @@ import {
 } from '../../constants/events';
 import { IDLE, MOVING } from '../../constants/states';
 import { FADE, LOOP, SLIDE } from '../../constants/types';
-import { Splide } from '../../core/Splide/Splide';
-import { AnyFunction, BaseComponent, Components, Options, TransitionComponent } from '../../types';
-import { abs, ceil, clamp, EventInterface, rect, style } from '@splidejs/utils';
+import { AnyFunction, BaseComponent, ComponentConstructor, TransitionComponent } from '../../types';
+import { abs, ceil, clamp, rect, style } from '@splidejs/utils';
 
 
 /**
@@ -47,12 +46,7 @@ export interface MoveComponent extends BaseComponent {
  *
  * @return A Move component object.
  */
-export function Move(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): MoveComponent {
+export const Move: ComponentConstructor<MoveComponent> = ( Splide, Components, options, event ) => {
   const { on, emit } = event;
   const { set } = Splide.state;
   const { Slides } = Components;
@@ -308,4 +302,4 @@ export function Move(
     exceededLimit,
     reposition,
   };
-}
+};

src/js/components/Pagination/Pagination.ts

@@ -19,8 +19,7 @@ import {
   EVENT_SCROLLED,
   EVENT_UPDATED,
 } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
+import { BaseComponent, ComponentConstructor, Options } from '../../types';
 import {
   addClass,
   apply,
@@ -28,13 +27,12 @@ import {
   create,
   display,
   empty,
-  EventInterface,
   focus,
   format,
   prevent,
-  removeNode,
   removeAttribute,
   removeClass,
+  removeNode,
   setAttribute,
   slice,
 } from '@splidejs/utils';
@@ -84,12 +82,7 @@ export interface PaginationItem {
  *
  * @return A Pagination component object.
  */
-export function Pagination(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): PaginationComponent {
+export const Pagination: ComponentConstructor<PaginationComponent> = ( Splide, Components, options, event ) => {
   const { on, emit, bind } = event;
   const { Slides, Elements, Controller } = Components;
   const { hasFocus, getIndex, go } = Controller;
@@ -273,4 +266,4 @@ export function Pagination(
     getAt,
     update,
   };
-}
+};

src/js/components/Scroll/Scroll.ts

@@ -1,9 +1,8 @@
 import { EVENT_MOVE, EVENT_REFRESH, EVENT_SCROLL, EVENT_SCROLLED, EVENT_UPDATED } from '../../constants/events';
 import { IDLE, SCROLLING } from '../../constants/states';
 import { SLIDE } from '../../constants/types';
-import { Splide } from '../../core/Splide/Splide';
-import { AnyFunction, BaseComponent, Components, Options } from '../../types';
-import { abs, apply, approximatelyEqual, EventInterface, floor, max, RequestInterval, sign } from '@splidejs/utils';
+import { AnyFunction, BaseComponent, ComponentConstructor } from '../../types';
+import { abs, apply, approximatelyEqual, floor, max, RequestInterval, sign } from '@splidejs/utils';
 import { BASE_VELOCITY, BOUNCE_DIFF_THRESHOLD, BOUNCE_DURATION, FRICTION_FACTOR, MIN_DURATION } from './constants';
 
 
@@ -29,12 +28,7 @@ export interface ScrollComponent extends BaseComponent {
  *
  * @return A Scroll component object.
  */
-export function Scroll(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): ScrollComponent {
+export const Scroll: ComponentConstructor<ScrollComponent> = ( Splide, Components, options, event ) => {
   const { on, emit } = event;
   const { state: { set } } = Splide;
   const { Move } = Components;
@@ -172,4 +166,4 @@ export function Scroll(
     scroll,
     cancel,
   };
-}
+};

src/js/components/Slides/Slide.ts

@@ -87,7 +87,7 @@ export interface  SlideComponent extends BaseComponent {
  *
  * @return A Slide subcomponent.
  */
-export function Slide( Splide: Splide, index: number, slideIndex: number, slide: HTMLElement ): SlideComponent {
+export const Slide = ( Splide: Splide, index: number, slideIndex: number, slide: HTMLElement ): SlideComponent => {
   const event = Splide.event.create();
   const { on, emit, bind } = event;
   const { Components, root, options } = Splide;
@@ -318,4 +318,4 @@ export function Slide( Splide: Splide, index: number, slideIndex: number, slide:
   };
 
   return self;
-}
+};

src/js/components/Slides/Slides.ts

@@ -1,14 +1,13 @@
 import { EVENT_REFRESH, EVENT_RESIZE } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { AnyFunction, BaseComponent, Components, Options } from '../../types';
+import { AnyFunction, BaseComponent, ComponentConstructor } from '../../types';
 import {
   addClass,
   append,
   apply,
   before,
-  between, CSSProperties,
+  between,
+  CSSProperties,
   empty,
-  EventInterface,
   forEach as forEachItem,
   includes,
   isFunction,
@@ -76,12 +75,7 @@ export type SlideMatcher = number | number[] | string | SlidesPredicate;
  *
  * @return An Slides component object.
  */
-export function Slides(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): SlidesComponent {
+export const Slides: ComponentConstructor<SlidesComponent> = ( Splide, Components, options, event ) => {
   const { on, emit, bind } = event;
   const { slides, list } = Components.Elements;
 
@@ -303,4 +297,4 @@ export function Slides(
     getLength,
     isEnough,
   };
-}
+};

src/js/components/Sync/Sync.ts

@@ -10,8 +10,8 @@ import {
 } from '../../constants/events';
 import { LOOP } from '../../constants/types';
 import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { apply, empty, EventInterface, includes, isUndefined, prevent, setAttribute } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor, EventInterface } from '../../types';
+import { apply, empty, includes, isUndefined, prevent, setAttribute } from '@splidejs/utils';
 import { SlideComponent } from '../Slides/Slide';
 
 
@@ -43,12 +43,7 @@ const TRIGGER_KEYS = [ ' ', 'Enter' ];
  *
  * @return A Sync component object.
  */
-export function Sync(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): SyncComponent {
+export const Sync: ComponentConstructor<SyncComponent> = ( Splide, Components, options, event ) => {
   const { isNavigation, slideFocus } = options;
 
   /**
@@ -165,4 +160,4 @@ export function Sync(
     destroy,
     remount,
   };
-}
+};

src/js/components/Wheel/Wheel.ts

@@ -1,8 +1,7 @@
 import { SCROLL_LISTENER_OPTIONS } from '../../constants/listener-options';
 import { MOVING } from '../../constants/states';
-import { Splide } from '../../core/Splide/Splide';
-import { BaseComponent, Components, Options } from '../../types';
-import { abs, EventInterface, prevent, timeOf } from '@splidejs/utils';
+import { BaseComponent, ComponentConstructor } from '../../types';
+import { abs, prevent, timeOf } from '@splidejs/utils';
 
 
 /**
@@ -25,12 +24,7 @@ export interface WheelComponent extends BaseComponent {
  *
  * @return A Wheel component object.
  */
-export function Wheel(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): WheelComponent {
+export const Wheel: ComponentConstructor<WheelComponent> = ( Splide, Components, options, event ) => {
   /**
    * Holds the last time when the wheel moves the slider.
    */
@@ -83,4 +77,4 @@ export function Wheel(
   return {
     mount,
   };
-}
+};

src/js/components/index.ts

@@ -1,23 +1,23 @@
 import { ComponentConstructor } from '../types';
 
 import { Breakpoints } from './Breakpoints/Breakpoints';
-import { Direction }   from './Direction/Direction';
-import { Elements }    from './Elements/Elements';
-import { Slides }      from './Slides/Slides';
-import { Layout }      from './Layout/Layout';
-import { Clones }      from './Clones/Clones';
-import { Move }        from './Move/Move';
-import { Controller }  from './Controller/Controller';
-import { Arrows }      from './Arrows/Arrows';
-import { Autoplay }    from './Autoplay/Autoplay';
-import { Scroll }      from './Scroll/Scroll';
-import { Drag }        from './Drag/Drag';
-import { Keyboard }    from './Keyboard/Keyboard';
-import { LazyLoad }    from './LazyLoad/LazyLoad';
-import { Pagination }  from './Pagination/Pagination';
-import { Sync }        from './Sync/Sync';
-import { Wheel }       from './Wheel/Wheel';
-import { Live }        from './Live/Live';
+import { Direction } from './Direction/Direction';
+import { Elements } from './Elements/Elements';
+import { Slides } from './Slides/Slides';
+import { Layout } from './Layout/Layout';
+import { Clones } from './Clones/Clones';
+import { Move } from './Move/Move';
+import { Controller } from './Controller/Controller';
+import { Arrows } from './Arrows/Arrows';
+import { Autoplay } from './Autoplay/Autoplay';
+import { Scroll } from './Scroll/Scroll';
+import { Drag } from './Drag/Drag';
+import { Keyboard } from './Keyboard/Keyboard';
+import { LazyLoad } from './LazyLoad/LazyLoad';
+import { Pagination } from './Pagination/Pagination';
+import { Sync } from './Sync/Sync';
+import { Wheel } from './Wheel/Wheel';
+import { Live } from './Live/Live';
 
 export { Breakpoints } from './Breakpoints/Breakpoints';
 export { Direction }   from './Direction/Direction';

src/js/constants/events.ts

@@ -27,8 +27,9 @@ export const EVENT_AUTOPLAY_PLAY      = 'autoplay:play';
 export const EVENT_AUTOPLAY_PLAYING   = 'autoplay:playing';
 export const EVENT_AUTOPLAY_PAUSE     = 'autoplay:pause';
 export const EVENT_LAZYLOAD_LOADED    = 'lazyload:loaded';
+export const EVENT_LAZYLOAD_ERROR     = 'lazyload:error';
 
 /** @internal */
-export const EVENT_SLIDE_KEYDOWN     = 'sk';
-export const EVENT_SHIFTED           = 'sh';
-export const EVENT_END_INDEX_CHANGED = 'ei';
+export const EVENT_SLIDE_KEYDOWN     = '_sk';
+export const EVENT_SHIFTED           = '_sh';
+export const EVENT_END_INDEX_CHANGED = '_ei';

src/js/renderer/SplideRenderer/SplideRenderer.ts

@@ -108,7 +108,7 @@ export class SplideRenderer {
     this.config    = assign( {}, RENDERER_DEFAULT_CONFIG, config || {} );
     this.id        = this.config.id || uniqueId( 'splide' );
     this.Style     = new Style( this.id, this.options );
-    this.Direction = Direction( null, null, this.options );
+    this.Direction = Direction( null, null, this.options, undefined );
 
     assert( this.contents.length, 'Provide at least 1 content.' );
 

src/js/transitions/Fade/Fade.ts

@@ -1,7 +1,6 @@
 import { EVENT_MOUNTED, EVENT_REFRESH } from '../../constants/events';
-import { Splide } from '../../core/Splide/Splide';
-import { Components, Options, TransitionComponent } from '../../types';
-import { EventInterface, nextTick, noop } from '@splidejs/utils';
+import { ComponentConstructor, TransitionComponent } from '../../types';
+import { nextTick, noop } from '@splidejs/utils';
 
 
 /**
@@ -16,12 +15,7 @@ import { EventInterface, nextTick, noop } from '@splidejs/utils';
  *
  * @return A Transition component object.
  */
-export function Fade(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): TransitionComponent {
+export const Fade: ComponentConstructor<TransitionComponent> = ( Splide, Components, options, event ) => {
   const { Slides } = Components;
 
   /**
@@ -58,4 +52,4 @@ export function Fade(
     start,
     cancel: noop,
   };
-}
+};

src/js/transitions/Slide/Slide.ts

@@ -1,7 +1,6 @@
 import { SLIDE } from '../../constants/types';
-import { Splide } from '../../core/Splide/Splide';
-import { Components, Options, TransitionComponent } from '../../types';
-import { abs, apply, EventInterface, style } from '@splidejs/utils';
+import { ComponentConstructor, TransitionComponent } from '../../types';
+import { abs, apply, style } from '@splidejs/utils';
 
 
 /**
@@ -16,12 +15,7 @@ import { abs, apply, EventInterface, style } from '@splidejs/utils';
  *
  * @return A Transition component object.
  */
-export function Slide(
-  Splide: Splide,
-  Components: Components,
-  options: Options,
-  event: EventInterface
-): TransitionComponent {
+export const Slide: ComponentConstructor<TransitionComponent> = ( Splide, Components, options, event ) => {
   const { Move, Controller, Scroll } = Components;
   const { list } = Components.Elements;
   const transition = apply( style, list, 'transition' );
@@ -102,4 +96,4 @@ export function Slide(
     start,
     cancel,
   };
-}
+};

src/js/types/events.ts

@@ -2,41 +2,57 @@ import { PaginationData, PaginationItem } from '../components/Pagination/Paginat
 import { SlideComponent } from '../components/Slides/Slide';
 import { Splide } from '../core/Splide/Splide';
 import { Options } from './options';
+import * as E from '../constants/events';
+import { EventInterface as EventInterfaceInstance } from '@splidejs/utils';
+import { AnyFunction } from './general';
 
 
 /**
- * The interface for all internal events.
+ * The interface for all internal E.
  *
  * @since 3.0.0
  */
 export interface EventMap {
-  'mounted': () => void;
-  'ready': () => void;
-  'click': ( Slide: SlideComponent, e: MouseEvent ) => void;
-  'move': ( index: number, prev: number, dest: number ) => void;
-  'moved': ( index: number, prev: number, dest: number ) => void;
-  'active': ( Slide: SlideComponent ) => void;
-  'inactive': ( Slide: SlideComponent ) => void;
-  'visible': ( Slide: SlideComponent ) => void;
-  'hidden': ( Slide: SlideComponent ) => void;
-  'refresh': () => void;
-  'updated': ( options: Options ) => void;
-  'resize': () => void;
-  'resized': () => void;
-  'drag': () => void;
-  'dragging': () => void;
-  'dragged': () => void;
-  'scroll': () => void;
-  'scrolled': () => void;
-  'overflow': ( overflow: boolean ) => void;
-  'destroy': () => void;
-  'arrows:mounted': ( prev: HTMLButtonElement, next: HTMLButtonElement ) => void;
-  'arrows:updated': ( prev: HTMLButtonElement, next: HTMLButtonElement, prevIndex: number, nextIndex: number ) => void;
-  'pagination:mounted': ( data: PaginationData, item: PaginationItem ) => void;
-  'pagination:updated': ( data: PaginationData, prev: PaginationItem, curr: PaginationItem ) => void;
-  'navigation:mounted': ( splides: Splide[] ) => void;
-  'autoplay:play': () => void;
-  'autoplay:playing': ( rate: number ) => void;
-  'autoplay:pause': () => void;
-  'lazyload:loaded': ( img: HTMLImageElement, Slide: SlideComponent ) => void;
+  [ E.EVENT_MOUNTED ]: () => void;
+  [ E.EVENT_READY ]: () => void;
+  [ E.EVENT_CLICK ]: ( Slide: SlideComponent, e: MouseEvent ) => void;
+  [ E.EVENT_MOVE ]: ( index: number, prev: number, dest: number ) => void;
+  [ E.EVENT_MOVED ]: ( index: number, prev: number, dest: number ) => void;
+  [ E.EVENT_ACTIVE ]: ( Slide: SlideComponent ) => void;
+  [ E.EVENT_INACTIVE ]: ( Slide: SlideComponent ) => void;
+  [ E.EVENT_VISIBLE ]: ( Slide: SlideComponent ) => void;
+  [ E.EVENT_HIDDEN ]: ( Slide: SlideComponent ) => void;
+  [ E.EVENT_REFRESH ]: () => void;
+  [ E.EVENT_UPDATED ]: ( options: Options ) => void;
+  [ E.EVENT_RESIZE ]: () => void;
+  [ E.EVENT_RESIZED ]: () => void;
+  [ E.EVENT_DRAG ]: () => void;
+  [ E.EVENT_DRAGGING ]: () => void;
+  [ E.EVENT_DRAGGED ]: () => void;
+  [ E.EVENT_SCROLL ]: () => void;
+  [ E.EVENT_SCROLLED ]: () => void;
+  [ E.EVENT_OVERFLOW ]: ( overflow: boolean ) => void;
+  [ E.EVENT_DESTROY ]: () => void;
+  [ E.EVENT_ARROWS_MOUNTED ]: ( prev: HTMLButtonElement, next: HTMLButtonElement ) => void;
+  [ E.EVENT_ARROWS_UPDATED ]: ( prev: HTMLButtonElement, next: HTMLButtonElement, prevIndex: number, nextIndex: number ) => void;
+  [ E.EVENT_PAGINATION_MOUNTED ]: ( data: PaginationData, item: PaginationItem ) => void;
+  [ E.EVENT_PAGINATION_UPDATED ]: ( data: PaginationData, prev: PaginationItem, curr: PaginationItem ) => void;
+  [ E.EVENT_NAVIGATION_MOUNTED ]: ( splides: Splide[] ) => void;
+  [ E.EVENT_AUTOPLAY_PLAY ]: () => void;
+  [ E.EVENT_AUTOPLAY_PLAYING ]: ( rate: number ) => void;
+  [ E.EVENT_AUTOPLAY_PAUSE ]: () => void;
+  [ E.EVENT_LAZYLOAD_LOADED ]: ( img: HTMLImageElement, Slide: SlideComponent ) => void;
+  [ E.EVENT_LAZYLOAD_ERROR ]: ( img: HTMLImageElement, Slide: SlideComponent ) => void;
+  
+  /** @internal */
+  [ E.EVENT_SLIDE_KEYDOWN ]: ( Slide: SlideComponent, e: KeyboardEvent ) => void;
+  [ E.EVENT_SHIFTED ]: () => void;
+  [ E.EVENT_END_INDEX_CHANGED ]: () => void;
 }
+
+/**
+ * The EventInterface type with Splide `EventMap`.
+ *
+ * @since 5.0.0
+ */
+export type EventInterface = EventInterfaceInstance<EventMap & Record<string, AnyFunction>>;

src/js/types/general.ts

@@ -1,7 +1,7 @@
 import { Splide } from '../core/Splide/Splide';
 import { Components } from './components';
 import { Options } from './options';
-import { EventInterface } from '@splidejs/utils';
+import { EventInterface } from './events';
 
 
 /**
@@ -16,8 +16,8 @@ export type AnyFunction = ( ...args: any[] ) => any;
  *
  * @since 3.0.0
  */
-export type ComponentConstructor = ( Splide: Splide, Components: Components, options: Options, event: EventInterface )
-  => BaseComponent;
+export type ComponentConstructor<R extends BaseComponent = BaseComponent>
+  = ( Splide: Splide, Components: Components, options: Options, event: EventInterface ) => R;
 
 /**
  * The interface for any component.