uikit 3.17.12-dev.f1425d280 → 3.18.1-dev.0856bd8a6

package/dist/js/components/slider.js

@@ -1,4 +1,4 @@
-/*! UIkit 3.17.12-dev.f1425d280 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.18.1-dev.0856bd8a6 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
@@ -66,6 +66,15 @@
         ...options
       });
     }
+    function scroll(options) {
+      return observe(
+        (target, handler) => ({
+          disconnect: util.on(toScrollTargets(target), "scroll", handler, { passive: true })
+        }),
+        options,
+        "scroll"
+      );
+    }
     function observe(observe2, options, emit) {
       return {
         observe: observe2,
@@ -75,6 +84,13 @@
         ...options
       };
     }
+    function toScrollTargets(elements) {
+      return util.toNodes(elements).map((node) => {
+        const { ownerDocument } = node;
+        const parent2 = util.scrollParent(node, true);
+        return parent2 === ownerDocument.scrollingElement ? ownerDocument : parent2;
+      });
+    }
 
     var Class = {
       connected() {
@@ -125,9 +141,7 @@
       events: [
         {
           name: "visibilitychange",
-          el() {
-            return document;
-          },
+          el: () => document,
           filter() {
             return this.autoplay;
           },
@@ -160,6 +174,7 @@
     const pointerDown = "touchstart mousedown";
     const pointerMove = "touchmove mousemove";
     const pointerUp = "touchend touchcancel mouseup click input scroll";
+    const preventClick = (e) => e.preventDefault();
     var SliderDrag = {
       props: {
         draggable: Boolean
@@ -187,7 +202,7 @@
             return `${this.selList} > *`;
           },
           handler(e) {
-            if (!this.draggable || !util.isTouch(e) && hasSelectableText(e.target) || e.target.closest(util.selInput) || e.button > 0 || this.length < 2) {
+            if (!this.draggable || this.parallax || !util.isTouch(e) && hasSelectableText(e.target) || e.target.closest(util.selInput) || e.button > 0 || this.length < 2) {
               return;
             }
             this.start(e);
@@ -231,20 +246,22 @@
           if (distance === 0 || this.prevPos === this.pos || !this.dragging && Math.abs(distance) < this.threshold) {
             return;
           }
-          util.css(this.list, "pointerEvents", "none");
+          if (!this.dragging) {
+            util.on(this.list, "click", preventClick, pointerOptions);
+          }
           e.cancelable && e.preventDefault();
           this.dragging = true;
           this.dir = distance < 0 ? 1 : -1;
           let { slides, prevIndex } = this;
           let dis = Math.abs(distance);
           let nextIndex = this.getIndex(prevIndex + this.dir);
-          let width = this._getDistance(prevIndex, nextIndex);
+          let width = getDistance.call(this, prevIndex, nextIndex);
           while (nextIndex !== prevIndex && dis > width) {
             this.drag -= width * this.dir;
             prevIndex = nextIndex;
             dis -= width;
             nextIndex = this.getIndex(prevIndex + this.dir);
-            width = this._getDistance(prevIndex, nextIndex);
+            width = getDistance.call(this, prevIndex, nextIndex);
           }
           this.percent = dis / width;
           const prev = slides[prevIndex];
@@ -267,14 +284,14 @@
           if (changed) {
             this.prevIndex = prevIndex;
             this.index = nextIndex;
-            !edge && util.trigger(prev, "beforeitemhide", [this]);
+            if (!edge) {
+              util.trigger(prev, "beforeitemhide", [this]);
+              util.trigger(prev, "itemhide", [this]);
+            }
             util.trigger(next, "beforeitemshow", [this]);
-          }
-          this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
-          if (changed) {
-            !edge && util.trigger(prev, "itemhide", [this]);
             util.trigger(next, "itemshow", [this]);
           }
+          this._transitioner = this._translate(Math.abs(this.percent), prev, !edge && next);
         },
         end() {
           util.off(document, pointerMove, this.move, pointerOptions);
@@ -298,14 +315,15 @@
               );
             }
           }
-          util.css(this.list, { userSelect: "", pointerEvents: "" });
+          setTimeout(() => util.off(this.list, "click", preventClick, pointerOptions));
+          util.css(this.list, { userSelect: "" });
           this.drag = this.percent = null;
-        },
-        _getDistance(prev, next) {
-          return this._getTransitioner(prev, prev !== next && next).getDistance() || this.slides[prev].offsetWidth;
         }
       }
     };
+    function getDistance(prev, next) {
+      return this._getTransitioner(prev, prev !== next && next).getDistance() || this.slides[prev].offsetWidth;
+    }
     function hasSelectableText(el) {
       return util.css(el, "userSelect") !== "none" && util.toArray(el.childNodes).some((el2) => el2.nodeType === 3 && el2.textContent.trim());
     }
@@ -440,6 +458,9 @@
           delegate() {
             return this.selNavItem;
           },
+          filter() {
+            return !this.parallax;
+          },
           handler(e) {
             if (e.target.closest("a,button") && (e.type === "click" || e.keyCode === keyMap.SPACE)) {
               e.preventDefault();
@@ -456,6 +477,9 @@
           delegate() {
             return this.selNavItem;
           },
+          filter() {
+            return !this.parallax;
+          },
           handler(e) {
             const { current, keyCode } = e;
             const cmd = util.data(current, this.attrItem);
@@ -480,9 +504,10 @@
               const item = util.toNumber(cmd);
               const active = item === index;
               util.toggleClass(el, this.clsActive, active);
+              util.toggleClass(button, "uk-disabled", this.parallax);
               util.attr(button, {
                 "aria-selected": active,
-                tabindex: active ? null : -1
+                tabindex: active && !this.parallax ? null : -1
               });
               if (active && button && util.matches(util.parent(el), ":focus-within")) {
                 button.focus();
@@ -502,7 +527,7 @@
     var Slider = {
       mixins: [SliderAutoplay, SliderDrag, SliderNav, I18n],
       props: {
-        clsActivated: Boolean,
+        clsActivated: String,
         easing: String,
         index: Number,
         finite: Boolean,
@@ -517,7 +542,10 @@
         stack: [],
         percent: 0,
         clsActive: "uk-active",
-        clsActivated: false,
+        clsActivated: "",
+        clsEnter: "uk-slide-enter",
+        clsLeave: "uk-slide-leave",
+        clsSlideActive: "uk-slide-active",
         Transitioner: false,
         transitionOptions: {}
       }),
@@ -550,10 +578,24 @@
         }
       },
       observe: resize(),
+      events: {
+        itemshow({ target }) {
+          util.addClass(target, this.clsEnter, this.clsSlideActive);
+        },
+        itemshown({ target }) {
+          util.removeClass(target, this.clsEnter);
+        },
+        itemhide({ target }) {
+          util.addClass(target, this.clsLeave);
+        },
+        itemhidden({ target }) {
+          util.removeClass(target, this.clsLeave, this.clsSlideActive);
+        }
+      },
       methods: {
         show(index, force = false) {
           var _a;
-          if (this.dragging || !this.length) {
+          if (this.dragging || !this.length || this.parallax) {
             return;
           }
           const { stack } = this;
@@ -645,10 +687,650 @@
       return 0.5 * x + 300;
     }
 
+    var Media = {
+      props: {
+        media: Boolean
+      },
+      data: {
+        media: false
+      },
+      connected() {
+        const media = toMedia(this.media, this.$el);
+        this.matchMedia = true;
+        if (media) {
+          this.mediaObj = window.matchMedia(media);
+          const handler = () => {
+            this.matchMedia = this.mediaObj.matches;
+            util.trigger(this.$el, util.createEvent("mediachange", false, true, [this.mediaObj]));
+          };
+          this.offMediaObj = util.on(this.mediaObj, "change", () => {
+            handler();
+            this.$emit("resize");
+          });
+          handler();
+        }
+      },
+      disconnected() {
+        var _a;
+        (_a = this.offMediaObj) == null ? void 0 : _a.call(this);
+      }
+    };
+    function toMedia(value, element) {
+      if (util.isString(value)) {
+        if (util.startsWith(value, "@")) {
+          value = util.toFloat(util.css(element, `--uk-breakpoint-${value.substr(1)}`));
+        } else if (isNaN(value)) {
+          return value;
+        }
+      }
+      return value && util.isNumeric(value) ? `(min-width: ${value}px)` : "";
+    }
+
+    function startsWith(str, search) {
+      var _a;
+      return (_a = str == null ? void 0 : str.startsWith) == null ? void 0 : _a.call(str, search);
+    }
+    const { isArray, from: toArray } = Array;
+    function isFunction(obj) {
+      return typeof obj === "function";
+    }
+    function isObject(obj) {
+      return obj !== null && typeof obj === "object";
+    }
+    function isWindow(obj) {
+      return isObject(obj) && obj === obj.window;
+    }
+    function isDocument(obj) {
+      return nodeType(obj) === 9;
+    }
+    function isNode(obj) {
+      return nodeType(obj) >= 1;
+    }
+    function nodeType(obj) {
+      return !isWindow(obj) && isObject(obj) && obj.nodeType;
+    }
+    function isString(value) {
+      return typeof value === "string";
+    }
+    function isUndefined(value) {
+      return value === void 0;
+    }
+    function toNode(element) {
+      return toNodes(element)[0];
+    }
+    function toNodes(element) {
+      return isNode(element) ? [element] : Array.from(element || []).filter(isNode);
+    }
+    function memoize(fn) {
+      const cache = /* @__PURE__ */ Object.create(null);
+      return (key, ...args) => cache[key] || (cache[key] = fn(key, ...args));
+    }
+
+    function attr(element, name, value) {
+      var _a;
+      if (isObject(name)) {
+        for (const key in name) {
+          attr(element, key, name[key]);
+        }
+        return;
+      }
+      if (isUndefined(value)) {
+        return (_a = toNode(element)) == null ? void 0 : _a.getAttribute(name);
+      } else {
+        for (const el of toNodes(element)) {
+          if (isFunction(value)) {
+            value = value.call(el, attr(el, name));
+          }
+          if (value === null) {
+            removeAttr(el, name);
+          } else {
+            el.setAttribute(name, value);
+          }
+        }
+      }
+    }
+    function removeAttr(element, name) {
+      toNodes(element).forEach((element2) => element2.removeAttribute(name));
+    }
+
+    function parent(element) {
+      var _a;
+      return (_a = toNode(element)) == null ? void 0 : _a.parentElement;
+    }
+    function filter(element, selector) {
+      return toNodes(element).filter((element2) => matches(element2, selector));
+    }
+    function matches(element, selector) {
+      return toNodes(element).some((element2) => element2.matches(selector));
+    }
+    function children(element, selector) {
+      element = toNode(element);
+      const children2 = element ? toArray(element.children) : [];
+      return selector ? filter(children2, selector) : children2;
+    }
+    function index(element, ref) {
+      return ref ? toNodes(element).indexOf(toNode(ref)) : children(parent(element)).indexOf(element);
+    }
+
+    function findAll(selector, context) {
+      return toNodes(_query(selector, toNode(context), "querySelectorAll"));
+    }
+    const contextSelectorRe = /(^|[^\\],)\s*[!>+~-]/;
+    const isContextSelector = memoize((selector) => selector.match(contextSelectorRe));
+    const contextSanitizeRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
+    const sanatize = memoize((selector) => selector.replace(contextSanitizeRe, "$1 *"));
+    function _query(selector, context = document, queryFn) {
+      if (!selector || !isString(selector)) {
+        return selector;
+      }
+      selector = sanatize(selector);
+      if (isContextSelector(selector)) {
+        const split = splitSelector(selector);
+        selector = "";
+        for (let sel of split) {
+          let ctx = context;
+          if (sel[0] === "!") {
+            const selectors = sel.substr(1).trim().split(" ");
+            ctx = parent(context).closest(selectors[0]);
+            sel = selectors.slice(1).join(" ").trim();
+            if (!sel.length && split.length === 1) {
+              return ctx;
+            }
+          }
+          if (sel[0] === "-") {
+            const selectors = sel.substr(1).trim().split(" ");
+            const prev = (ctx || context).previousElementSibling;
+            ctx = matches(prev, sel.substr(1)) ? prev : null;
+            sel = selectors.slice(1).join(" ");
+          }
+          if (ctx) {
+            selector += `${selector ? "," : ""}${domPath(ctx)} ${sel}`;
+          }
+        }
+        if (!isDocument(context)) {
+          context = context.ownerDocument;
+        }
+      }
+      try {
+        return context[queryFn](selector);
+      } catch (e) {
+        return null;
+      }
+    }
+    const selectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
+    const splitSelector = memoize(
+      (selector) => selector.match(selectorRe).map((selector2) => selector2.replace(/,$/, "").trim())
+    );
+    function domPath(element) {
+      const names = [];
+      while (element.parentNode) {
+        const id = attr(element, "id");
+        if (id) {
+          names.unshift(`#${escape(id)}`);
+          break;
+        } else {
+          let { tagName } = element;
+          if (tagName !== "HTML") {
+            tagName += `:nth-child(${index(element) + 1})`;
+          }
+          names.unshift(tagName);
+          element = element.parentNode;
+        }
+      }
+      return names.join(" > ");
+    }
+    function escape(css) {
+      return isString(css) ? CSS.escape(css) : "";
+    }
+
+    const singleTagRe = /^<(\w+)\s*\/?>(?:<\/\1>)?$/;
+    function fragment(html2) {
+      const matches = singleTagRe.exec(html2);
+      if (matches) {
+        return document.createElement(matches[1]);
+      }
+      const container = document.createElement("template");
+      container.innerHTML = html2.trim();
+      return unwrapSingle(container.content.childNodes);
+    }
+    function unwrapSingle(nodes) {
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+    function $$(selector, context) {
+      return isHtml(selector) ? toNodes(fragment(selector)) : findAll(selector, context);
+    }
+    function isHtml(str) {
+      return isString(str) && startsWith(str.trim(), "<");
+    }
+
+    function getMaxPathLength(el) {
+      return Math.ceil(
+        Math.max(
+          0,
+          ...$$("[stroke]", el).map((stroke) => {
+            try {
+              return stroke.getTotalLength();
+            } catch (e) {
+              return 0;
+            }
+          })
+        )
+      );
+    }
+
+    const props = {
+      x: transformFn,
+      y: transformFn,
+      rotate: transformFn,
+      scale: transformFn,
+      color: colorFn,
+      backgroundColor: colorFn,
+      borderColor: colorFn,
+      blur: filterFn,
+      hue: filterFn,
+      fopacity: filterFn,
+      grayscale: filterFn,
+      invert: filterFn,
+      saturate: filterFn,
+      sepia: filterFn,
+      opacity: cssPropFn,
+      stroke: strokeFn,
+      bgx: backgroundFn,
+      bgy: backgroundFn
+    };
+    const { keys } = Object;
+    ({
+      mixins: [Media],
+      props: fillObject(keys(props), "list"),
+      data: fillObject(keys(props), void 0),
+      computed: {
+        props(properties, $el) {
+          const stops = {};
+          for (const prop in properties) {
+            if (prop in props && !util.isUndefined(properties[prop])) {
+              stops[prop] = properties[prop].slice();
+            }
+          }
+          const result = {};
+          for (const prop in stops) {
+            result[prop] = props[prop](prop, $el, stops[prop], stops);
+          }
+          return result;
+        }
+      },
+      events: {
+        load() {
+          this.$emit();
+        }
+      },
+      methods: {
+        reset() {
+          for (const prop in this.getCss(0)) {
+            util.css(this.$el, prop, "");
+          }
+        },
+        getCss(percent) {
+          const css2 = {};
+          for (const prop in this.props) {
+            this.props[prop](css2, util.clamp(percent));
+          }
+          css2.willChange = Object.keys(css2).map(util.propName).join(",");
+          return css2;
+        }
+      }
+    });
+    function transformFn(prop, el, stops) {
+      let unit = getUnit(stops) || { x: "px", y: "px", rotate: "deg" }[prop] || "";
+      let transformFn2;
+      if (prop === "x" || prop === "y") {
+        prop = `translate${util.ucfirst(prop)}`;
+        transformFn2 = (stop) => util.toFloat(util.toFloat(stop).toFixed(unit === "px" ? 0 : 6));
+      } else if (prop === "scale") {
+        unit = "";
+        transformFn2 = (stop) => {
+          var _a;
+          return getUnit([stop]) ? util.toPx(stop, "width", el, true) / el[`offset${((_a = stop.endsWith) == null ? void 0 : _a.call(stop, "vh")) ? "Height" : "Width"}`] : util.toFloat(stop);
+        };
+      }
+      if (stops.length === 1) {
+        stops.unshift(prop === "scale" ? 1 : 0);
+      }
+      stops = parseStops(stops, transformFn2);
+      return (css2, percent) => {
+        css2.transform = `${css2.transform || ""} ${prop}(${getValue(stops, percent)}${unit})`;
+      };
+    }
+    function colorFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ""));
+      }
+      stops = parseStops(stops, (stop) => parseColor(el, stop));
+      return (css2, percent) => {
+        const [start, end, p] = getStop(stops, percent);
+        const value = start.map((value2, i) => {
+          value2 += p * (end[i] - value2);
+          return i === 3 ? util.toFloat(value2) : parseInt(value2, 10);
+        }).join(",");
+        css2[prop] = `rgba(${value})`;
+      };
+    }
+    function parseColor(el, color) {
+      return getCssValue(el, "color", color).split(/[(),]/g).slice(1, -1).concat(1).slice(0, 4).map(util.toFloat);
+    }
+    function filterFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
+      }
+      const unit = getUnit(stops) || { blur: "px", hue: "deg" }[prop] || "%";
+      prop = { fopacity: "opacity", hue: "hue-rotate" }[prop] || prop;
+      stops = parseStops(stops);
+      return (css2, percent) => {
+        const value = getValue(stops, percent);
+        css2.filter = `${css2.filter || ""} ${prop}(${value + unit})`;
+      };
+    }
+    function cssPropFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(getCssValue(el, prop, ""));
+      }
+      stops = parseStops(stops);
+      return (css2, percent) => {
+        css2[prop] = getValue(stops, percent);
+      };
+    }
+    function strokeFn(prop, el, stops) {
+      if (stops.length === 1) {
+        stops.unshift(0);
+      }
+      const unit = getUnit(stops);
+      const length = getMaxPathLength(el);
+      stops = parseStops(stops.reverse(), (stop) => {
+        stop = util.toFloat(stop);
+        return unit === "%" ? stop * length / 100 : stop;
+      });
+      if (!stops.some(([value]) => value)) {
+        return util.noop;
+      }
+      util.css(el, "strokeDasharray", length);
+      return (css2, percent) => {
+        css2.strokeDashoffset = getValue(stops, percent);
+      };
+    }
+    function backgroundFn(prop, el, stops, props2) {
+      if (stops.length === 1) {
+        stops.unshift(0);
+      }
+      const attr = prop === "bgy" ? "height" : "width";
+      props2[prop] = parseStops(stops, (stop) => util.toPx(stop, attr, el));
+      const bgProps = ["bgx", "bgy"].filter((prop2) => prop2 in props2);
+      if (bgProps.length === 2 && prop === "bgx") {
+        return util.noop;
+      }
+      if (getCssValue(el, "backgroundSize", "") === "cover") {
+        return backgroundCoverFn(prop, el, stops, props2);
+      }
+      const positions = {};
+      for (const prop2 of bgProps) {
+        positions[prop2] = getBackgroundPos(el, prop2);
+      }
+      return setBackgroundPosFn(bgProps, positions, props2);
+    }
+    function backgroundCoverFn(prop, el, stops, props2) {
+      const dimImage = getBackgroundImageDimensions(el);
+      if (!dimImage.width) {
+        return util.noop;
+      }
+      const dimEl = {
+        width: el.offsetWidth,
+        height: el.offsetHeight
+      };
+      const bgProps = ["bgx", "bgy"].filter((prop2) => prop2 in props2);
+      const positions = {};
+      for (const prop2 of bgProps) {
+        const values = props2[prop2].map(([value]) => value);
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const down = values.indexOf(min) < values.indexOf(max);
+        const diff = max - min;
+        positions[prop2] = `${(down ? -diff : 0) - (down ? min : max)}px`;
+        dimEl[prop2 === "bgy" ? "height" : "width"] += diff;
+      }
+      const dim = util.Dimensions.cover(dimImage, dimEl);
+      for (const prop2 of bgProps) {
+        const attr = prop2 === "bgy" ? "height" : "width";
+        const overflow = dim[attr] - dimEl[attr];
+        positions[prop2] = `max(${getBackgroundPos(el, prop2)},-${overflow}px) + ${positions[prop2]}`;
+      }
+      const fn = setBackgroundPosFn(bgProps, positions, props2);
+      return (css2, percent) => {
+        fn(css2, percent);
+        css2.backgroundSize = `${dim.width}px ${dim.height}px`;
+        css2.backgroundRepeat = "no-repeat";
+      };
+    }
+    function getBackgroundPos(el, prop) {
+      return getCssValue(el, `background-position-${prop.substr(-1)}`, "");
+    }
+    function setBackgroundPosFn(bgProps, positions, props2) {
+      return function(css2, percent) {
+        for (const prop of bgProps) {
+          const value = getValue(props2[prop], percent);
+          css2[`background-position-${prop.substr(-1)}`] = `calc(${positions[prop]} + ${value}px)`;
+        }
+      };
+    }
+    const dimensions = {};
+    function getBackgroundImageDimensions(el) {
+      const src = util.css(el, "backgroundImage").replace(/^none|url\(["']?(.+?)["']?\)$/, "$1");
+      if (dimensions[src]) {
+        return dimensions[src];
+      }
+      const image = new Image();
+      if (src) {
+        image.src = src;
+        if (!image.naturalWidth) {
+          image.onload = () => {
+            dimensions[src] = toDimensions(image);
+            util.trigger(el, util.createEvent("load", false));
+          };
+          return toDimensions(image);
+        }
+      }
+      return dimensions[src] = toDimensions(image);
+    }
+    function toDimensions(image) {
+      return {
+        width: image.naturalWidth,
+        height: image.naturalHeight
+      };
+    }
+    function parseStops(stops, fn = util.toFloat) {
+      const result = [];
+      const { length } = stops;
+      let nullIndex = 0;
+      for (let i = 0; i < length; i++) {
+        let [value, percent] = util.isString(stops[i]) ? stops[i].trim().split(/ (?![^(]*\))/) : [stops[i]];
+        value = fn(value);
+        percent = percent ? util.toFloat(percent) / 100 : null;
+        if (i === 0) {
+          if (percent === null) {
+            percent = 0;
+          } else if (percent) {
+            result.push([value, 0]);
+          }
+        } else if (i === length - 1) {
+          if (percent === null) {
+            percent = 1;
+          } else if (percent !== 1) {
+            result.push([value, percent]);
+            percent = 1;
+          }
+        }
+        result.push([value, percent]);
+        if (percent === null) {
+          nullIndex++;
+        } else if (nullIndex) {
+          const leftPercent = result[i - nullIndex - 1][1];
+          const p = (percent - leftPercent) / (nullIndex + 1);
+          for (let j = nullIndex; j > 0; j--) {
+            result[i - j][1] = leftPercent + p * (nullIndex - j + 1);
+          }
+          nullIndex = 0;
+        }
+      }
+      return result;
+    }
+    function getStop(stops, percent) {
+      const index = util.findIndex(stops.slice(1), ([, targetPercent]) => percent <= targetPercent) + 1;
+      return [
+        stops[index - 1][0],
+        stops[index][0],
+        (percent - stops[index - 1][1]) / (stops[index][1] - stops[index - 1][1])
+      ];
+    }
+    function getValue(stops, percent) {
+      const [start, end, p] = getStop(stops, percent);
+      return start + Math.abs(start - end) * p * (start < end ? 1 : -1);
+    }
+    const unitRe = /^-?\d+(?:\.\d+)?(\S+)?/;
+    function getUnit(stops, defaultUnit) {
+      var _a;
+      for (const stop of stops) {
+        const match = (_a = stop.match) == null ? void 0 : _a.call(stop, unitRe);
+        if (match) {
+          return match[1];
+        }
+      }
+      return defaultUnit;
+    }
+    function getCssValue(el, prop, value) {
+      const prev = el.style[prop];
+      const val = util.css(util.css(el, prop, value), prop);
+      el.style[prop] = prev;
+      return val;
+    }
+    function fillObject(keys2, value) {
+      return keys2.reduce((data, prop) => {
+        data[prop] = value;
+        return data;
+      }, {});
+    }
+    function ease(percent, easing) {
+      return easing >= 0 ? Math.pow(percent, easing + 1) : 1 - Math.pow(1 - percent, 1 - easing);
+    }
+
+    var SliderParallax = {
+      props: {
+        parallax: Boolean,
+        parallaxTarget: Boolean,
+        parallaxStart: String,
+        parallaxEnd: String,
+        parallaxEasing: Number
+      },
+      data: {
+        parallax: false,
+        parallaxTarget: false,
+        parallaxStart: 0,
+        parallaxEnd: 0,
+        parallaxEasing: 0
+      },
+      observe: [
+        resize({
+          target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
+          filter: ({ parallax }) => parallax
+        }),
+        scroll({ filter: ({ parallax }) => parallax })
+      ],
+      computed: {
+        parallaxTarget({ parallaxTarget }, $el) {
+          return parallaxTarget && util.query(parallaxTarget, $el) || this.list;
+        }
+      },
+      update: {
+        write() {
+          if (!this.parallax) {
+            return;
+          }
+          const target = this.parallaxTarget;
+          const start = util.toPx(this.parallaxStart, "height", target, true);
+          const end = util.toPx(this.parallaxEnd, "height", target, true);
+          const percent = ease(util.scrolledOver(target, start, end), this.parallaxEasing);
+          const [prevIndex, slidePercent] = this.getIndexAt(percent);
+          const nextIndex = this.getValidIndex(prevIndex + Math.ceil(slidePercent));
+          const prev = this.slides[prevIndex];
+          const next = this.slides[nextIndex];
+          const { triggerShow, triggerShown, triggerHide, triggerHidden } = useTriggers(this);
+          if (~this.prevIndex) {
+            for (const i of /* @__PURE__ */ new Set([this.index, this.prevIndex])) {
+              if (!util.includes([nextIndex, prevIndex], i)) {
+                triggerHide(this.slides[i]);
+                triggerHidden(this.slides[i]);
+              }
+            }
+          }
+          const changed = this.prevIndex !== prevIndex || this.index !== nextIndex;
+          this.dir = 1;
+          this.prevIndex = prevIndex;
+          this.index = nextIndex;
+          if (prev !== next) {
+            triggerHide(prev);
+          }
+          triggerShow(next);
+          if (changed) {
+            triggerShown(prev);
+          }
+          this._translate(prev === next ? 1 : slidePercent, prev, next);
+        },
+        events: ["scroll", "resize"]
+      },
+      methods: {
+        getIndexAt(percent) {
+          const index = percent * (this.length - 1);
+          return [Math.floor(index), index % 1];
+        }
+      }
+    };
+    function useTriggers(cmp) {
+      const { clsSlideActive, clsEnter, clsLeave } = cmp;
+      return { triggerShow, triggerShown, triggerHide, triggerHidden };
+      function triggerShow(el) {
+        if (util.hasClass(el, clsLeave)) {
+          triggerHide(el);
+          triggerHidden(el);
+        }
+        if (!util.hasClass(el, clsSlideActive)) {
+          util.trigger(el, "beforeitemshow", [cmp]);
+          util.trigger(el, "itemshow", [cmp]);
+        }
+      }
+      function triggerShown(el) {
+        if (util.hasClass(el, clsEnter)) {
+          util.trigger(el, "itemshown", [cmp]);
+        }
+      }
+      function triggerHide(el) {
+        if (!util.hasClass(el, clsSlideActive)) {
+          triggerShow(el);
+        }
+        if (util.hasClass(el, clsEnter)) {
+          triggerShown(el);
+        }
+        if (!util.hasClass(el, clsLeave)) {
+          util.trigger(el, "beforeitemhide", [cmp]);
+          util.trigger(el, "itemhide", [cmp]);
+        }
+      }
+      function triggerHidden(el) {
+        if (util.hasClass(el, clsLeave)) {
+          util.trigger(el, "itemhidden", [cmp]);
+        }
+      }
+    }
+
     var SliderReactive = {
       update: {
         write() {
-          if (this.stack.length || this.dragging) {
+          if (this.stack.length || this.dragging || this.parallax) {
             return;
           }
           const index = this.getValidIndex();
@@ -666,7 +1348,12 @@
       observe: lazyload({
         target: ({ slides }) => slides,
         targets: (instance) => instance.getAdjacentSlides()
-      })
+      }),
+      methods: {
+        getAdjacentSlides() {
+          return [1, -1].map((i) => this.slides[this.getIndex(this.index + i)]);
+        }
+      }
     };
 
     function translate(value = 0, unit = "%") {
@@ -795,7 +1482,7 @@
     }
 
     var Component = {
-      mixins: [Class, Slider, SliderReactive, SliderPreload],
+      mixins: [Class, Slider, SliderReactive, SliderParallax, SliderPreload],
       props: {
         center: Boolean,
         sets: Boolean
@@ -810,9 +1497,6 @@
         Transitioner
       },
       computed: {
-        avgWidth() {
-          return getWidth(this.list) / this.length;
-        },
         finite({ finite }) {
           return finite || isFinite(this.list, this.center);
         },
@@ -834,7 +1518,7 @@
           return ~index ? index : this.length - 1;
         },
         sets({ sets: enabled }) {
-          if (!enabled) {
+          if (!enabled || this.parallax) {
             return;
           }
           let left = 0;
@@ -846,7 +1530,7 @@
               left = 0;
             }
             if (this.center) {
-              if (left < width / 2 && left + slideWidth + util.dimensions(util.getIndex(+i + 1, this.slides)).width / 2 > width / 2) {
+              if (left < width / 2 && left + slideWidth + util.dimensions(this.slides[util.getIndex(+i + 1, this.slides)]).width / 2 > width / 2) {
                 sets.push(+i);
                 left = width / 2 - slideWidth / 2;
               }
@@ -883,10 +1567,7 @@
               el.hidden = !this.maxIndex || index > this.maxIndex || this.sets && !util.includes(this.sets, index);
             }
           }
-          if (this.length && !this.dragging && !this.stack.length) {
-            this.reorder();
-            this._translate(1);
-          }
+          this.reorder();
           this.updateActiveClasses();
         },
         events: ["resize"]
@@ -907,13 +1588,15 @@
             return;
           }
           const index = this.dir < 0 || !this.slides[this.prevIndex] ? this.index : this.prevIndex;
-          this.duration = speedUp(this.avgWidth / this.velocity) * (util.dimensions(this.slides[index]).width / this.avgWidth);
+          const avgWidth = getWidth(this.list) / this.length;
+          this.duration = speedUp(avgWidth / this.velocity) * (util.dimensions(this.slides[index]).width / avgWidth);
           this.reorder();
         },
         itemshow() {
           if (~this.prevIndex) {
             util.addClass(this._getTransitioner().getItemIn(), this.clsActive);
           }
+          this.updateActiveClasses(this.prevIndex);
         },
         itemshown() {
           this.updateActiveClasses();
@@ -946,11 +1629,11 @@
             width -= util.dimensions(slide).width;
           }
         },
-        updateActiveClasses() {
-          const actives = this._getTransitioner(this.index).getActives();
+        updateActiveClasses(currentIndex = this.index) {
+          const actives = this._getTransitioner(currentIndex).getActives();
           const activeClasses = [
             this.clsActive,
-            (!this.sets || util.includes(this.sets, util.toFloat(this.index))) && this.clsActivated || ""
+            !this.sets || util.includes(this.sets, util.toFloat(this.index)) ? this.clsActivated : ""
           ];
           for (const slide of this.slides) {
             const active = util.includes(actives, slide);
@@ -996,6 +1679,21 @@
             } while (this.length > j && currentLeft > left && currentLeft < right);
           }
           return Array.from(slides);
+        },
+        getIndexAt(percent) {
+          let index = -1;
+          const firstSlideWidth = util.dimensions(this.slides[0]).width;
+          const lastSlideWidth = util.dimensions(util.last(this.slides)).width;
+          const scrollDist = getWidth(this.list) - (this.center ? firstSlideWidth / 2 + lastSlideWidth / 2 : lastSlideWidth);
+          let dist = percent * scrollDist;
+          let slidePercent = 0;
+          do {
+            const slideWidth = util.dimensions(this.slides[++index]).width;
+            const slideDist = this.center ? slideWidth / 2 + util.dimensions(this.slides[index + 1]).width / 2 : slideWidth;
+            slidePercent = dist / slideDist % 1;
+            dist -= slideDist;
+          } while (dist >= 0 && index < this.maxIndex);
+          return [index, slidePercent];
         }
       }
     };