Merge branch 'v3'

# Conflicts:
#	README.md

.editorconfig

@@ -1,9 +1,9 @@
 root = true
 
 [*]
-indent_style = tab
+indent_style = space
 indent_size = 2
 charset = utf-8
 end_of_line = lf
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = true

.eslintrc

@@ -1,27 +1,113 @@
 {
-  "extends": "eslint:recommended",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
   "env": {
-    "browser": true,
-    "jest": true,
-    "node": true
+    "browser": true
   },
+  "ignorePatterns": [
+    "*.esm.js"
+  ],
   "rules": {
-    "array-bracket-spacing": [ "error", "always" ],
+    "semi": [
+      "error",
+      "always",
+      {
+        "omitLastInOneLineBlock": true
+      }
+    ],
+    "space-in-parens": [
+      "error",
+      "always"
+    ],
+    "array-bracket-spacing": [
+      "error",
+      "always"
+    ],
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
+    "computed-property-spacing": [
+      "error",
+      "always"
+    ],
     "camelcase": "error",
-    "comma-dangle": [ "error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "never"
-    } ],
-    "comma-spacing": [ "error", { "before": false, "after": true } ],
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "never"
+      }
+    ],
+    "comma-spacing": [
+      "error",
+      {
+        "before": false,
+        "after": true
+      }
+    ],
     "eqeqeq": "error",
-    "indent": [ "error", "tab", { "SwitchCase": 1 } ],
-    "no-console": [ "error", { "allow": [ "warn", "error" ] } ]
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1,
+        "VariableDeclarator": "first"
+      }
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "error"
+        ]
+      }
+    ],
+    "no-empty-function": [
+      "error",
+      {
+        "allow": [
+          "methods"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-empty-function": [
+      "error",
+      {
+        "allow": [
+          "methods"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/explicit-module-boundary-types": [
+      "error",
+      {
+        "allowArgumentsExplicitlyTypedAsAny": true
+      }
+    ],
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "types": {
+          "object": false
+        }
+      }
+    ]
   }
-}
+}

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 
 local/
+
+.idea/

.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "plugins": [
+    "stylelint-scss",
+    "stylelint-order"
+  ],
+  "rules": {
+    "number-leading-zero": "never",
+    "max-nesting-depth": 7,
+    "selector-max-compound-selectors": null,
+    "block-no-empty": null,
+    "function-parentheses-space-inside": "always"
+  }
+}

README.md

@@ -1,200 +1,54 @@
-# Splide
-<p align="center">
-  <a href="https://splidejs.com/" target="_blank">
-    <img src="images/hero.png">
-  </a>
-</p>
-
-**[Splide](https://splidejs.com/) is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.**
-
-* [Demo](https://splidejs.com/)
-* [Documents](https://splidejs.com/category/users-guide/)
-
-## 🚨 Splide v3.0.0 Is Coming
-Splide is planning to release the major version update soon (in a few days). I'm carefully building it with trying not to break sliders using old versions, but you should **lock the version** just in case.
-
-I didn't expect so many people pick my library, but now it hits more than 240M per month in jsDelivr.
-Thank you guys! 😄
-
-### What's The Difference?
-* Rewrite all scripts by TypeScript
-* Reduce the code size (29KB -> around 26KB), keeping all features of the v2
-* Add 300+ test cases to make the library more stable
-* Implement the free drag mode
-* Implement the simple mouse wheel navigation for a vertical slider
-* Support sync with multiple sliders
-* Support a placeholder image for lazy loading
-* Support the `min-width` media query for breakpoints
-* Handles passive event listeners where Lighthouse complains
-* Solve the `window` reference error for SSR
-* And more
-
-If you are interested in the new version, check out the v3 branch 😎.
-
-### Roadmap
-1. ✔️Rewrite Splide
-2. ✔️Rewrite Video Extension
-3. ✔️Rewrite URL Hash Extension
-4. ✔️Rewrite Grid Extension
-5. ✔️Test and debug
-6. Update the website and documents (I'm here)
-7. Release
-8. Rewrite React component
-9. Rewrite Vue component
-10. All done 🎉
-
-### Caveats
-* Methods of components will be drastically changed
-* Some minor options will be removed
-* All issues and PRs will be closed after the release
-
-## v2 Features
-* Pure JavaScript without any dependencies
-* Small size, less than 29kB(11kB gzipped)
-* Flexible and extensible
-* Multiple slides
-* Slide or fade transition by CSS
-* Responsive, supporting breakpoints
-* Accepting CSS relative units, such as vw, %, rem, etc
-* No need to crop images
-* Autoplay with progress bar and play/pause buttons
-* "Right to left" and vertical direction
-* Mouse drag and touch swipe
-* Nested slider
-* Lazy loading
-* Thumbnail slider
-* Accessibility friendly, supporting keyboard control and ARIA attributes
-* Dynamically adding/removing slides
-* Internet Explorer 10
-
-## Installation
-There are 3 ways to install the Splide on your site.
-* NPM
-* Download
-* CDN
+<div align="center">
+<a href="https://splidejs.com">
+  <img alt="Splide" src="./images/logo.svg" width="70">
+</a>
 
-Only the NPM way is explained in the following steps. Visit [this page](https://splidejs.com/getting-started/) for other methods.
+<h1>Splide</h1>
 
-1. Get the latest version by NPM:
-    ```bash
-    $ npm install @splidejs/splide
-    ```
-1. Link to the stylesheet:
-    ```html
-    <link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
-    ```
-1. Write HTML for building a slider:
-    ```html
-    <div id="splide" class="splide">
-      <div class="splide__track">
-        <ul class="splide__list">
-          <li class="splide__slide">Slide 01</li>
-          <li class="splide__slide">Slide 02</li>
-          <li class="splide__slide">Slide 03</li>
-        </ul>
-      </div>
-    </div>
-    ```
-1. Initialize Splide. The selector accepts an ID, a class name or an Element itself:
-    ```javascript
-    import Splide from '@splidejs/splide';
-    new Splide( '#splide' ).mount();
-    ```
-    Note that only the first element will be initialized even if using a class name.
-
-See the [Integration](#integration) section for your Vue or React project.
-
-## Options
-### Changing Options
-Pass an object to the second argument of the `Splide` constructor:
-```javascript
-new Splide( '#splide', {
-  type   : 'loop',
-  perPage: 3,
-} );
-```
-Or set a `data-splide` attribute to a root element in a JSON format:
-```html
-<div id="splide" class="splide" data-splide='{"type":"loop","perPage":3}'>
-</div>
-```
-### Available Options
-Here is a list of options and brief explanations. Visit [this page](https://splidejs.com/options/) for more details.
-
-* **type**: Determine a slider type.
-* **rewind**: Whether to rewind a slider before the first slide or after the last one.
-* **speed**: Transition speed in milliseconds.
-* **rewindSpeed**: Transition speed on rewind in milliseconds.
-* **waitForTransition**: Whether to prevent any actions while a slider is transitioning.
-* **width**: Define slider max width.
-* **height**: Define slider height.
-* **fixedWidth**: Fix width of slides.
-* **fixedHeight**: Fix height of slides.
-* **heightRatio**: Determine height of slides by ratio to a slider width.
-* **autoWidth**: If true, slide width will be determined by the element width itself. This is for a horizontal slider.
-* **autoHeight**: If true, slide height will be determined by the element height itself. This is for a vertical slider.
-* **perPage**: Determine how many slides should be displayed per page.
-* **perMove**: Determine how many slides should be moved when a slider goes to next or previous page.
-* **clones**: Manually determine how many clones should be generated on one side.
-* **start**: Start index.
-* **focus**: Determine which slide should be focused.
-* **gap**: Gap between slides.
-* **padding**: Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
-* **easing**: Animation timing function for CSS transition.
-* **arrows**: Whether to append arrows.
-* **arrowPath**: Change the arrow SVG path.
-* **pagination**: Whether to append pagination(indicator dots).
-* **autoplay**: Whether to enable autoplay.
-* **interval**: Autoplay interval in milliseconds.
-* **pauseOnHover**: Whether to stop autoplay while a slider is hovered.
-* **pauseOnFocus**: Whether to stop autoplay while a slider elements are focused.
-* **resetProgress**: Whether to reset progress of the autoplay timer when resumed.
-* **lazyLoad**: Enable lazy load for images.
-* **preloadPages**: Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.
-* **keyboard**: Whether to control a slider via keyboard.
-* **drag**: Whether to allow mouse drag and touch swipe.
-* **dragAngleThreshold**: The angle threshold for drag.
-* **swipeDistanceThreshold**: Distance threshold for determining if the action is "flick" or "swipe".
-* **flickVelocityThreshold**: Velocity threshold for determining if the action is "flick" or "swipe".
-* **flickPower**: Determine power of flick. The larger number this is, the farther a slider runs by flick.
-* **flickMaxPages**: Limit a number of pages to move by flick.
-* **direction**: Slider direction.
-* **cover**: Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.
-* **accessibility**: Whether to enable accessibility(ARIA attributes) or not.
-* **slideFocus**: Whether to add tabindex="0" to visible slides or not.
-* **isNavigation**: Determine if a slider is navigation for another.
-* **trimSpace**: Whether to trim spaces before the fist slide or after the last one.
-* **updateOnMove**: If true, "is-active" class added to the slide element before transition.
-* **throttle**: Throttle duration for the resize event.
-* **breakpoints**: Breakpoints definitions.
-* **classes**: Collection of class names.
-* **i18n**: Collection of texts for i18n.
-
-## Extensions
-* [Video](https://splidejs.com/extension-video/): Assign HTML video, YouTube or Vimeo to slides.
-* [URL Hash Navigation](https://splidejs.com/extension-url-hash-navigation/): Listen to hash change and move a slider to a slide having the hash data attribute.
-* [Grid](https://splidejs.com/extension-grid/): Create rows and cols in a slider.
-
-## Integration
 <p>
-    <a href="https://vuejs.org/" target="_blank">
-        <img width="100px" src="images/vue-logo.png">
-    </a>
-    <a href="https://reactjs.org/" target="_blank">
-        <img width="100px" src="images/react-logo.png">
-    </a>
+Splide is a lightweight, flexible and accessible slider and carousel written in TypeScript.<br>
+No dependencies, no Lighthouse errors.
 </p>
 
-Easy to integrate the Splide slider or carousel into your Vue or React project.
+[![](https://data.jsdelivr.com/v1/package/npm/@splidejs/splide/badge)](https://www.jsdelivr.com/package/npm/@splidejs/splide)
 
-* [Vue Splide](https://splidejs.com/integration-vue-splide/)
-* [React Splide](https://splidejs.com/integration-react-splide/)
+<p>
+  <a href="https://splidejs.com/guides/getting-started/">Getting Started</a>
+  <br>
+  <a href="https://splidejs.com/">Demo</a>
+  <br>
+  <a href="https://splidejs.com/documents/">Documents</a>
+  <br>
+  <a href="https://splidejs.com/guides/themes/">Themes</a>
+  <br>
+  <a href="https://splidejs.com/guides/version3/">About v3</a>
+</p>
+</div>
 
-## API and Extension
-Splide provides some APIs and the way to customize the behaviour programmatically.
-* [APIs](https://splidejs.com/apis/)
-* [Extension](https://splidejs.com/extension/)
+## Features
+
+- Written in TypeScript
+- No dependencies
+- Lightweight, less than 26kB (11kB gzipped)
+- Flexible and extensible
+- Protected by 300+ test cases
+- Multiple slides
+- Slide or fade transition by CSS
+- Supports breakpoints
+- Accepts CSS relative units
+- No need to crop images
+- Autoplay with progress bar and play/pause buttons
+- RTL and vertical direction
+- Mouse drag and touch swipe
+- Free drag mode
+- Mouse wheel navigation
+- Nested slider
+- Lazy loading
+- Thumbnail slider
+- Auto width and height
+- Accessibility friendly
+- Internet Explorer 10
 
 ## License
-Splide is released under the MIT license.
-© 2020 Naotoshi Fujita
+
+Splide is released under MIT license. © 2021 Naotoshi Fujita

dist/js/splide.cjs.js

@@ -1,5741 +1,2830 @@
 /*!
  * Splide.js
- * Version  : 2.4.24
+ * Version  : 3.0.0
  * License  : MIT
- * Copyright: 2020 Naotoshi Fujita
+ * Copyright: 2021 Naotoshi Fujita
  */
 'use strict';
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const PROJECT_CODE = "splide";
+const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`;
+
+const CREATED = 1;
+const MOUNTED = 2;
+const IDLE = 3;
+const MOVING = 4;
+const DESTROYED = 5;
+const STATES = {
+  CREATED,
+  MOUNTED,
+  IDLE,
+  MOVING,
+  DESTROYED
+};
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const DEFAULT_EVENT_PRIORITY = 10;
+const DEFAULT_USER_EVENT_PRIORITY = 20;
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-/**
- * The function for providing an Event object simply managing events.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+function empty(array) {
+  array.length = 0;
+}
 
-/**
- * The function for providing an Event object simply managing events.
- */
+function isObject(subject) {
+  return !isNull(subject) && typeof subject === "object";
+}
+function isArray(subject) {
+  return Array.isArray(subject);
+}
+function isFunction(subject) {
+  return typeof subject === "function";
+}
+function isString(subject) {
+  return typeof subject === "string";
+}
+function isUndefined(subject) {
+  return typeof subject === "undefined";
+}
+function isNull(subject) {
+  return subject === null;
+}
+function isHTMLElement(subject) {
+  return subject instanceof HTMLElement;
+}
 
-var Event = function Event() {
-  /**
-   * Store all event data.
-   *
-   * @type {Array}
-   */
-  var data = [];
-  var Event = {
-    /**
-     * Subscribe the given event(s).
-     *
-     * @param {string}   events  - An event name. Use space to separate multiple events.
-     *                             Also, namespace is accepted by dot, such as 'resize.{namespace}'.
-     * @param {function} handler - A callback function.
-     * @param {Element}  elm     - Optional. Native event will be listened to when this arg is provided.
-     * @param {Object}   options - Optional. Options for addEventListener.
-     */
-    on: function on(events, handler, elm, options) {
-      if (elm === void 0) {
-        elm = null;
-      }
+function toArray(value) {
+  return isArray(value) ? value : [value];
+}
 
-      if (options === void 0) {
-        options = {};
-      }
+function forEach(values, iteratee) {
+  toArray(values).forEach(iteratee);
+}
 
-      events.split(' ').forEach(function (event) {
-        if (elm) {
-          elm.addEventListener(event, handler, options);
-        }
+function includes(array, value) {
+  return array.indexOf(value) > -1;
+}
 
-        data.push({
-          event: event,
-          handler: handler,
-          elm: elm,
-          options: options
-        });
-      });
-    },
+function push(array, items) {
+  array.push(...toArray(items));
+  return array;
+}
 
-    /**
-     * Unsubscribe the given event(s).
-     *
-     * @param {string}  events - A event name or names split by space.
-     * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
-     */
-    off: function off(events, elm) {
-      if (elm === void 0) {
-        elm = null;
-      }
+const arrayProto = Array.prototype;
 
-      events.split(' ').forEach(function (event) {
-        data = data.filter(function (item) {
-          if (item && item.event === event && item.elm === elm) {
-            unsubscribe(item);
-            return false;
-          }
+function slice(arrayLike, start, end) {
+  return arrayProto.slice.call(arrayLike, start, end);
+}
 
-          return true;
-        });
-      });
-    },
+function find(arrayLike, predicate) {
+  return slice(arrayLike).filter(predicate)[0];
+}
 
-    /**
-     * Emit an event.
-     * This method is only for custom events.
-     *
-     * @param {string}  event - An event name.
-     * @param {*}       args  - Any number of arguments passed to handlers.
-     */
-    emit: function emit(event) {
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
+function toggleClass(elm, classes, add) {
+  if (elm) {
+    forEach(classes, (name) => {
+      if (name) {
+        elm.classList[add ? "add" : "remove"](name);
       }
-
-      data.forEach(function (item) {
-        if (!item.elm && item.event.split('.')[0] === event) {
-          item.handler.apply(item, args);
-        }
-      });
-    },
-
-    /**
-     * Clear event data.
-     */
-    destroy: function destroy() {
-      data.forEach(unsubscribe);
-      data = [];
-    }
-  };
-  /**
-   * Remove the registered event listener.
-   *
-   * @param {Object} item - An object containing event data.
-   */
-
-  function unsubscribe(item) {
-    if (item.elm) {
-      item.elm.removeEventListener(item.event, item.handler, item.options);
-    }
+    });
   }
+}
 
-  return Event;
-};
-/**
- * The function providing a super simple state system.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The function providing a super simple state system.
- *
- * @param {string|number} initialState - Provide the initial state value.
- */
-
+function addClass(elm, classes) {
+  toggleClass(elm, isString(classes) ? classes.split(" ") : classes, true);
+}
 
-var State = function State(initialState) {
-  /**
-   * Store the current state.
-   *
-   * @type {string|number}
-   */
-  var curr = initialState;
-  return {
-    /**
-     * Change state.
-     *
-     * @param {string|number} state - A new state.
-     */
-    set: function set(state) {
-      curr = state;
-    },
+function append(parent, children) {
+  forEach(children, parent.appendChild.bind(parent));
+}
 
-    /**
-     * Verify if the current state is given one or not.
-     *
-     * @param {string|number} state - A state name to be verified.
-     *
-     * @return {boolean} - True if the current state is the given one.
-     */
-    is: function is(state) {
-      return state === curr;
+function before(nodes, ref) {
+  forEach(nodes, (node) => {
+    const parent = ref.parentNode;
+    if (parent) {
+      parent.insertBefore(node, ref);
     }
-  };
-};
-/**
- * Some utility functions related with Object, supporting IE.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var keys = Object.keys;
-/**
- * Iterate an object like Array.forEach.
- * IE doesn't support forEach of HTMLCollection.
- *
- * @param {Object}    obj       - An object.
- * @param {function}  callback  - A function handling each value. Arguments are value, property and index.
- */
-
-function each(obj, callback) {
-  keys(obj).some(function (key, index) {
-    return callback(obj[key], key, index);
   });
 }
-/**
- * Return values of the given object as an array.
- * IE doesn't support Object.values.
- *
- * @param {Object} obj - An object.
- *
- * @return {Array} - An array containing all values of the given object.
- */
-
 
-function values(obj) {
-  return keys(obj).map(function (key) {
-    return obj[key];
-  });
+function matches(elm, selector) {
+  return (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
 }
-/**
- * Check if the given subject is object or not.
- *
- * @param {*} subject - A subject to be verified.
- *
- * @return {boolean} - True if object, false otherwise.
- */
 
-
-function isObject(subject) {
-  return typeof subject === 'object';
+function children(parent, selector) {
+  return parent ? slice(parent.children).filter((child) => matches(child, selector)) : [];
 }
-/**
- * Merge two objects deeply.
- *
- * @param {Object} to   - An object where "from" is merged.
- * @param {Object} from - An object merged to "to".
- *
- * @return {Object} - A merged object.
- */
-
 
-function merge(_ref, from) {
-  var to = _extends({}, _ref);
+function child(parent, selector) {
+  return selector ? children(parent, selector)[0] : parent.firstElementChild;
+}
 
-  each(from, function (value, key) {
-    if (isObject(value)) {
-      if (!isObject(to[key])) {
-        to[key] = {};
+function forOwn(object, iteratee) {
+  if (object) {
+    const keys = Object.keys(object);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (key !== "__proto__") {
+        if (iteratee(object[key], key) === false) {
+          break;
+        }
       }
-
-      to[key] = merge(to[key], value);
-    } else {
-      to[key] = value;
     }
-  });
-  return to;
+  }
+  return object;
 }
-/**
- * Assign all properties "from" to "to" object.
- *
- * @param {Object} to   - An object where properties are assigned.
- * @param {Object} from - An object whose properties are assigned to "to".
- *
- * @return {Object} - An assigned object.
- */
 
+function assign(object) {
+  slice(arguments, 1).forEach((source) => {
+    forOwn(source, (value, key) => {
+      object[key] = source[key];
+    });
+  });
+  return object;
+}
 
-function assign(to, from) {
-  keys(from).forEach(function (key) {
-    if (!to[key]) {
-      Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
+function merge(object, source) {
+  forOwn(source, (value, key) => {
+    if (isArray(value)) {
+      object[key] = value.slice();
+    } else if (isObject(value)) {
+      object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+    } else {
+      object[key] = value;
     }
   });
-  return to;
+  return object;
 }
-/**
- * A package of some miscellaneous utility functions.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Convert the given value to array.
- *
- * @param {*} value - Any value.
- *
- * @return {*[]} - Array containing the given value.
- */
-
 
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
+function removeAttribute(elm, attrs) {
+  if (elm) {
+    forEach(attrs, (attr) => {
+      elm.removeAttribute(attr);
+    });
+  }
 }
-/**
- * Check if the given value is between min and max.
- * Min will be returned when the value is less than min or max will do when greater than max.
- *
- * @param {number} value - A number to be checked.
- * @param {number} m1    - Minimum or maximum number.
- * @param {number} m2    - Maximum or minimum number.
- *
- * @return {number} - A value itself, min or max.
- */
-
 
-function between(value, m1, m2) {
-  return Math.min(Math.max(value, m1 > m2 ? m2 : m1), m1 > m2 ? m1 : m2);
+function setAttribute(elm, attrs, value) {
+  if (isObject(attrs)) {
+    forOwn(attrs, (value2, name) => {
+      setAttribute(elm, name, value2);
+    });
+  } else {
+    isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+  }
 }
-/**
- * The sprintf method with minimum functionality.
- *
- * @param {string}       format       - The string format.
- * @param {string|Array} replacements - Replacements accepting multiple arguments.
- *
- * @returns {string} - Converted string.
- */
 
-
-function sprintf(format, replacements) {
-  var i = 0;
-  return format.replace(/%s/g, function () {
-    return toArray(replacements)[i++];
-  });
+function create(tag, attrs, parent) {
+  const elm = document.createElement(tag);
+  if (attrs) {
+    isString(attrs) ? addClass(elm, attrs) : setAttribute(elm, attrs);
+  }
+  parent && append(parent, elm);
+  return elm;
 }
-/**
- * Append px unit to the given subject if necessary.
- *
- * @param {number|string} value - A value that may not include an unit.
- *
- * @return {string} - If the value is string, return itself.
- *                    If number, do value + "px". An empty string, otherwise.
- */
-
 
-function unit(value) {
-  var type = typeof value;
-
-  if (type === 'number' && value > 0) {
-    return parseFloat(value) + 'px';
+function style(elm, styles) {
+  if (isString(styles)) {
+    return getComputedStyle(elm)[styles];
   }
+  forOwn(styles, (value, key) => {
+    if (!isNull(value)) {
+      elm.style[key] = `${value}`;
+    }
+  });
+}
 
-  return type === 'string' ? value : '';
+function display(elm, display2) {
+  style(elm, { display: display2 });
 }
-/**
- * Pad start with 0.
- *
- * @param {number} number - A number to be filled with 0.
- *
- * @return {string|number} - Padded number.
- */
 
+function getAttribute(elm, attr) {
+  return elm.getAttribute(attr);
+}
 
-function pad(number) {
-  return number < 10 ? '0' + number : number;
+function hasClass(elm, className) {
+  return elm && elm.classList.contains(className);
 }
-/**
- * Convert the given value to pixel.
- *
- * @param {Element}       root  - Root element where a dummy div is appended.
- * @param {string|number} value - CSS value to be converted, such as 10rem.
- *
- * @return {number} - Pixel.
- */
 
+function rect(target) {
+  return target.getBoundingClientRect();
+}
 
-function toPixel(root, value) {
-  if (typeof value === 'string') {
-    var div = create('div', {});
-    applyStyle(div, {
-      position: 'absolute',
-      width: value
-    });
-    append(root, div);
-    value = div.clientWidth;
+function remove(nodes) {
+  forEach(nodes, (node) => {
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  });
+}
 
-    _remove(div);
+function measure(parent, value) {
+  if (isString(value)) {
+    const div = create("div", { style: `width: ${value}; position: absolute;` }, parent);
+    value = rect(div).width;
+    remove(div);
   }
-
-  return +value || 0;
+  return value;
 }
-/**
- * Some utility functions related with DOM.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
 
-/**
- * Find the first element matching the given selector.
- * Be aware that all selectors after a space are ignored.
- *
- * @param {Element|Node}  elm       - An ancestor element.
- * @param {string}        selector  - DOMString.
- *
- * @return {Element|null} - A found element or null.
- */
+function parseHtml(html) {
+  return child(new DOMParser().parseFromString(html, "text/html").body);
+}
 
+function prevent(e, stopPropagation) {
+  e.preventDefault();
+  if (stopPropagation) {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  }
+}
 
-function find(elm, selector) {
-  return elm ? elm.querySelector(selector.split(' ')[0]) : null;
+function query(parent, selector) {
+  return parent && parent.querySelector(selector);
 }
-/**
- * Find a first child having the given tag or class name.
- *
- * @param {Element} parent         - A parent element.
- * @param {string}  tagOrClassName - A tag or class name.
- *
- * @return {Element|undefined} - A found element on success or undefined on failure.
- */
 
+function queryAll(parent, selector) {
+  return slice(parent.querySelectorAll(selector));
+}
 
-function child(parent, tagOrClassName) {
-  return children(parent, tagOrClassName)[0];
+function removeClass(elm, classes) {
+  toggleClass(elm, classes, false);
 }
-/**
- * Return chile elements that matches the provided tag or class name.
- *
- * @param {Element} parent         - A parent element.
- * @param {string}  tagOrClassName - A tag or class name.
- *
- * @return {Element[]} - Found elements.
- */
 
+function unit(value) {
+  return isString(value) ? value : value ? `${value}px` : "";
+}
 
-function children(parent, tagOrClassName) {
-  if (parent) {
-    return values(parent.children).filter(function (child) {
-      return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName === tagOrClassName;
-    });
+function assert(condition, message = "") {
+  if (!condition) {
+    throw new Error(`[${PROJECT_CODE}] ${message}`);
   }
+}
 
-  return [];
+function nextTick(callback) {
+  setTimeout(callback);
 }
-/**
- * Create an element with some optional attributes.
- *
- * @param {string} tag   - A tag name.
- * @param {Object} attrs - An object any attribute pairs of name and value.
- *
- * @return {Element} - A created element.
- */
 
+const noop = () => {
+};
 
-function create(tag, attrs) {
-  var elm = document.createElement(tag);
-  each(attrs, function (value, key) {
-    return setAttribute(elm, key, value);
-  });
-  return elm;
+function raf(func) {
+  return requestAnimationFrame(func);
 }
-/**
- * Convert HTML string to DOM node.
- *
- * @param {string} html - HTML string.
- *
- * @return {Node} - A created node.
- */
 
+const { min, max, floor, ceil, abs } = Math;
 
-function domify(html) {
-  var div = create('div', {});
-  div.innerHTML = html;
-  return div.firstChild;
+function approximatelyEqual(x, y, epsilon) {
+  return abs(x - y) < epsilon;
 }
-/**
- * Remove a given element from a DOM tree.
- *
- * @param {Element|Element[]} elms - Element(s) to be removed.
- */
 
+function between(number, minOrMax, maxOrMin, exclusive) {
+  const minimum = min(minOrMax, maxOrMin);
+  const maximum = max(minOrMax, maxOrMin);
+  return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum;
+}
 
-function _remove(elms) {
-  toArray(elms).forEach(function (elm) {
-    if (elm) {
-      var parent = elm.parentElement;
-      parent && parent.removeChild(elm);
-    }
-  });
+function clamp(number, x, y) {
+  const minimum = min(x, y);
+  const maximum = max(x, y);
+  return min(max(minimum, number), maximum);
 }
-/**
- * Append a child to a given element.
- *
- * @param {Element} parent - A parent element.
- * @param {Element} child  - An element to be appended.
- */
 
+function sign(x) {
+  return +(x > 0) - +(x < 0);
+}
 
-function append(parent, child) {
-  if (parent) {
-    parent.appendChild(child);
-  }
+function camelToKebab(string) {
+  return string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
-/**
- * Insert an element before the reference element.
- *
- * @param {Element|Node} ref - A reference element.
- * @param {Element}      elm - An element to be inserted.
- */
 
+function format(string, replacements) {
+  forEach(replacements, (replacement) => {
+    string = string.replace("%s", `${replacement}`);
+  });
+  return string;
+}
 
-function before(elm, ref) {
-  if (elm && ref) {
-    var parent = ref.parentElement;
-    parent && parent.insertBefore(elm, ref);
-  }
+function pad(number) {
+  return number < 10 ? `0${number}` : `${number}`;
 }
-/**
- * Apply styles to the given element.
- *
- * @param {Element} elm     - An element where styles are applied.
- * @param {Object}  styles  - Object containing styles.
- */
 
+const ids = {};
+function uniqueId(prefix) {
+  return `${prefix}${pad(ids[prefix] = (ids[prefix] || 0) + 1)}`;
+}
 
-function applyStyle(elm, styles) {
-  if (elm) {
-    each(styles, function (value, prop) {
-      if (value !== null) {
-        elm.style[prop] = value;
-      }
+function EventBus() {
+  let handlers = {};
+  function on(events, callback, key, priority = DEFAULT_EVENT_PRIORITY) {
+    forEachEvent(events, (event, namespace) => {
+      handlers[event] = handlers[event] || [];
+      push(handlers[event], {
+        _event: event,
+        _callback: callback,
+        _namespace: namespace,
+        _priority: priority,
+        _key: key
+      }).sort((handler1, handler2) => handler1._priority - handler2._priority);
+    });
+  }
+  function off(events, key) {
+    forEachEvent(events, (event, namespace) => {
+      const eventHandlers = handlers[event];
+      handlers[event] = eventHandlers && eventHandlers.filter((handler) => {
+        return handler._key ? handler._key !== key : handler._namespace !== namespace;
+      });
+    });
+  }
+  function offBy(key) {
+    forOwn(handlers, (eventHandlers, event) => {
+      off(event, key);
+    });
+  }
+  function emit(event) {
+    (handlers[event] || []).forEach((handler) => {
+      handler._callback.apply(handler, slice(arguments, 1));
+    });
+  }
+  function destroy() {
+    handlers = {};
+  }
+  function forEachEvent(events, iteratee) {
+    toArray(events).join(" ").split(" ").forEach((eventNS) => {
+      const fragments = eventNS.split(".");
+      iteratee(fragments[0], fragments[1]);
     });
   }
+  return {
+    on,
+    off,
+    offBy,
+    emit,
+    destroy
+  };
 }
-/**
- * Add or remove classes to/from the element.
- * This function is for internal usage.
- *
- * @param {Element}         elm     - An element where classes are added.
- * @param {string|string[]} classes - Class names being added.
- * @param {boolean}         remove  - Whether to remove or add classes.
- */
-
 
-function addOrRemoveClasses(elm, classes, remove) {
-  if (elm) {
-    toArray(classes).forEach(function (name) {
-      if (name) {
-        elm.classList[remove ? 'remove' : 'add'](name);
+const EVENT_MOUNTED = "mounted";
+const EVENT_READY = "ready";
+const EVENT_MOVE = "move";
+const EVENT_MOVED = "moved";
+const EVENT_CLICK = "click";
+const EVENT_ACTIVE = "active";
+const EVENT_INACTIVE = "inactive";
+const EVENT_VISIBLE = "visible";
+const EVENT_HIDDEN = "hidden";
+const EVENT_SLIDE_KEYDOWN = "slide:keydown";
+const EVENT_REFRESH = "refresh";
+const EVENT_UPDATED = "updated";
+const EVENT_RESIZE = "resize";
+const EVENT_RESIZED = "resized";
+const EVENT_REPOSITIONED = "repositioned";
+const EVENT_DRAG = "drag";
+const EVENT_DRAGGING = "dragging";
+const EVENT_DRAGGED = "dragged";
+const EVENT_SCROLL = "scroll";
+const EVENT_SCROLLED = "scrolled";
+const EVENT_DESTROY = "destroy";
+const EVENT_ARROWS_MOUNTED = "arrows:mounted";
+const EVENT_ARROWS_UPDATED = "arrows:updated";
+const EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+const EVENT_PAGINATION_UPDATED = "pagination:updated";
+const EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+const EVENT_AUTOPLAY_PLAY = "autoplay:play";
+const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+
+function EventInterface(Splide2) {
+  const { event } = Splide2;
+  const key = {};
+  let listeners = [];
+  function on(events, callback, priority) {
+    event.on(events, callback, key, priority);
+  }
+  function off(events) {
+    event.off(events, key);
+  }
+  function bind(targets, events, callback, options) {
+    forEachEvent(targets, events, (target, event2) => {
+      listeners.push([target, event2, callback, options]);
+      target.addEventListener(event2, callback, options);
+    });
+  }
+  function unbind(targets, events) {
+    forEachEvent(targets, events, (target, event2) => {
+      listeners = listeners.filter((listener) => {
+        if (listener[0] === target && listener[1] === event2) {
+          target.removeEventListener(event2, listener[2], listener[3]);
+          return false;
+        }
+        return true;
+      });
+    });
+  }
+  function forEachEvent(targets, events, iteratee) {
+    forEach(targets, (target) => {
+      if (target) {
+        events.split(" ").forEach(iteratee.bind(null, target));
       }
     });
   }
+  function destroy() {
+    listeners = listeners.filter((data) => unbind(data[0], data[1]));
+    event.offBy(key);
+  }
+  event.on(EVENT_DESTROY, destroy, key);
+  return {
+    on,
+    off,
+    emit: event.emit,
+    bind,
+    unbind,
+    destroy
+  };
 }
-/**
- * Add classes to the element.
- *
- * @param {Element}          elm     - An element where classes are added.
- * @param {string|string[]}  classes - Class names being added.
- */
 
-
-function addClass(elm, classes) {
-  addOrRemoveClasses(elm, classes, false);
+function RequestInterval(interval, onInterval, onUpdate, limit) {
+  const { now } = Date;
+  let startTime;
+  let rate = 0;
+  let id;
+  let paused = true;
+  let count = 0;
+  function update() {
+    if (!paused) {
+      const elapsed = now() - startTime;
+      if (elapsed >= interval) {
+        rate = 1;
+        startTime = now();
+      } else {
+        rate = elapsed / interval;
+      }
+      if (onUpdate) {
+        onUpdate(rate);
+      }
+      if (rate === 1) {
+        onInterval();
+        if (limit && ++count >= limit) {
+          return pause();
+        }
+      }
+      raf(update);
+    }
+  }
+  function start(resume) {
+    !resume && cancel();
+    startTime = now() - (resume ? rate * interval : 0);
+    paused = false;
+    raf(update);
+  }
+  function pause() {
+    paused = true;
+  }
+  function rewind() {
+    startTime = now();
+    rate = 0;
+    if (onUpdate) {
+      onUpdate(rate);
+    }
+  }
+  function cancel() {
+    cancelAnimationFrame(id);
+    rate = 0;
+    id = 0;
+    paused = true;
+  }
+  function isPaused() {
+    return paused;
+  }
+  return {
+    start,
+    rewind,
+    pause,
+    cancel,
+    isPaused
+  };
 }
-/**
- * Remove a class from the element.
- *
- * @param {Element}         elm     - An element where classes are removed.
- * @param {string|string[]} classes - A class name being removed.
- */
-
 
-function removeClass(elm, classes) {
-  addOrRemoveClasses(elm, classes, true);
+function State(initialState) {
+  let state = initialState;
+  function set(value) {
+    state = value;
+  }
+  function is(states) {
+    return includes(toArray(states), state);
+  }
+  return { set, is };
 }
-/**
- * Verify if the provided element has the class or not.
- *
- * @param {Element} elm       - An element.
- * @param {string}  className - A class name.
- *
- * @return {boolean} - True if the element has the class or false if not.
- */
 
-
-function hasClass(elm, className) {
-  return !!elm && elm.classList.contains(className);
+function Throttle(func, duration) {
+  let interval;
+  function throttled() {
+    if (!interval) {
+      interval = RequestInterval(duration || 0, () => {
+        func.apply(this, arguments);
+        interval = null;
+      }, null, 1);
+      interval.start();
+    }
+  }
+  return throttled;
 }
-/**
- * Set attribute to the given element.
- *
- * @param {Element}                 elm   - An element where an attribute is assigned.
- * @param {string}                  name  - Attribute name.
- * @param {string|number|boolean}   value - Attribute value.
- */
-
 
-function setAttribute(elm, name, value) {
-  if (elm) {
-    elm.setAttribute(name, value);
+function Options(Splide2, Components2, options) {
+  const throttledObserve = Throttle(observe);
+  let initialOptions;
+  let points;
+  let currPoint;
+  function setup() {
+    try {
+      merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, e.message);
+    }
+    initialOptions = merge({}, options);
+    const { breakpoints } = options;
+    if (breakpoints) {
+      const isMin = options.mediaQuery === "min";
+      points = Object.keys(breakpoints).sort((n, m) => isMin ? +m - +n : +n - +m).map((point) => [
+        point,
+        matchMedia(`(${isMin ? "min" : "max"}-width:${point}px)`)
+      ]);
+      observe();
+    }
+  }
+  function mount() {
+    if (points) {
+      addEventListener("resize", throttledObserve);
+    }
+  }
+  function destroy(completely) {
+    if (completely) {
+      removeEventListener("resize", throttledObserve);
+    }
+  }
+  function observe() {
+    const item = find(points, (item2) => item2[1].matches) || [];
+    if (item[0] !== currPoint) {
+      onMatch(currPoint = item[0]);
+    }
+  }
+  function onMatch(point) {
+    const newOptions = options.breakpoints[point] || initialOptions;
+    if (newOptions.destroy) {
+      Splide2.options = initialOptions;
+      Splide2.destroy(newOptions.destroy === "completely");
+    } else {
+      if (Splide2.state.is(DESTROYED)) {
+        destroy(true);
+        Splide2.mount();
+      }
+      Splide2.options = newOptions;
+    }
   }
+  return {
+    setup,
+    mount,
+    destroy
+  };
 }
-/**
- * Get attribute from the given element.
- *
- * @param {Element} elm  - An element where an attribute is assigned.
- * @param {string}  name - Attribute name.
- *
- * @return {string} - The value of the given attribute if available. An empty string if not.
- */
 
-
-function getAttribute(elm, name) {
-  return elm ? elm.getAttribute(name) : '';
+const RTL = "rtl";
+const TTB = "ttb";
+
+const ORIENTATION_MAP = {
+  marginRight: ["marginBottom", "marginLeft"],
+  autoWidth: ["autoHeight"],
+  fixedWidth: ["fixedHeight"],
+  paddingLeft: ["paddingTop", "paddingRight"],
+  paddingRight: ["paddingBottom", "paddingLeft"],
+  width: ["height"],
+  left: ["top", "right"],
+  right: ["bottom", "left"],
+  x: ["y"],
+  X: ["Y"],
+  Y: ["X"],
+  ArrowLeft: ["ArrowUp", "ArrowRight"],
+  ArrowRight: ["ArrowDown", "ArrowLeft"]
+};
+function Direction(Splide2, Components2, options) {
+  function resolve(prop, axisOnly) {
+    const { direction } = options;
+    const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
+    return ORIENTATION_MAP[prop][index] || prop;
+  }
+  function orient(value) {
+    return value * (options.direction === RTL ? 1 : -1);
+  }
+  return {
+    resolve,
+    orient
+  };
 }
-/**
- * Remove attribute from the given element.
- *
- * @param {Element|Element[]} elms  - An element where an attribute is removed.
- * @param {string|string[]}      names - Attribute name.
- */
 
+const CLASS_ROOT = PROJECT_CODE;
+const CLASS_SLIDER = `${PROJECT_CODE}__slider`;
+const CLASS_TRACK = `${PROJECT_CODE}__track`;
+const CLASS_LIST = `${PROJECT_CODE}__list`;
+const CLASS_SLIDE = `${PROJECT_CODE}__slide`;
+const CLASS_CLONE = `${CLASS_SLIDE}--clone`;
+const CLASS_CONTAINER = `${CLASS_SLIDE}__container`;
+const CLASS_ARROWS = `${PROJECT_CODE}__arrows`;
+const CLASS_ARROW = `${PROJECT_CODE}__arrow`;
+const CLASS_ARROW_PREV = `${CLASS_ARROW}--prev`;
+const CLASS_ARROW_NEXT = `${CLASS_ARROW}--next`;
+const CLASS_PAGINATION = `${PROJECT_CODE}__pagination`;
+const CLASS_PAGINATION_PAGE = `${CLASS_PAGINATION}__page`;
+const CLASS_PROGRESS = `${PROJECT_CODE}__progress`;
+const CLASS_PROGRESS_BAR = `${CLASS_PROGRESS}__bar`;
+const CLASS_AUTOPLAY = `${PROJECT_CODE}__autoplay`;
+const CLASS_PLAY = `${PROJECT_CODE}__play`;
+const CLASS_PAUSE = `${PROJECT_CODE}__pause`;
+const CLASS_SPINNER = `${PROJECT_CODE}__spinner`;
+const CLASS_INITIALIZED = "is-initialized";
+const CLASS_ACTIVE = "is-active";
+const CLASS_PREV = "is-prev";
+const CLASS_NEXT = "is-next";
+const CLASS_VISIBLE = "is-visible";
+const CLASS_LOADING = "is-loading";
+const STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING];
+const CLASSES = {
+  slide: CLASS_SLIDE,
+  clone: CLASS_CLONE,
+  arrows: CLASS_ARROWS,
+  arrow: CLASS_ARROW,
+  prev: CLASS_ARROW_PREV,
+  next: CLASS_ARROW_NEXT,
+  pagination: CLASS_PAGINATION,
+  page: CLASS_PAGINATION_PAGE,
+  spinner: CLASS_SPINNER
+};
 
-function removeAttribute(elms, names) {
-  toArray(names).forEach(function (name) {
-    toArray(elms).forEach(function (elm) {
-      return elm && elm.removeAttribute(name);
+function Elements(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  const { root } = Splide2;
+  const elements = {};
+  const slides = [];
+  let classes;
+  let slider;
+  let track;
+  let list;
+  function setup() {
+    collect();
+    identify();
+    addClass(root, classes = getClasses());
+  }
+  function mount() {
+    on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2);
+    on(EVENT_UPDATED, update);
+  }
+  function destroy() {
+    empty(slides);
+    removeClass(root, classes);
+  }
+  function refresh() {
+    destroy();
+    setup();
+  }
+  function update() {
+    removeClass(root, classes);
+    addClass(root, classes = getClasses());
+  }
+  function collect() {
+    slider = child(root, `.${CLASS_SLIDER}`);
+    track = query(root, `.${CLASS_TRACK}`);
+    list = child(track, `.${CLASS_LIST}`);
+    assert(track && list, "A track/list element is missing.");
+    push(slides, children(list, `.${CLASS_SLIDE}:not(.${CLASS_CLONE})`));
+    const autoplay = find(`.${CLASS_AUTOPLAY}`);
+    const arrows = find(`.${CLASS_ARROWS}`);
+    assign(elements, {
+      root,
+      slider,
+      track,
+      list,
+      slides,
+      arrows,
+      autoplay,
+      prev: query(arrows, `.${CLASS_ARROW_PREV}`),
+      next: query(arrows, `.${CLASS_ARROW_NEXT}`),
+      bar: query(find(`.${CLASS_PROGRESS}`), `.${CLASS_PROGRESS_BAR}`),
+      play: query(autoplay, `.${CLASS_PLAY}`),
+      pause: query(autoplay, `.${CLASS_PAUSE}`)
     });
+  }
+  function identify() {
+    const id = root.id || uniqueId(PROJECT_CODE);
+    root.id = id;
+    track.id = track.id || `${id}-track`;
+    list.id = list.id || `${id}-list`;
+  }
+  function find(selector) {
+    return child(root, selector) || child(slider, selector);
+  }
+  function getClasses() {
+    return [
+      `${CLASS_ROOT}--${options.type}`,
+      `${CLASS_ROOT}--${options.direction}`,
+      options.drag && `${CLASS_ROOT}--draggable`,
+      options.isNavigation && `${CLASS_ROOT}--nav`,
+      CLASS_ACTIVE
+    ];
+  }
+  return assign(elements, {
+    setup,
+    mount,
+    destroy
   });
 }
-/**
- * Return the Rect object of the provided object.
- *
- * @param {Element} elm - An element.
- *
- * @return {ClientRect|DOMRect} - A rect object.
- */
-
 
-function getRect(elm) {
-  return elm.getBoundingClientRect();
+function Style$1() {
+  let style;
+  let sheet;
+  function mount() {
+    style = create("style", {}, document.head);
+    sheet = style.sheet;
+  }
+  function destroy() {
+    remove(style);
+    sheet = null;
+  }
+  function rule(selector, prop, value) {
+    const { cssRules } = sheet;
+    const cssRule = find(cssRules, (cssRule2) => isCSSStyleRule(cssRule2) && cssRule2.selectorText === selector) || cssRules[sheet.insertRule(`${selector}{}`, 0)];
+    if (isCSSStyleRule(cssRule)) {
+      const { style: style2 } = cssRule;
+      value = `${value}`;
+      if (style2[prop] !== value) {
+        style2[prop] = value;
+      }
+    }
+  }
+  function ruleBy(target, prop, value) {
+    rule(`#${isHTMLElement(target) ? target.id : target}`, prop, value);
+  }
+  function isCSSStyleRule(cssRule) {
+    return cssRule instanceof CSSStyleRule;
+  }
+  return {
+    mount,
+    destroy,
+    rule,
+    ruleBy
+  };
 }
-/**
- * Trigger the given callback after all images contained by the element are loaded.
- *
- * @param {Element}  elm      - Element that may contain images.
- * @param {Function} callback - Callback function fired right after all images are loaded.
- */
-
-
-function loaded(elm, callback) {
-  var images = elm.querySelectorAll('img');
-  var length = images.length;
 
-  if (length) {
-    var count = 0;
-    each(images, function (img) {
-      img.onload = img.onerror = function () {
-        if (++count === length) {
-          callback();
-        }
-      };
+const ROLE = "role";
+const ARIA_CONTROLS = "aria-controls";
+const ARIA_CURRENT = "aria-current";
+const ARIA_LABEL = "aria-label";
+const ARIA_HIDDEN = "aria-hidden";
+const TAB_INDEX = "tabindex";
+const DISABLED = "disabled";
+const ARIA_ORIENTATION = "aria-orientation";
+const ALL_ATTRIBUTES = [
+  ROLE,
+  ARIA_CONTROLS,
+  ARIA_CURRENT,
+  ARIA_LABEL,
+  ARIA_HIDDEN,
+  ARIA_ORIENTATION,
+  TAB_INDEX,
+  DISABLED
+];
+
+const SLIDE = "slide";
+const LOOP = "loop";
+const FADE = "fade";
+
+function Slide$1(Splide2, index, slideIndex, slide) {
+  const { on, emit, bind, destroy: destroyEvents } = EventInterface(Splide2);
+  const { Components, root, options } = Splide2;
+  const { isNavigation, updateOnMove } = options;
+  const { resolve } = Components.Direction;
+  const isClone = slideIndex > -1;
+  const container = child(slide, `.${CLASS_CONTAINER}`);
+  const focusableNodes = options.focusableNodes && queryAll(slide, options.focusableNodes);
+  let destroyed;
+  function mount() {
+    init();
+    bind(slide, "click keydown", (e) => {
+      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
     });
-  } else {
-    // Trigger the callback immediately if there is no image.
-    callback();
+    on([EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+    if (updateOnMove) {
+      on(EVENT_MOVE, onMove.bind(this));
+    }
   }
-}
-/**
- * Export slider types.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Normal slider.
- *
- * @type {string}
- */
-
-
-var SLIDE = 'slide';
-/**
- * Loop after the last slide and before the first one.
- *
- * @type {string}
- */
-
-var LOOP = 'loop';
-/**
- * The track doesn't move.
- *
- * @type {string}
- */
-
-var FADE = 'fade';
-/**
- * The component for general slide effect transition.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for general slide effect transition.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Slide$1 = function Slide$1(Splide, Components) {
-  /**
-   * Hold the list element.
-   *
-   * @type {Element}
-   */
-  var list;
-  /**
-   * Hold the onEnd callback function.
-   *
-   * @type {function}
-   */
-
-  var endCallback;
-  return {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      list = Components.Elements.list;
-      Splide.on('transitionend', function (e) {
-        if (e.target === list && endCallback) {
-          endCallback();
-        }
-      }, list);
-    },
-
-    /**
-     * Start transition.
-     *
-     * @param {number}   destIndex - Destination slide index that might be clone's.
-     * @param {number}   newIndex  - New index.
-     * @param {number}   prevIndex - Previous index.
-     * @param {Object}   coord     - Destination coordinates.
-     * @param {function} done      - Callback function must be invoked when transition is completed.
-     */
-    start: function start(destIndex, newIndex, prevIndex, coord, done) {
-      var options = Splide.options;
-      var edgeIndex = Components.Controller.edgeIndex;
-      var speed = options.speed;
-      endCallback = done;
-
-      if (Splide.is(SLIDE)) {
-        if (prevIndex === 0 && newIndex >= edgeIndex || prevIndex >= edgeIndex && newIndex === 0) {
-          speed = options.rewindSpeed || speed;
-        }
-      }
-
-      applyStyle(list, {
-        transition: "transform " + speed + "ms " + options.easing,
-        transform: "translate(" + coord.x + "px," + coord.y + "px)"
-      });
-    }
-  };
-};
-/**
- * The component for fade transition.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for fade transition.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Fade = function Fade(Splide, Components) {
-  var Fade = {
-    /**
-     * Called when the component is mounted.
-     * Apply transition style to the first slide.
-     */
-    mount: function mount() {
-      apply(Splide.index);
-    },
-
-    /**
-     * Start transition.
-     *
-     * @param {number}    destIndex - Destination slide index that might be clone's.
-     * @param {number}    newIndex  - New index.
-     * @param {number}    prevIndex - Previous index.
-     * @param {Object}    coord     - Destination coordinates.
-     * @param {function}  done      - Callback function must be invoked when transition is completed.
-     */
-    start: function start(destIndex, newIndex, prevIndex, coord, done) {
-      var track = Components.Elements.track;
-      applyStyle(track, {
-        height: unit(track.clientHeight)
-      });
-      apply(newIndex);
-      setTimeout(function () {
-        done();
-        applyStyle(track, {
-          height: ''
-        });
-      });
-    }
-  };
-  /**
-   * Apply transition style to the slide specified by the given index.
-   *
-   * @param {number} index - A slide index.
-   */
-
-  function apply(index) {
-    var options = Splide.options;
-    applyStyle(Components.Elements.slides[index], {
-      transition: "opacity " + options.speed + "ms " + options.easing
-    });
-  }
-
-  return Fade;
-};
-/**
- * Provide a function for composing components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Compose components.
- *
- * @param {Splide}   Splide     - Splide instance.
- * @param {Object}   Components - Additional components.
- * @param {function} Transition - Change component for transition.
- *
- * @return {Object} - An object containing all components.
- */
-
-
-function compose(Splide, Components, Transition) {
-  var components = {};
-  each(Components, function (Component, name) {
-    components[name] = Component(Splide, components, name.toLowerCase());
-  });
-
-  if (!Transition) {
-    Transition = Splide.is(FADE) ? Fade : Slide$1;
-  }
-
-  components.Transition = Transition(Splide, components);
-  return components;
-}
-/**
- * Utility functions for outputting logs.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Prefix of an error massage.
- *
- * @type {string}
- */
-
-
-var MESSAGE_PREFIX = '[SPLIDE]';
-/**
- * Display an error message on the browser console.
- *
- * @param {string} message - An error message.
- */
-
-function error(message) {
-  console.error(MESSAGE_PREFIX + " " + message);
-}
-/**
- * Check existence of the given object and throw an error if it doesn't.
- *
- * @throws {Error}
- *
- * @param {*}      subject - A subject to be confirmed.
- * @param {string} message - An error message.
- */
-
-
-function exist(subject, message) {
-  if (!subject) {
-    throw new Error(message);
-  }
-}
-/**
- * Export class names.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * A root class name.
- *
- * @type {string}
- */
-
-
-var ROOT = 'splide';
-/**
- * The definition table of all classes for elements.
- * They might be modified by options.
- *
- * @type {Object}
- */
-
-var ELEMENT_CLASSES = {
-  root: ROOT,
-  slider: ROOT + "__slider",
-  track: ROOT + "__track",
-  list: ROOT + "__list",
-  slide: ROOT + "__slide",
-  container: ROOT + "__slide__container",
-  arrows: ROOT + "__arrows",
-  arrow: ROOT + "__arrow",
-  prev: ROOT + "__arrow--prev",
-  next: ROOT + "__arrow--next",
-  pagination: ROOT + "__pagination",
-  page: ROOT + "__pagination__page",
-  clone: ROOT + "__slide--clone",
-  progress: ROOT + "__progress",
-  bar: ROOT + "__progress__bar",
-  autoplay: ROOT + "__autoplay",
-  play: ROOT + "__play",
-  pause: ROOT + "__pause",
-  spinner: ROOT + "__spinner",
-  sr: ROOT + "__sr"
-};
-/**
- * Definitions of status classes.
- *
- * @type {Object}
- */
-
-var STATUS_CLASSES = {
-  active: 'is-active',
-  visible: 'is-visible',
-  loading: 'is-loading'
-};
-/**
- * Export i18n texts as object.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Texts for i18n.
- *
- * @type {Object}
- */
-
-var I18N = {
-  prev: 'Previous slide',
-  next: 'Next slide',
-  first: 'Go to first slide',
-  last: 'Go to last slide',
-  slideX: 'Go to slide %s',
-  pageX: 'Go to page %s',
-  play: 'Start autoplay',
-  pause: 'Pause autoplay'
-};
-/**
- * Export default options.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-var DEFAULTS = {
-  /**
-   * Determine a slider type.
-   * - 'slide': Regular slider.
-   * - 'loop' : Carousel slider.
-   * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
-   *
-   * @type {string}
-   */
-  type: 'slide',
-
-  /**
-   * Whether to rewind a slider before the first slide or after the last one.
-   * In "loop" mode, this option is ignored.
-   *
-   * @type {boolean}
-   */
-  rewind: false,
-
-  /**
-   * Transition speed in milliseconds.
-   *
-   * @type {number}
-   */
-  speed: 400,
-
-  /**
-   * Transition speed on rewind in milliseconds.
-   *
-   * @type {number}
-   */
-  rewindSpeed: 0,
-
-  /**
-   * Whether to prevent any actions while a slider is transitioning.
-   * If false, navigation, drag and swipe work while the slider is running.
-   * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
-   *
-   * @type {boolean}
-   */
-  waitForTransition: true,
-
-  /**
-   * Define slider max width.
-   *
-   * @type {number}
-   */
-  width: 0,
-
-  /**
-   * Define slider height.
-   *
-   * @type {number}
-   */
-  height: 0,
-
-  /**
-   * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
-   * perPage number will be ignored when this option is falsy.
-   *
-   * @type {number|string}
-   */
-  fixedWidth: 0,
-
-  /**
-   * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
-   * heightRatio option will be ignored when this option is falsy.
-   *
-   * @type {number|string}
-   */
-  fixedHeight: 0,
-
-  /**
-   * Determine height of slides by ratio to a slider width.
-   * This will be ignored when the fixedHeight is provided.
-   *
-   * @type {number}
-   */
-  heightRatio: 0,
-
-  /**
-   * If true, slide width will be determined by the element width itself.
-   * - perPage/perMove should be 1.
-   *
-   * @type {boolean}
-   */
-  autoWidth: false,
-
-  /**
-   * If true, slide height will be determined by the element width itself.
-   * - perPage/perMove should be 1.
-   *
-   * @type {boolean}
-   */
-  autoHeight: false,
-
-  /**
-   * Determine how many slides should be displayed per page.
-   *
-   * @type {number}
-   */
-  perPage: 1,
-
-  /**
-   * Determine how many slides should be moved when a slider goes to next or perv.
-   *
-   * @type {number}
-   */
-  perMove: 0,
-
-  /**
-   * Determine manually how many clones should be generated on the left and right side.
-   * The total number of clones will be twice of this number.
-   *
-   * @type {number}
-   */
-  clones: 0,
-
-  /**
-   * Start index.
-   *
-   * @type {number}
-   */
-  start: 0,
-
-  /**
-   * Determine which slide should be focused if there are multiple slides in a page.
-   * A string "center" is acceptable for centering slides.
-   *
-   * @type {boolean|number|string}
-   */
-  focus: false,
-
-  /**
-   * Gap between slides. CSS format is allowed such as 1em.
-   *
-   * @type {number|string}
-   */
-  gap: 0,
-
-  /**
-   * Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
-   * Give a single value to set a same size for both sides or
-   * do an object for different sizes.
-   * Also, CSS format is allowed such as 1em.
-   *
-   * @example
-   * - 10: Number
-   * - '1em': CSS format.
-   * - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
-   * - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
-   *
-   * @type {number|string|Object}
-   */
-  padding: 0,
-
-  /**
-   * Whether to append arrows.
-   *
-   * @type {boolean}
-   */
-  arrows: true,
-
-  /**
-   * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
-   *
-   * @type {string}
-   */
-  arrowPath: '',
-
-  /**
-   * Whether to append pagination(indicator dots) or not.
-   *
-   * @type {boolean}
-   */
-  pagination: true,
-
-  /**
-   * Activate autoplay.
-   *
-   * @type {boolean}
-   */
-  autoplay: false,
-
-  /**
-   * Autoplay interval in milliseconds.
-   *
-   * @type {number}
-   */
-  interval: 5000,
-
-  /**
-   * Whether to stop autoplay when a slider is hovered.
-   *
-   * @type {boolean}
-   */
-  pauseOnHover: true,
-
-  /**
-   * Whether to stop autoplay when a slider elements are focused.
-   * True is recommended for accessibility.
-   *
-   * @type {boolean}
-   */
-  pauseOnFocus: true,
-
-  /**
-   * Whether to reset progress of the autoplay timer when resumed.
-   *
-   * @type {boolean}
-   */
-  resetProgress: true,
-
-  /**
-   * Loading images lazily.
-   * Image src must be provided by a data-splide-lazy attribute.
-   *
-   * - false: Do nothing.
-   * - 'nearby': Only images around an active slide will be loaded.
-   * - 'sequential': All images will be sequentially loaded.
-   *
-   * @type {boolean|string}
-   */
-  lazyLoad: false,
-
-  /**
-   * This option works only when a lazyLoad option is "nearby".
-   * Determine how many pages(not slides) around an active slide should be loaded beforehand.
-   *
-   * @type {number}
-   */
-  preloadPages: 1,
-
-  /**
-   * Easing for CSS transition. For example, linear, ease or cubic-bezier().
-   *
-   * @type {string}
-   */
-  easing: 'cubic-bezier(.42,.65,.27,.99)',
-
-  /**
-   * Whether to enable keyboard shortcuts
-   * - true or 'global': Listen to keydown event of the document.
-   * - 'focused': Listen to the keydown event of the slider root element. tabindex="0" will be added to the element.
-   * - false: Disable keyboard shortcuts.
-   *
-   * @type {boolean|string}
-   */
-  keyboard: 'global',
-
-  /**
-   * Whether to allow mouse drag and touch swipe.
-   *
-   * @type {boolean}
-   */
-  drag: true,
-
-  /**
-   * The angle threshold for drag.
-   * The slider starts moving only when the drag angle is less than this threshold.
-   *
-   * @type {number}
-   */
-  dragAngleThreshold: 30,
-
-  /**
-   * Distance threshold for determining if the action is "flick" or "swipe".
-   * When a drag distance is over this value, the action will be treated as "swipe", not "flick".
-   *
-   * @type {number}
-   */
-  swipeDistanceThreshold: 150,
-
-  /**
-   * Velocity threshold for determining if the action is "flick" or "swipe".
-   * Around 0.5 is recommended.
-   *
-   * @type {number}
-   */
-  flickVelocityThreshold: .6,
-
-  /**
-   * Determine power of flick. The larger number this is, the farther a slider runs by flick.
-   * Around 500 is recommended.
-   *
-   * @type {number}
-   */
-  flickPower: 600,
-
-  /**
-   * Limit a number of pages to move by flick.
-   *
-   * @type {number}
-   */
-  flickMaxPages: 1,
-
-  /**
-   * Slider direction.
-   * - 'ltr': Left to right.
-   * - 'rtl': Right to left.
-   * - 'ttb': Top to bottom.
-   *
-   * @type {string}
-   */
-  direction: 'ltr',
-
-  /**
-   * Set img src to background-image of its parent element.
-   * Images with various sizes can be displayed as same dimension without cropping work.
-   * fixedHeight or heightRatio is required.
-   *
-   * @type {boolean}
-   */
-  cover: false,
-
-  /**
-   * Whether to enable accessibility(aria and screen reader texts) or not.
-   *
-   * @type {boolean}
-   */
-  accessibility: true,
-
-  /**
-   * Whether to add tabindex="0" to visible slides or not.
-   *
-   * @type {boolean}
-   */
-  slideFocus: true,
-
-  /**
-   * Determine if a slider is navigation for another.
-   * Use "sync" API to synchronize two sliders.
-   *
-   * @type {boolean}
-   */
-  isNavigation: false,
-
-  /**
-   * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
-   *
-   * @type {boolean}
-   */
-  trimSpace: true,
-
-  /**
-   * The "is-active" class is added after transition as default.
-   * If true, it will be added before move.
-   *
-   * @type {boolean}
-   */
-  updateOnMove: false,
-
-  /**
-   * Throttle duration in milliseconds for the resize event.
-   *
-   * @type {number}
-   */
-  throttle: 100,
-
-  /**
-   * Whether to destroy a slider or not.
-   *
-   * @type {boolean}
-   */
-  destroy: false,
-
-  /**
-   * Options for specific breakpoints.
-   *
-   * @example
-   * {
-   *   1000: {
-   *     perPage: 3,
-   *     gap: 20
-   *   },
-   *   600: {
-   *     perPage: 1,
-   *     gap: 5,
-   *   }
-   * }
-   *
-   * @type {boolean|Object}
-   */
-  breakpoints: false,
-
-  /**
-   * Collection of class names.
-   *
-   * @see ./classes.js
-   *
-   * @type {Object}
-   */
-  classes: ELEMENT_CLASSES,
-
-  /**
-   * Collection of i18n texts.
-   *
-   * @see ./i18n.js
-   *
-   * @type {Object}
-   */
-  i18n: I18N
-};
-/**
- * Export state constants.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Splide has been just created.
- *
- * @type {number}
- */
-
-var CREATED = 1;
-/**
- * All components have been mounted and initialized.
- *
- * @type {number}
- */
-
-var MOUNTED = 2;
-/**
- * Splide is ready for transition.
- *
- * @type {number}
- */
-
-var IDLE = 3;
-/**
- * Splide is moving.
- *
- * @type {number}
- */
-
-var MOVING = 4;
-/**
- * Splide is moving.
- *
- * @type {number}
- */
-
-var DESTROYED = 5;
-var STATES = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  CREATED: CREATED,
-  MOUNTED: MOUNTED,
-  IDLE: IDLE,
-  MOVING: MOVING,
-  DESTROYED: DESTROYED
-});
-/**
- * The main class for applying Splide to an element.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The main class for applying Splide to an element,
- * providing some APIs to control the behavior.
- */
-
-var Splide$1 = /*#__PURE__*/function () {
-  /**
-   * Splide constructor.
-   *
-   * @throws {Error} When the given root element or selector is invalid.
-   *
-   * @param {Element|string}  root       - A selector for a root element or an element itself.
-   * @param {Object}          options    - Optional. Options to change default behaviour.
-   * @param {Object}          Components - Optional. Components.
-   */
-  function Splide$1(root, options, Components) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    if (Components === void 0) {
-      Components = {};
-    }
-
-    this.root = root instanceof Element ? root : document.querySelector(root);
-    exist(this.root, 'An invalid element/selector was given.');
-    this.Components = null;
-    this.Event = Event();
-    this.State = State(CREATED);
-    this.STATES = STATES;
-    this._o = merge(DEFAULTS, options);
-    this._i = 0;
-    this._c = Components;
-    this._e = {}; // Extensions
-
-    this._t = null; // Transition
-  }
-  /**
-   * Compose and mount components.
-   *
-   * @param {Object}   Extensions - Optional. Additional components.
-   * @param {function} Transition - Optional. Set a custom transition component.
-   *
-   * @return {Splide|undefined} - This instance or undefined if an exception occurred.
-   */
-
-
-  var _proto = Splide$1.prototype;
-
-  _proto.mount = function mount(Extensions, Transition) {
-    var _this = this;
-
-    if (Extensions === void 0) {
-      Extensions = this._e;
-    }
-
-    if (Transition === void 0) {
-      Transition = this._t;
+  function init() {
+    if (!isClone) {
+      slide.id = `${root.id}-slide${pad(index + 1)}`;
     }
-
-    // Reset the state.
-    this.State.set(CREATED);
-    this._e = Extensions;
-    this._t = Transition;
-    this.Components = compose(this, merge(this._c, Extensions), Transition);
-
-    try {
-      each(this.Components, function (component, key) {
-        var required = component.required;
-
-        if (required === undefined || required) {
-          component.mount && component.mount();
-        } else {
-          delete _this.Components[key];
-        }
-      });
-    } catch (e) {
-      error(e.message);
-      return;
+    if (isNavigation) {
+      const idx = isClone ? slideIndex : index;
+      const label = format(options.i18n.slideX, idx + 1);
+      const controls = Splide2.splides.map((splide) => splide.root.id).join(" ");
+      setAttribute(slide, ARIA_LABEL, label);
+      setAttribute(slide, ARIA_CONTROLS, controls);
+      setAttribute(slide, ROLE, "menuitem");
     }
-
-    var State = this.State;
-    State.set(MOUNTED);
-    each(this.Components, function (component) {
-      component.mounted && component.mounted();
-    });
-    this.emit('mounted');
-    State.set(IDLE);
-    this.emit('ready');
-    applyStyle(this.root, {
-      visibility: 'visible'
-    });
-    this.on('move drag', function () {
-      return State.set(MOVING);
-    }).on('moved dragged', function () {
-      return State.set(IDLE);
-    });
-    return this;
   }
-  /**
-   * Set sync target.
-   *
-   * @param {Splide} splide - A Splide instance.
-   *
-   * @return {Splide} - This instance.
-   */
-  ;
-
-  _proto.sync = function sync(splide) {
-    this.sibling = splide;
-    return this;
+  function destroy() {
+    destroyed = true;
+    destroyEvents();
+    removeClass(slide, STATUS_CLASSES);
+    removeAttribute(slide, ALL_ATTRIBUTES);
   }
-  /**
-   * Register callback fired on the given event(s).
-   *
-   * @param {string}   events  - An event name. Use space to separate multiple events.
-   *                             Also, namespace is accepted by dot, such as 'resize.{namespace}'.
-   * @param {function} handler - A callback function.
-   * @param {Element}  elm     - Optional. Native event will be listened to when this arg is provided.
-   * @param {Object}   options - Optional. Options for addEventListener.
-   *
-   * @return {Splide} - This instance.
-   */
-  ;
-
-  _proto.on = function on(events, handler, elm, options) {
-    if (elm === void 0) {
-      elm = null;
-    }
-
-    if (options === void 0) {
-      options = {};
+  function onMove(next, prev, dest) {
+    if (!destroyed) {
+      update.call(this);
+      if (dest === index) {
+        updateActivity.call(this, true);
+      }
     }
-
-    this.Event.on(events, handler, elm, options);
-    return this;
   }
-  /**
-   * Unsubscribe the given event.
-   *
-   * @param {string}  events - A event name.
-   * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
-   *
-   * @return {Splide} - This instance.
-   */
-  ;
-
-  _proto.off = function off(events, elm) {
-    if (elm === void 0) {
-      elm = null;
+  function update() {
+    if (!destroyed) {
+      const { index: currIndex } = Splide2;
+      updateActivity.call(this, isActive());
+      updateVisibility.call(this, isVisible());
+      toggleClass(slide, CLASS_PREV, index === currIndex - 1);
+      toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
     }
-
-    this.Event.off(events, elm);
-    return this;
   }
-  /**
-   * Emit an event.
-   *
-   * @param {string} event - An event name.
-   * @param {*}      args  - Any number of arguments passed to handlers.
-   */
-  ;
-
-  _proto.emit = function emit(event) {
-    var _this$Event;
-
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
+  function updateActivity(active) {
+    if (active !== hasClass(slide, CLASS_ACTIVE)) {
+      toggleClass(slide, CLASS_ACTIVE, active);
+      if (isNavigation) {
+        setAttribute(slide, ARIA_CURRENT, active || null);
+      }
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
     }
-
-    (_this$Event = this.Event).emit.apply(_this$Event, [event].concat(args));
-
-    return this;
   }
-  /**
-   * Go to the slide specified by the given control.
-   *
-   * @param {string|number} control - A control pattern.
-   * @param {boolean}       wait    - Optional. Whether to wait for transition.
-   */
-  ;
-
-  _proto.go = function go(control, wait) {
-    if (wait === void 0) {
-      wait = this.options.waitForTransition;
-    }
-
-    if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
-      this.Components.Controller.go(control, false);
+  function updateVisibility(visible) {
+    const ariaHidden = !visible && !isActive();
+    setAttribute(slide, ARIA_HIDDEN, ariaHidden || null);
+    setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null);
+    if (focusableNodes) {
+      focusableNodes.forEach((node) => {
+        setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null);
+      });
     }
-
-    return this;
-  }
-  /**
-   * Verify whether the slider type is the given one or not.
-   *
-   * @param {string} type - A slider type.
-   *
-   * @return {boolean} - True if the slider type is the provided type or false if not.
-   */
-  ;
-
-  _proto.is = function is(type) {
-    return type === this._o.type;
-  }
-  /**
-   * Insert a slide.
-   *
-   * @param {Element|string} slide - A slide element to be added.
-   * @param {number}         index - A slide will be added at the position.
-   */
-  ;
-
-  _proto.add = function add(slide, index) {
-    if (index === void 0) {
-      index = -1;
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
     }
-
-    this.Components.Elements.add(slide, index, this.refresh.bind(this));
-    return this;
-  }
-  /**
-   * Remove the slide designated by the index.
-   *
-   * @param {number} index - A slide index.
-   */
-  ;
-
-  _proto.remove = function remove(index) {
-    this.Components.Elements.remove(index);
-    this.refresh();
-    return this;
   }
-  /**
-   * Destroy all Slide objects and clones and recreate them again.
-   */
-  ;
-
-  _proto.refresh = function refresh() {
-    this.emit('refresh:before').emit('refresh').emit('resize');
-    return this;
+  function rule(prop, value, useContainer) {
+    const selector = `#${slide.id}${container && useContainer ? ` > .${CLASS_CONTAINER}` : ""}`;
+    Components.Style.rule(selector, prop, value);
   }
-  /**
-   * Destroy the Splide.
-   * "Completely" boolean is mainly for breakpoints.
-   *
-   * @param {boolean} completely - Destroy completely.
-   */
-  ;
-
-  _proto.destroy = function destroy(completely) {
-    var _this2 = this;
-
-    if (completely === void 0) {
-      completely = true;
-    }
-
-    // Postpone destroy because it should be done after mount.
-    if (this.State.is(CREATED)) {
-      this.on('ready', function () {
-        return _this2.destroy(completely);
-      });
-      return;
-    }
-
-    values(this.Components).reverse().forEach(function (component) {
-      component.destroy && component.destroy(completely);
-    });
-    this.emit('destroy', completely); // Destroy all event handlers, including ones for native events.
-
-    this.Event.destroy();
-    this.State.set(DESTROYED);
-    return this;
+  function isActive() {
+    return Splide2.index === index;
   }
-  /**
-   * Return the current slide index.
-   *
-   * @return {number} - The current slide index.
-   // */
-  ;
-
-  _createClass(Splide$1, [{
-    key: "index",
-    get: function get() {
-      return this._i;
-    }
-    /**
-     * Set the current slide index.
-     *
-     * @param {number|string} index - A new index.
-     */
-    ,
-    set: function set(index) {
-      this._i = parseInt(index);
-    }
-    /**
-     * Return length of slides.
-     * This is an alias of Elements.length.
-     *
-     * @return {number} - A number of slides.
-     */
-
-  }, {
-    key: "length",
-    get: function get() {
-      return this.Components.Elements.length;
-    }
-    /**
-     * Return options.
-     *
-     * @return {Object} - Options object.
-     */
-
-  }, {
-    key: "options",
-    get: function get() {
-      return this._o;
-    }
-    /**
-     * Set options with merging the given object to the current one.
-     *
-     * @param {Object} options - New options.
-     */
-    ,
-    set: function set(options) {
-      var created = this.State.is(CREATED);
-
-      if (!created) {
-        this.emit('update');
-      }
-
-      this._o = merge(this._o, options);
-
-      if (!created) {
-        this.emit('updated', this._o);
-      }
-    }
-    /**
-     * Return the class list.
-     * This is an alias of Splide.options.classList.
-     *
-     * @return {Object} - An object containing all class list.
-     */
-
-  }, {
-    key: "classes",
-    get: function get() {
-      return this._o.classes;
-    }
-    /**
-     * Return the i18n strings.
-     * This is an alias of Splide.options.i18n.
-     *
-     * @return {Object} - An object containing all i18n strings.
-     */
-
-  }, {
-    key: "i18n",
-    get: function get() {
-      return this._o.i18n;
+  function isVisible() {
+    if (Splide2.is(FADE)) {
+      return isActive();
     }
-  }]);
-
-  return Splide$1;
-}();
-/**
- * The component for initializing options.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for initializing options.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-
-var Options = function Options(Splide) {
-  /**
-   * Retrieve options from the data attribute.
-   * Note that IE10 doesn't support dataset property.
-   *
-   * @type {string}
-   */
-  var options = getAttribute(Splide.root, 'data-splide');
-
-  if (options) {
-    try {
-      Splide.options = JSON.parse(options);
-    } catch (e) {
-      error(e.message);
-    }
-  }
-
-  return {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      if (Splide.State.is(CREATED)) {
-        Splide.index = Splide.options.start;
-      }
-    }
-  };
-};
-/**
- * Export layout modes.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Enumerate slides from right to left.
- *
- * @type {string}
- */
-
-
-var RTL = 'rtl';
-/**
- * Enumerate slides in a col.
- *
- * @type {string}
- */
-
-var TTB = 'ttb';
-/**
- * The sub component for handling each slide.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Events for restoring original styles.
- *
- * @type {string}
- */
-
-var STYLE_RESTORE_EVENTS = 'update.slide';
-/**
- * The sub component for handling each slide.
- *
- * @param {Splide}  Splide    - A Splide instance.
- * @param {number}  index     - An unique slide index.
- * @param {number}  realIndex - Clones should pass a real slide index.
- * @param {Element} slide     - A slide element.
- *
- * @return {Object} - The sub component object.
- */
-
-var Slide = function Slide(Splide, index, realIndex, slide) {
-  /**
-   * Whether to update "is-active" class before or after transition.
-   *
-   * @type {boolean}
-   */
-  var updateOnMove = Splide.options.updateOnMove;
-  /**
-   * Events when the slide status is updated.
-   * Append a namespace to remove listeners later.
-   *
-   * @type {string}
-   */
-
-  var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resized.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
-  /**
-   * Slide sub component object.
-   *
-   * @type {Object}
-   */
-
-  var Slide = {
-    /**
-     * Slide element.
-     *
-     * @type {Element}
-     */
-    slide: slide,
-
-    /**
-     * Slide index.
-     *
-     * @type {number}
-     */
-    index: index,
-
-    /**
-     * Real index for clones.
-     *
-     * @type {number}
-     */
-    realIndex: realIndex,
-
-    /**
-     * Container element if available.
-     *
-     * @type {Element|undefined}
-     */
-    container: child(slide, Splide.classes.container),
-
-    /**
-     * Whether this is a cloned slide or not.
-     *
-     * @type {boolean}
-     */
-    isClone: realIndex > -1,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this3 = this;
-
-      if (!this.isClone) {
-        slide.id = Splide.root.id + "-slide" + pad(index + 1);
-      }
-
-      Splide.on(STATUS_UPDATE_EVENTS, function () {
-        return _this3.update();
-      }).on(STYLE_RESTORE_EVENTS, restoreStyles).on('click', function () {
-        return Splide.emit('click', _this3);
-      }, slide);
-      /*
-       * Add "is-active" class to a clone element temporarily
-       * and it will be removed on "moved" event.
-       */
-
-      if (updateOnMove) {
-        Splide.on('move.slide', function (newIndex) {
-          if (newIndex === realIndex) {
-            _update(true, false);
-          }
-        });
-      } // Make sure the slide is shown.
-
-
-      applyStyle(slide, {
-        display: ''
-      }); // Hold the original styles.
-
-      this.styles = getAttribute(slide, 'style') || '';
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      Splide.off(STATUS_UPDATE_EVENTS).off(STYLE_RESTORE_EVENTS).off('click', slide);
-      removeClass(slide, values(STATUS_CLASSES));
-      restoreStyles();
-      removeAttribute(this.container, 'style');
-    },
-
-    /**
-     * Update active and visible status.
-     */
-    update: function update() {
-      _update(this.isActive(), false);
-
-      _update(this.isVisible(), true);
-    },
-
-    /**
-     * Check whether this slide is active or not.
-     *
-     * @return {boolean} - True if the slide is active or false if not.
-     */
-    isActive: function isActive() {
-      return Splide.index === index;
-    },
-
-    /**
-     * Check whether this slide is visible in the viewport or not.
-     *
-     * @return {boolean} - True if the slide is visible or false if not.
-     */
-    isVisible: function isVisible() {
-      var active = this.isActive();
-
-      if (Splide.is(FADE) || active) {
-        return active;
-      }
-
-      var ceil = Math.ceil;
-      var trackRect = getRect(Splide.Components.Elements.track);
-      var slideRect = getRect(slide);
-
-      if (Splide.options.direction === TTB) {
-        return trackRect.top <= slideRect.top && slideRect.bottom <= ceil(trackRect.bottom);
-      }
-
-      return trackRect.left <= slideRect.left && slideRect.right <= ceil(trackRect.right);
-    },
-
-    /**
-     * Calculate how far this slide is from another slide and
-     * return true if the distance is within the given number.
-     *
-     * @param {number} from   - Index of a target slide.
-     * @param {number} within - True if the slide is within this number.
-     *
-     * @return {boolean} - True if the slide is within the number or false otherwise.
-     */
-    isWithin: function isWithin(from, within) {
-      var diff = Math.abs(from - index);
-
-      if (!Splide.is(SLIDE) && !this.isClone) {
-        diff = Math.min(diff, Splide.length - diff);
-      }
-
-      return diff < within;
-    }
-  };
-  /**
-   * Update classes for activity or visibility.
-   *
-   * @param {boolean} active        - Is active/visible or not.
-   * @param {boolean} forVisibility - Toggle classes for activity or visibility.
-   */
-
-  function _update(active, forVisibility) {
-    var type = forVisibility ? 'visible' : 'active';
-    var className = STATUS_CLASSES[type];
-
-    if (active) {
-      addClass(slide, className);
-      Splide.emit("" + type, Slide);
-    } else {
-      if (hasClass(slide, className)) {
-        removeClass(slide, className);
-        Splide.emit("" + (forVisibility ? 'hidden' : 'inactive'), Slide);
-      }
-    }
-  }
-  /**
-   * Restore the original styles.
-   */
-
-
-  function restoreStyles() {
-    setAttribute(slide, 'style', Slide.styles);
-  }
-
-  return Slide;
-};
-/**
- * The component for main elements.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The property name for UID stored in a window object.
- *
- * @type {string}
- */
-
-
-var UID_NAME = 'uid';
-/**
- * The component for main elements.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Elements = function Elements(Splide, Components) {
-  /**
-   * Hold the root element.
-   *
-   * @type {Element}
-   */
-  var root = Splide.root;
-  /**
-   * Hold the class list.
-   *
-   * @type {Object}
-   */
-
-  var classes = Splide.classes;
-  /**
-   * Store Slide objects.
-   *
-   * @type {Array}
-   */
-
-  var Slides = [];
-  /*
-   * Assign unique ID to the root element if it doesn't have the one.
-   * Note that IE doesn't support padStart() to fill the uid by 0.
-   */
-
-  if (!root.id) {
-    window.splide = window.splide || {};
-    var uid = window.splide[UID_NAME] || 0;
-    window.splide[UID_NAME] = ++uid;
-    root.id = "splide" + pad(uid);
-  }
-  /**
-   * Elements component object.
-   *
-   * @type {Object}
-   */
-
-
-  var Elements = {
-    /**
-     * Called when the component is mounted.
-     * Collect main elements and store them as member properties.
-     */
-    mount: function mount() {
-      var _this4 = this;
-
-      this.init();
-      Splide.on('refresh', function () {
-        _this4.destroy();
-
-        _this4.init();
-      }).on('updated', function () {
-        removeClass(root, getClasses());
-        addClass(root, getClasses());
-      });
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      Slides.forEach(function (Slide) {
-        Slide.destroy();
-      });
-      Slides = [];
-      removeClass(root, getClasses());
-    },
-
-    /**
-     * Initialization.
-     */
-    init: function init() {
-      var _this5 = this;
-
-      collect();
-      addClass(root, getClasses());
-      this.slides.forEach(function (slide, index) {
-        _this5.register(slide, index, -1);
-      });
-    },
-
-    /**
-     * Register a slide to create a Slide object and handle its behavior.
-     *
-     * @param {Element} slide     - A slide element.
-     * @param {number}  index     - A unique index. This can be negative.
-     * @param {number}  realIndex - A real index for clones. Set -1 for real slides.
-     */
-    register: function register(slide, index, realIndex) {
-      var SlideObject = Slide(Splide, index, realIndex, slide);
-      SlideObject.mount();
-      Slides.push(SlideObject);
-    },
-
-    /**
-     * Return the Slide object designated by the index.
-     * Note that "find" is not supported by IE.
-     *
-     * @return {Object|undefined} - A Slide object if available. Undefined if not.
-     */
-    getSlide: function getSlide(index) {
-      return Slides.filter(function (Slide) {
-        return Slide.index === index;
-      })[0];
-    },
-
-    /**
-     * Return all Slide objects.
-     *
-     * @param {boolean} includeClones - Whether to include cloned slides or not.
-     *
-     * @return {Object[]} - Slide objects.
-     */
-    getSlides: function getSlides(includeClones) {
-      return includeClones ? Slides : Slides.filter(function (Slide) {
-        return !Slide.isClone;
-      });
-    },
-
-    /**
-     * Return Slide objects belonging to the given page.
-     *
-     * @param {number} page - A page number.
-     *
-     * @return {Object[]} - An array containing Slide objects.
-     */
-    getSlidesByPage: function getSlidesByPage(page) {
-      var idx = Components.Controller.toIndex(page);
-      var options = Splide.options;
-      var max = options.focus !== false ? 1 : options.perPage;
-      return Slides.filter(function (_ref2) {
-        var index = _ref2.index;
-        return idx <= index && index < idx + max;
-      });
-    },
-
-    /**
-     * Insert a slide to a slider.
-     * Need to refresh Splide after adding a slide.
-     *
-     * @param {Node|string} slide    - A slide element to be added.
-     * @param {number}      index    - A slide will be added at the position.
-     * @param {Function}    callback - Called right after the slide is added to the DOM tree.
-     */
-    add: function add(slide, index, callback) {
-      if (typeof slide === 'string') {
-        slide = domify(slide);
-      }
-
-      if (slide instanceof Element) {
-        var ref = this.slides[index]; // This will be removed in mount() of a Slide component.
-
-        applyStyle(slide, {
-          display: 'none'
-        });
-
-        if (ref) {
-          before(slide, ref);
-          this.slides.splice(index, 0, slide);
-        } else {
-          append(this.list, slide);
-          this.slides.push(slide);
-        }
-
-        loaded(slide, function () {
-          callback && callback(slide);
-        });
-      }
-    },
-
-    /**
-     * Remove a slide from a slider.
-     * Need to refresh Splide after removing a slide.
-     *
-     * @param index - Slide index.
-     */
-    remove: function remove(index) {
-      _remove(this.slides.splice(index, 1)[0]);
-    },
-
-    /**
-     * Trigger the provided callback for each Slide object.
-     *
-     * @param {Function} callback - A callback function. The first argument will be the Slide object.
-     */
-    each: function each(callback) {
-      Slides.forEach(callback);
-    },
-
-    /**
-     * Return slides length without clones.
-     *
-     * @return {number} - Slide length.
-     */
-    get length() {
-      return this.slides.length;
-    },
-
-    /**
-     * Return "SlideObjects" length including clones.
-     *
-     * @return {number} - Slide length including clones.
-     */
-    get total() {
-      return Slides.length;
-    }
-
-  };
-  /**
-   * Collect elements.
-   */
-
-  function collect() {
-    Elements.slider = child(root, classes.slider);
-    Elements.track = find(root, "." + classes.track);
-    Elements.list = child(Elements.track, classes.list);
-    exist(Elements.track && Elements.list, 'Track or list was not found.');
-    Elements.slides = children(Elements.list, classes.slide);
-    var arrows = findParts(classes.arrows);
-    Elements.arrows = {
-      prev: find(arrows, "." + classes.prev),
-      next: find(arrows, "." + classes.next)
-    };
-    var autoplay = findParts(classes.autoplay);
-    Elements.bar = find(findParts(classes.progress), "." + classes.bar);
-    Elements.play = find(autoplay, "." + classes.play);
-    Elements.pause = find(autoplay, "." + classes.pause);
-    Elements.track.id = Elements.track.id || root.id + "-track";
-    Elements.list.id = Elements.list.id || root.id + "-list";
-  }
-  /**
-   * Return class names for the root element.
-   */
-
-
-  function getClasses() {
-    var rootClass = classes.root;
-    var options = Splide.options;
-    return [rootClass + "--" + options.type, rootClass + "--" + options.direction, options.drag ? rootClass + "--draggable" : '', options.isNavigation ? rootClass + "--nav" : '', STATUS_CLASSES.active];
-  }
-  /**
-   * Find parts only from children of the root or track.
-   *
-   * @return {Element} - A found element or undefined.
-   */
-
-
-  function findParts(className) {
-    return child(root, className) || child(Elements.slider, className);
-  }
-
-  return Elements;
-};
-/**
- * The component for controlling the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var floor = Math.floor;
-/**
- * The component for controlling the track.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Controller = function Controller(Splide, Components) {
-  /**
-   * Store current options.
-   *
-   * @type {Object}
-   */
-  var options;
-  /**
-   * True if the slide is LOOP mode.
-   *
-   * @type {boolean}
-   */
-
-  var isLoop;
-  /**
-   * Controller component object.
-   *
-   * @type {Object}
-   */
-
-  var Controller = {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      options = Splide.options;
-      isLoop = Splide.is(LOOP);
-      bind();
-    },
-
-    /**
-     * Make track run by the given control.
-     * - "+{i}" : Increment the slide index by i.
-     * - "-{i}" : Decrement the slide index by i.
-     * - "{i}"  : Go to the slide whose index is i.
-     * - ">"    : Go to next page.
-     * - "<"    : Go to prev page.
-     * - ">{i}" : Go to page i.
-     *
-     * @param {string|number} control  - A control pattern.
-     * @param {boolean}       silently - Go to the destination without event emission.
-     */
-    go: function go(control, silently) {
-      var destIndex = this.trim(this.parse(control));
-      Components.Track.go(destIndex, this.rewind(destIndex), silently);
-    },
-
-    /**
-     * Parse the given control and return the destination index for the track.
-     *
-     * @param {string} control - A control target pattern.
-     *
-     * @return {number} - A parsed target.
-     */
-    parse: function parse(control) {
-      var index = Splide.index;
-      var matches = String(control).match(/([+\-<>]+)(\d+)?/);
-      var indicator = matches ? matches[1] : '';
-      var number = matches ? parseInt(matches[2]) : 0;
-
-      switch (indicator) {
-        case '+':
-          index += number || 1;
-          break;
-
-        case '-':
-          index -= number || 1;
-          break;
-
-        case '>':
-        case '<':
-          index = parsePage(number, index, indicator === '<');
-          break;
-
-        default:
-          index = parseInt(control);
-      }
-
-      return index;
-    },
-
-    /**
-     * Compute index from the given page number.
-     *
-     * @param {number} page - Page number.
-     *
-     * @return {number} - A computed page number.
-     */
-    toIndex: function toIndex(page) {
-      if (hasFocus()) {
-        return page;
-      }
-
-      var length = Splide.length;
-      var perPage = options.perPage;
-      var index = page * perPage;
-      index = index - (this.pageLength * perPage - length) * floor(index / length); // Adjustment for the last page.
-
-      if (length - perPage <= index && index < length) {
-        index = length - perPage;
-      }
-
-      return index;
-    },
-
-    /**
-     * Compute page number from the given slide index.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - A computed page number.
-     */
-    toPage: function toPage(index) {
-      if (hasFocus()) {
-        return index;
-      }
-
-      var length = Splide.length;
-      var perPage = options.perPage; // Make the last "perPage" number of slides belong to the last page.
-
-      if (length - perPage <= index && index < length) {
-        return floor((length - 1) / perPage);
-      }
-
-      return floor(index / perPage);
-    },
-
-    /**
-     * Trim the given index according to the current mode.
-     * Index being returned could be less than 0 or greater than the length in Loop mode.
-     *
-     * @param {number} index - An index being trimmed.
-     *
-     * @return {number} - A trimmed index.
-     */
-    trim: function trim(index) {
-      if (!isLoop) {
-        index = options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
-      }
-
-      return index;
-    },
-
-    /**
-     * Rewind the given index if it's out of range.
-     *
-     * @param {number} index - An index.
-     *
-     * @return {number} - A rewound index.
-     */
-    rewind: function rewind(index) {
-      var edge = this.edgeIndex;
-
-      if (isLoop) {
-        while (index > edge) {
-          index -= edge + 1;
-        }
-
-        while (index < 0) {
-          index += edge + 1;
-        }
-      } else {
-        if (index > edge) {
-          index = 0;
-        } else if (index < 0) {
-          index = edge;
-        }
-      }
-
-      return index;
-    },
-
-    /**
-     * Check if the direction is "rtl" or not.
-     *
-     * @return {boolean} - True if "rtl" or false if not.
-     */
-    isRtl: function isRtl() {
-      return options.direction === RTL;
-    },
-
-    /**
-     * Return the page length.
-     *
-     * @return {number} - Max page number.
-     */
-    get pageLength() {
-      var length = Splide.length;
-      return hasFocus() ? length : Math.ceil(length / options.perPage);
-    },
-
-    /**
-     * Return the edge index.
-     *
-     * @return {number} - Edge index.
-     */
-    get edgeIndex() {
-      var length = Splide.length;
-
-      if (!length) {
-        return 0;
-      }
-
-      if (hasFocus() || options.isNavigation || isLoop) {
-        return length - 1;
-      }
-
-      return length - options.perPage;
-    },
-
-    /**
-     * Return the index of the previous slide.
-     *
-     * @return {number} - The index of the previous slide if available. -1 otherwise.
-     */
-    get prevIndex() {
-      var prev = Splide.index - 1;
-
-      if (isLoop || options.rewind) {
-        prev = this.rewind(prev);
-      }
-
-      return prev > -1 ? prev : -1;
-    },
-
-    /**
-     * Return the index of the next slide.
-     *
-     * @return {number} - The index of the next slide if available. -1 otherwise.
-     */
-    get nextIndex() {
-      var next = Splide.index + 1;
-
-      if (isLoop || options.rewind) {
-        next = this.rewind(next);
-      }
-
-      return Splide.index < next && next <= this.edgeIndex || next === 0 ? next : -1;
-    }
-
-  };
-  /**
-   * Listen to some events.
-   */
-
-  function bind() {
-    Splide.on('move', function (newIndex) {
-      Splide.index = newIndex;
-    }).on('updated refresh', function (newOptions) {
-      options = newOptions || options;
-      Splide.index = between(Splide.index, 0, Controller.edgeIndex);
-    });
-  }
-  /**
-   * Verify if the focus option is available or not.
-   *
-   * @return {boolean} - True if a slider has the focus option.
-   */
-
-
-  function hasFocus() {
-    return options.focus !== false;
-  }
-  /**
-   * Return the next or previous page index computed by the page number and current index.
-   *
-   * @param {number}  number - Specify the page number.
-   * @param {number}  index  - Current index.
-   * @param {boolean} prev   - Prev or next.
-   *
-   * @return {number} - Slide index.
-   */
-
-
-  function parsePage(number, index, prev) {
-    if (number > -1) {
-      return Controller.toIndex(number);
-    }
-
-    var perMove = options.perMove;
-    var sign = prev ? -1 : 1;
-
-    if (perMove) {
-      return index + perMove * sign;
-    }
-
-    return Controller.toIndex(Controller.toPage(index) + sign);
-  }
-
-  return Controller;
-};
-/**
- * The component for moving list in the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var abs$1 = Math.abs;
-/**
- * The component for moving list in the track.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Track = function Track(Splide, Components) {
-  /**
-   * Hold the Layout component.
-   *
-   * @type {Object}
-   */
-  var Layout;
-  /**
-   * Hold the Layout component.
-   *
-   * @type {Object}
-   */
-
-  var Elements;
-  /**
-   * Store the list element.
-   *
-   * @type {Element}
-   */
-
-  var list;
-  /**
-   * Whether the current direction is vertical or not.
-   *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Whether the slider type is FADE or not.
-   *
-   * @type {boolean}
-   */
-
-  var isFade = Splide.is(FADE);
-  /**
-   * Whether the slider direction is RTL or not.
-   *
-   * @type {boolean}
-   */
-
-  var isRTL = Splide.options.direction === RTL;
-  /**
-   * This will be true while transitioning from the last index to the first one.
-   *
-   * @type {boolean}
-   */
-
-  var isLoopPending = false;
-  /**
-   * Sign for the direction. Only RTL mode uses the positive sign.
-   *
-   * @type {number}
-   */
-
-  var sign = isRTL ? 1 : -1;
-  /**
-   * Track component object.
-   *
-   * @type {Object}
-   */
-
-  var Track = {
-    /**
-     * Make public the sign defined locally.
-     *
-     * @type {number}
-     */
-    sign: sign,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Elements = Components.Elements;
-      Layout = Components.Layout;
-      list = Elements.list;
-    },
-
-    /**
-     * Called after the component is mounted.
-     * The resize event must be registered after the Layout's one is done.
-     */
-    mounted: function mounted() {
-      var _this6 = this;
-
-      if (!isFade) {
-        this.jump(0);
-        Splide.on('mounted resize updated', function () {
-          _this6.jump(Splide.index);
-        });
-      }
-    },
-
-    /**
-     * Go to the given destination index.
-     * After arriving there, the track is jump to the new index without animation, mainly for loop mode.
-     *
-     * @param {number}  destIndex - A destination index.
-     *                              This can be negative or greater than slides length for reaching clones.
-     * @param {number}  newIndex  - An actual new index. They are always same in Slide and Rewind mode.
-     * @param {boolean} silently  - If true, suppress emitting events.
-     */
-    go: function go(destIndex, newIndex, silently) {
-      var newPosition = getTrimmedPosition(destIndex);
-      var prevIndex = Splide.index; // Prevent any actions while transitioning from the last index to the first one for jump.
-
-      if (Splide.State.is(MOVING) && isLoopPending) {
-        return;
-      }
-
-      isLoopPending = destIndex !== newIndex;
-
-      if (!silently) {
-        Splide.emit('move', newIndex, prevIndex, destIndex);
-      }
-
-      if (Math.abs(newPosition - this.position) >= 1 || isFade) {
-        Components.Transition.start(destIndex, newIndex, prevIndex, this.toCoord(newPosition), function () {
-          onTransitionEnd(destIndex, newIndex, prevIndex, silently);
-        });
-      } else {
-        if (destIndex !== prevIndex && Splide.options.trimSpace === 'move') {
-          Components.Controller.go(destIndex + destIndex - prevIndex, silently);
-        } else {
-          onTransitionEnd(destIndex, newIndex, prevIndex, silently);
-        }
-      }
-    },
-
-    /**
-     * Move the track to the specified index.
-     *
-     * @param {number} index - A destination index where the track jumps.
-     */
-    jump: function jump(index) {
-      this.translate(getTrimmedPosition(index));
-    },
-
-    /**
-     * Set the list position by CSS translate property.
-     *
-     * @param {number} position - A new position value.
-     */
-    translate: function translate(position) {
-      applyStyle(list, {
-        transform: "translate" + (isVertical ? 'Y' : 'X') + "(" + position + "px)"
-      });
-    },
-
-    /**
-     * Cancel the transition and set the list position.
-     * Also, loop the slider if necessary.
-     */
-    cancel: function cancel() {
-      if (Splide.is(LOOP)) {
-        this.shift();
-      } else {
-        // Ensure the current position.
-        this.translate(this.position);
-      }
-
-      applyStyle(list, {
-        transition: ''
-      });
-    },
-
-    /**
-     * Shift the slider if it exceeds borders on the edge.
-     */
-    shift: function shift() {
-      var position = abs$1(this.position);
-      var left = abs$1(this.toPosition(0));
-      var right = abs$1(this.toPosition(Splide.length));
-      var innerSize = right - left;
-
-      if (position < left) {
-        position += innerSize;
-      } else if (position > right) {
-        position -= innerSize;
-      }
-
-      this.translate(sign * position);
-    },
-
-    /**
-     * Trim redundant spaces on the left or right edge if necessary.
-     *
-     * @param {number} position - Position value to be trimmed.
-     *
-     * @return {number} - Trimmed position.
-     */
-    trim: function trim(position) {
-      if (!Splide.options.trimSpace || Splide.is(LOOP)) {
-        return position;
-      }
-
-      var edge = sign * (Layout.totalSize() - Layout.size - Layout.gap);
-      return between(position, edge, 0);
-    },
-
-    /**
-     * Calculate the closest slide index from the given position.
-     *
-     * @param {number} position - A position converted to an slide index.
-     *
-     * @return {number} - The closest slide index.
-     */
-    toIndex: function toIndex(position) {
-      var _this7 = this;
-
-      var index = 0;
-      var minDistance = Infinity;
-      Elements.getSlides(true).forEach(function (Slide) {
-        var slideIndex = Slide.index;
-        var distance = abs$1(_this7.toPosition(slideIndex) - position);
-
-        if (distance < minDistance) {
-          minDistance = distance;
-          index = slideIndex;
-        }
-      });
-      return index;
-    },
-
-    /**
-     * Return coordinates object by the given position.
-     *
-     * @param {number} position - A position value.
-     *
-     * @return {Object} - A coordinates object.
-     */
-    toCoord: function toCoord(position) {
-      return {
-        x: isVertical ? 0 : position,
-        y: isVertical ? position : 0
-      };
-    },
-
-    /**
-     * Calculate the track position by a slide index.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {Object} - Calculated position.
-     */
-    toPosition: function toPosition(index) {
-      var position = Layout.totalSize(index) - Layout.slideSize(index) - Layout.gap;
-      return sign * (position + this.offset(index));
-    },
-
-    /**
-     * Return the current offset value, considering direction.
-     *
-     * @return {number} - Offset amount.
-     */
-    offset: function offset(index) {
-      var focus = Splide.options.focus;
-      var slideSize = Layout.slideSize(index);
-
-      if (focus === 'center') {
-        return -(Layout.size - slideSize) / 2;
-      }
-
-      return -(parseInt(focus) || 0) * (slideSize + Layout.gap);
-    },
-
-    /**
-     * Return the current position.
-     * This returns the correct position even while transitioning by CSS.
-     *
-     * @return {number} - Current position.
-     */
-    get position() {
-      var prop = isVertical ? 'top' : isRTL ? 'right' : 'left';
-      return getRect(list)[prop] - (getRect(Elements.track)[prop] - Layout.padding[prop] * sign);
-    }
-
-  };
-  /**
-   * Called whenever slides arrive at a destination.
-   *
-   * @param {number}  destIndex - A destination index.
-   * @param {number}  newIndex  - A new index.
-   * @param {number}  prevIndex - A previous index.
-   * @param {boolean} silently  - If true, suppress emitting events.
-   */
-
-  function onTransitionEnd(destIndex, newIndex, prevIndex, silently) {
-    applyStyle(list, {
-      transition: ''
-    });
-    isLoopPending = false;
-
-    if (!isFade) {
-      Track.jump(newIndex);
-    }
-
-    if (!silently) {
-      Splide.emit('moved', newIndex, prevIndex, destIndex);
-    }
-  }
-  /**
-   * Convert index to the trimmed position.
-   *
-   * @return {number} - Trimmed position.
-   */
-
-
-  function getTrimmedPosition(index) {
-    return Track.trim(Track.toPosition(index));
-  }
-
-  return Track;
-};
-/**
- * The component for cloning some slides for "loop" mode of the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for cloning some slides for "loop" mode of the track.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Clones = function Clones(Splide, Components) {
-  /**
-   * Store information of all clones.
-   *
-   * @type {Array}
-   */
-  var clones = [];
-  /**
-   * Store the current clone count on one side.
-   *
-   * @type {number}
-   */
-
-  var cloneCount = 0;
-  /**
-   * Keep Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Clones component object.
-   *
-   * @type {Object}
-   */
-
-  var Clones = {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this8 = this;
-
-      if (Splide.is(LOOP)) {
-        init();
-        Splide.on('refresh:before', function () {
-          _this8.destroy();
-        }).on('refresh', init).on('resize', function () {
-          if (cloneCount !== getCloneCount()) {
-            // Destroy before refresh not to collect clones by the Elements component.
-            _this8.destroy();
-
-            Splide.refresh();
-          }
-        });
-      }
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      _remove(clones);
-
-      clones = [];
-    },
-
-    /**
-     * Return all clones.
-     *
-     * @return {Element[]} - Cloned elements.
-     */
-    get clones() {
-      return clones;
-    },
-
-    /**
-     * Return clone length.
-     *
-     * @return {number} - A length of clones.
-     */
-    get length() {
-      return clones.length;
-    }
-
-  };
-  /**
-   * Initialization.
-   */
-
-  function init() {
-    Clones.destroy();
-    cloneCount = getCloneCount();
-    generateClones(cloneCount);
-  }
-  /**
-   * Generate and append/prepend clones.
-   *
-   * @param {number} count - The half number of clones.
-   */
-
-
-  function generateClones(count) {
-    var length = Elements.length,
-        register = Elements.register;
-
-    if (length) {
-      var slides = Elements.slides;
-
-      while (slides.length < count) {
-        slides = slides.concat(slides);
-      } // Clones after the last element.
-
-
-      slides.slice(0, count).forEach(function (elm, index) {
-        var clone = cloneDeeply(elm);
-        append(Elements.list, clone);
-        clones.push(clone);
-        register(clone, index + length, index % length);
-      }); // Clones before the first element.
-
-      slides.slice(-count).forEach(function (elm, index) {
-        var clone = cloneDeeply(elm);
-        before(clone, slides[0]);
-        clones.push(clone);
-        register(clone, index - count, (length + index - count % length) % length);
-      });
-    }
-  }
-  /**
-   * Return half count of clones to be generated.
-   * Clone count is determined by:
-   * - "clones" value in the options.
-   * - Number of slides that can be placed in a view in "fixed" mode.
-   * - Max pages a flick action can move.
-   * - Whether the slide length is enough for perPage.
-   *
-   * @return {number} - Count for clones.
-   */
-
-
-  function getCloneCount() {
-    var options = Splide.options;
-
-    if (options.clones) {
-      return options.clones;
-    } // Use the slide length in autoWidth mode because the number cannot be calculated.
-
-
-    var baseCount = options.autoWidth || options.autoHeight ? Elements.length : options.perPage;
-    var dimension = options.direction === TTB ? 'Height' : 'Width';
-    var fixedSize = toPixel(Splide.root, options["fixed" + dimension]);
-
-    if (fixedSize) {
-      // Roughly calculate the count. This needs not to be strict.
-      baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
-    }
-
-    return baseCount * (options.drag ? options.flickMaxPages + 1 : 1);
-  }
-  /**
-   * Clone deeply the given element.
-   *
-   * @param {Element} elm - An element being duplicated.
-   *
-   * @return {Node} - A cloned node(element).
-   */
-
-
-  function cloneDeeply(elm) {
-    var clone = elm.cloneNode(true);
-    addClass(clone, Splide.classes.clone); // ID should not be duplicated.
-
-    removeAttribute(clone, 'id');
-    return clone;
-  }
-
-  return Clones;
-};
-/**
- * The resolver component for horizontal layout.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The resolver component for horizontal layout.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The resolver object.
- */
-
-
-var Horizontal = function Horizontal(Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Keep the root element.
-   *
-   * @type {Element}
-   */
-
-  var root = Splide.root;
-  /**
-   * Keep the track element.
-   *
-   * @type {Element}
-   */
-
-  var track;
-  /**
-   * Keep the latest options.
-   *
-   * @type {Element}
-   */
-
-  var options = Splide.options;
-  return {
-    /**
-     * Margin property name.
-     *
-     * @type {string}
-     */
-    margin: 'margin' + (options.direction === RTL ? 'Left' : 'Right'),
-
-    /**
-     * Always 0 because the height will be determined by inner contents.
-     *
-     * @type {number}
-     */
-    height: 0,
-
-    /**
-     * Initialization.
-     */
-    init: function init() {
-      this.resize();
-    },
-
-    /**
-     * Resize gap and padding.
-     * This must be called on init.
-     */
-    resize: function resize() {
-      options = Splide.options;
-      track = Elements.track;
-      this.gap = toPixel(root, options.gap);
-      var padding = options.padding;
-      var left = toPixel(root, padding.left || padding);
-      var right = toPixel(root, padding.right || padding);
-      this.padding = {
-        left: left,
-        right: right
-      };
-      applyStyle(track, {
-        paddingLeft: unit(left),
-        paddingRight: unit(right)
-      });
-    },
-
-    /**
-     * Return total width from the left of the list to the right of the slide specified by the provided index.
-     *
-     * @param {number} index - Optional. A slide index. If undefined, total width of the slider will be returned.
-     *
-     * @return {number} - Total width to the right side of the specified slide, or 0 for an invalid index.
-     */
-    totalWidth: function totalWidth(index) {
-      if (index === void 0) {
-        index = Splide.length - 1;
-      }
-
-      var Slide = Elements.getSlide(index);
-      var width = 0;
-
-      if (Slide) {
-        var slideRect = getRect(Slide.slide);
-        var listRect = getRect(Elements.list);
-
-        if (options.direction === RTL) {
-          width = listRect.right - slideRect.left;
-        } else {
-          width = slideRect.right - listRect.left;
-        }
-
-        width += this.gap;
-      }
-
-      return width;
-    },
-
-    /**
-     * Return the slide width in px.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - The slide width.
-     */
-    slideWidth: function slideWidth(index) {
-      if (options.autoWidth) {
-        var _Slide = Elements.getSlide(index);
-
-        return _Slide ? _Slide.slide.offsetWidth : 0;
-      }
-
-      var width = options.fixedWidth || (this.width + this.gap) / options.perPage - this.gap;
-      return toPixel(root, width);
-    },
-
-    /**
-     * Return the slide height in px.
-     *
-     * @return {number} - The slide height.
-     */
-    slideHeight: function slideHeight() {
-      var height = options.height || options.fixedHeight || this.width * options.heightRatio;
-      return toPixel(root, height);
-    },
-
-    /**
-     * Return slider width without padding.
-     *
-     * @return {number} - Current slider width.
-     */
-    get width() {
-      return track.clientWidth - this.padding.left - this.padding.right;
-    }
-
-  };
-};
-/**
- * The resolver component for vertical layout.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The resolver component for vertical layout.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The resolver object.
- */
-
-
-var Vertical = function Vertical(Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Keep the root element.
-   *
-   * @type {Element}
-   */
-
-  var root = Splide.root;
-  /**
-   * Keep the track element.
-   *
-   * @type {Element}
-   */
-
-  var track;
-  /**
-   * Keep the latest options.
-   *
-   * @type {Element}
-   */
-
-  var options;
-  return {
-    /**
-     * Margin property name.
-     *
-     * @type {string}
-     */
-    margin: 'marginBottom',
-
-    /**
-     * Initialization.
-     */
-    init: function init() {
-      this.resize();
-    },
-
-    /**
-     * Resize gap and padding.
-     * This must be called on init.
-     */
-    resize: function resize() {
-      options = Splide.options;
-      track = Elements.track;
-      this.gap = toPixel(root, options.gap);
-      var padding = options.padding;
-      var top = toPixel(root, padding.top || padding);
-      var bottom = toPixel(root, padding.bottom || padding);
-      this.padding = {
-        top: top,
-        bottom: bottom
-      };
-      applyStyle(track, {
-        paddingTop: unit(top),
-        paddingBottom: unit(bottom)
-      });
-    },
-
-    /**
-     * Return total height from the top of the list to the bottom of the slide specified by the provided index.
-     *
-     * @param {number} index - Optional. A slide index. If undefined, total height of the slider will be returned.
-     *
-     * @return {number} - Total height to the bottom of the specified slide, or 0 for an invalid index.
-     */
-    totalHeight: function totalHeight(index) {
-      if (index === void 0) {
-        index = Splide.length - 1;
-      }
-
-      var Slide = Elements.getSlide(index);
-
-      if (Slide) {
-        return getRect(Slide.slide).bottom - getRect(Elements.list).top + this.gap;
-      }
-
-      return 0;
-    },
-
-    /**
-     * Return the slide width in px.
-     *
-     * @return {number} - The slide width.
-     */
-    slideWidth: function slideWidth() {
-      return toPixel(root, options.fixedWidth || this.width);
-    },
-
-    /**
-     * Return the slide height in px.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - The slide height.
-     */
-    slideHeight: function slideHeight(index) {
-      if (options.autoHeight) {
-        var _Slide2 = Elements.getSlide(index);
-
-        return _Slide2 ? _Slide2.slide.offsetHeight : 0;
-      }
-
-      var height = options.fixedHeight || (this.height + this.gap) / options.perPage - this.gap;
-      return toPixel(root, height);
-    },
-
-    /**
-     * Return slider width without padding.
-     *
-     * @return {number} - Current slider width.
-     */
-    get width() {
-      return track.clientWidth;
-    },
-
-    /**
-     * Return slide height without padding.
-     *
-     * @return {number} - Slider height.
-     */
-    get height() {
-      var height = options.height || this.width * options.heightRatio;
-      exist(height, '"height" or "heightRatio" is missing.');
-      return toPixel(root, height) - this.padding.top - this.padding.bottom;
-    }
-
-  };
-};
-/**
- * A package of utility functions related with time.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Simple throttle function that controls how often the given function is executed.
- *
- * @param {function} func - A function to be throttled.
- * @param {number}   wait - Time in millisecond for interval of execution.
- *
- * @return {Function} - A debounced function.
- */
-
-
-function throttle(func, wait) {
-  var timeout; // Declare function by the "function" keyword to prevent "this" from being inherited.
-
-  return function () {
-    if (!timeout) {
-      timeout = setTimeout(function () {
-        func();
-        timeout = null;
-      }, wait);
-    }
-  };
-}
-/**
- * Custom setInterval function that provides progress rate as callback.
- *
- * @param {function} callback - A callback function fired every time the interval time passes.
- * @param {number}   interval - Interval duration in milliseconds.
- * @param {function} progress - A callback function fired whenever the progress goes.
- *
- * @return {Object} - An object containing play() and pause() functions.
- */
-
-
-function createInterval(callback, interval, progress) {
-  var _window = window,
-      requestAnimationFrame = _window.requestAnimationFrame;
-  var start,
-      elapse,
-      rate,
-      _pause = true;
-
-  var step = function step(timestamp) {
-    if (!_pause) {
-      if (!start) {
-        start = timestamp;
-
-        if (rate && rate < 1) {
-          start -= rate * interval;
-        }
-      }
-
-      elapse = timestamp - start;
-      rate = elapse / interval;
-
-      if (elapse >= interval) {
-        start = 0;
-        rate = 1;
-        callback();
-      }
-
-      if (progress) {
-        progress(rate);
-      }
-
-      requestAnimationFrame(step);
-    }
-  };
-
-  return {
-    pause: function pause() {
-      _pause = true;
-      start = 0;
-    },
-    play: function play(reset) {
-      start = 0;
-
-      if (reset) {
-        rate = 0;
-      }
-
-      if (_pause) {
-        _pause = false;
-        requestAnimationFrame(step);
-      }
-    }
-  };
-}
-/**
- * The component for handing slide layouts and their sizes.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for handing slide layouts and their sizes.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Layout = function Layout(Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Whether the slider is vertical or not.
-   *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Layout component object.
-   *
-   * @type {Object}
-   */
-
-  var Layout = assign({
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      bind();
-      init(); // The word "size" means width for a horizontal slider and height for a vertical slider.
-
-      this.totalSize = isVertical ? this.totalHeight : this.totalWidth;
-      this.slideSize = isVertical ? this.slideHeight : this.slideWidth;
-    },
-
-    /**
-     * Destroy the component.
-     */
-    destroy: function destroy() {
-      removeAttribute([Elements.list, Elements.track], 'style');
-    },
-
-    /**
-     * Return the slider height on the vertical mode or width on the horizontal mode.
-     *
-     * @return {number}
-     */
-    get size() {
-      return isVertical ? this.height : this.width;
+    const trackRect = rect(Components.Elements.track);
+    const slideRect = rect(slide);
+    const left = resolve("left");
+    const right = resolve("right");
+    return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);
+  }
+  function isWithin(from, distance) {
+    let diff = abs(from - index);
+    if (!Splide2.is(SLIDE) && !isClone) {
+      diff = min(diff, Splide2.length - diff);
     }
+    return diff <= distance;
+  }
+  return {
+    index,
+    slideIndex,
+    slide,
+    container,
+    isClone,
+    mount,
+    destroy,
+    rule,
+    isWithin
+  };
+}
 
-  }, isVertical ? Vertical(Splide, Components) : Horizontal(Splide, Components));
-  /**
-   * Init slider styles according to options.
-   */
-
+function Slides(Splide2, Components2, options) {
+  const { on, emit, bind } = EventInterface(Splide2);
+  const { slides, list } = Components2.Elements;
+  const Slides2 = [];
+  function mount() {
+    init();
+    on(EVENT_REFRESH, refresh);
+  }
   function init() {
-    Layout.init();
-    applyStyle(Splide.root, {
-      maxWidth: unit(Splide.options.width)
+    slides.forEach((slide, index) => {
+      register(slide, index, -1);
     });
-    Elements.each(function (Slide) {
-      Slide.slide.style[Layout.margin] = unit(Layout.gap);
+  }
+  function destroy() {
+    forEach$1((Slide2) => {
+      Slide2.destroy();
     });
-    resize();
+    empty(Slides2);
   }
-  /**
-   * Listen the resize native event with throttle.
-   * Initialize when the component is mounted or options are updated.
-   */
-
-
-  function bind() {
-    Splide.on('resize load', throttle(function () {
-      Splide.emit('resize');
-    }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
-  }
-  /**
-   * Resize the track and slide elements.
-   */
-
-
-  function resize() {
-    var options = Splide.options;
-    Layout.resize();
-    applyStyle(Elements.track, {
-      height: unit(Layout.height)
+  function refresh() {
+    destroy();
+    init();
+  }
+  function register(slide, index, slideIndex) {
+    const object = Slide$1(Splide2, index, slideIndex, slide);
+    object.mount();
+    Slides2.push(object);
+  }
+  function get(excludeClones) {
+    return excludeClones ? filter((Slide2) => !Slide2.isClone) : Slides2;
+  }
+  function getIn(page) {
+    const { Controller } = Components2;
+    const index = Controller.toIndex(page);
+    const max = Controller.hasFocus() ? 1 : options.perPage;
+    return filter((Slide2) => between(Slide2.index, index, index + max - 1));
+  }
+  function getAt(index) {
+    return filter(index)[0];
+  }
+  function add(items, index) {
+    forEach(items, (slide) => {
+      if (isString(slide)) {
+        slide = parseHtml(slide);
+      }
+      if (isHTMLElement(slide)) {
+        const ref = slides[index];
+        ref ? before(slide, ref) : append(list, slide);
+        addClass(slide, options.classes.slide);
+        observeImages(slide, emit.bind(null, EVENT_RESIZE));
+      }
     });
-    var slideHeight = options.autoHeight ? null : unit(Layout.slideHeight());
-    Elements.each(function (Slide) {
-      applyStyle(Slide.container, {
-        height: slideHeight
-      });
-      applyStyle(Slide.slide, {
-        width: options.autoWidth ? null : unit(Layout.slideWidth(Slide.index)),
-        height: Slide.container ? null : slideHeight
-      });
+    emit(EVENT_REFRESH);
+  }
+  function remove$1(matcher) {
+    remove(filter(matcher).map((Slide2) => Slide2.slide));
+    emit(EVENT_REFRESH);
+  }
+  function forEach$1(iteratee, excludeClones) {
+    get(excludeClones).forEach(iteratee);
+  }
+  function filter(matcher) {
+    return Slides2.filter(isFunction(matcher) ? matcher : (Slide2) => isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index));
+  }
+  function rule(prop, value, useContainer) {
+    forEach$1((Slide2) => {
+      Slide2.rule(prop, value, useContainer);
     });
-    Splide.emit('resized');
   }
-
-  return Layout;
-};
-/**
- * The component for supporting mouse drag and swipe.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var abs = Math.abs;
-/**
- * If the absolute velocity is greater thant this value,
- * a slider always goes to a different slide after drag, not allowed to stay on a current slide.
- */
-
-var MIN_VELOCITY = 0.1;
-/**
- * Adjust how much the track can be pulled on the first or last page.
- * The larger number this is, the farther the track moves.
- * This should be around 5 - 9.
- *
- * @type {number}
- */
-
-var FRICTION_REDUCER = 7;
-/**
- * The component supporting mouse drag and swipe.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Drag = function Drag(Splide, Components) {
-  /**
-   * Store the Move component.
-   *
-   * @type {Object}
-   */
-  var Track = Components.Track;
-  /**
-   * Store the Controller component.
-   *
-   * @type {Object}
-   */
-
-  var Controller = Components.Controller;
-  /**
-   * Coordinate of the track on starting drag.
-   *
-   * @type {Object}
-   */
-
-  var startCoord;
-  /**
-   * Analyzed info on starting drag.
-   *
-   * @type {Object|null}
-   */
-
-  var startInfo;
-  /**
-   * Analyzed info being updated while dragging/swiping.
-   *
-   * @type {Object}
-   */
-
-  var currentInfo;
-  /**
-   * Determine whether slides are being dragged or not.
-   *
-   * @type {boolean}
-   */
-
-  var isDragging;
-  /**
-   * Whether the slider direction is vertical or not.
-   *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Axis for the direction.
-   *
-   * @type {string}
-   */
-
-  var axis = isVertical ? 'y' : 'x';
-  /**
-   * Drag component object.
-   *
-   * @type {Object}
-   */
-
-  var Drag = {
-    /**
-     * Whether dragging is disabled or not.
-     *
-     * @type {boolean}
-     */
-    disabled: false,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this9 = this;
-
-      var Elements = Components.Elements;
-      var track = Elements.track;
-      Splide.on('touchstart mousedown', start, track).on('touchmove mousemove', move, track, {
-        passive: false
-      }).on('touchend touchcancel mouseleave mouseup dragend', end, track).on('mounted refresh', function () {
-        // Prevent dragging an image or anchor itself.
-        each(Elements.list.querySelectorAll('img, a'), function (elm) {
-          Splide.off('dragstart', elm).on('dragstart', function (e) {
-            e.preventDefault();
-          }, elm, {
-            passive: false
-          });
+  function observeImages(elm, callback) {
+    const images = queryAll(elm, "img");
+    let { length } = images;
+    if (length) {
+      images.forEach((img) => {
+        bind(img, "load error", () => {
+          if (!--length) {
+            callback();
+          }
         });
-      }).on('mounted updated', function () {
-        _this9.disabled = !Splide.options.drag;
       });
+    } else {
+      callback();
     }
+  }
+  function getLength(excludeClones) {
+    return excludeClones ? slides.length : Slides2.length;
+  }
+  function isEnough() {
+    return Slides2.length > options.perPage;
+  }
+  return {
+    mount,
+    destroy,
+    register,
+    get,
+    getIn,
+    getAt,
+    add,
+    remove: remove$1,
+    forEach: forEach$1,
+    filter,
+    rule,
+    getLength,
+    isEnough
   };
-  /**
-   * Called when the track starts to be dragged.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
+}
 
-  function start(e) {
-    if (!Drag.disabled && !isDragging) {
-      // These prams are used to evaluate whether the slider should start moving.
-      init(e);
+function Clones(Splide2, Components2, options) {
+  const { on, emit } = EventInterface(Splide2);
+  const { Elements, Slides } = Components2;
+  const { resolve } = Components2.Direction;
+  const clones = [];
+  let cloneCount;
+  function mount() {
+    init();
+    on(EVENT_REFRESH, refresh);
+    on([EVENT_UPDATED, EVENT_RESIZE], observe);
+  }
+  function init() {
+    if (cloneCount = computeCloneCount()) {
+      generate(cloneCount);
     }
   }
-  /**
-   * Initialize parameters.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
-
-
-  function init(e) {
-    startCoord = Track.toCoord(Track.position);
-    startInfo = analyze(e, {});
-    currentInfo = startInfo;
-  }
-  /**
-   * Called while the track being dragged.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
-
-
-  function move(e) {
-    if (startInfo) {
-      currentInfo = analyze(e, startInfo);
-
-      if (isDragging) {
-        if (e.cancelable) {
-          e.preventDefault();
-        }
-
-        if (!Splide.is(FADE)) {
-          var position = startCoord[axis] + currentInfo.offset[axis];
-          Track.translate(resist(position));
-        }
-      } else {
-        if (shouldMove(currentInfo)) {
-          Splide.emit('drag', startInfo);
-          isDragging = true;
-          Track.cancel(); // These params are actual drag data.
-
-          init(e);
-        }
-      }
+  function destroy() {
+    remove(clones);
+    empty(clones);
+  }
+  function refresh() {
+    destroy();
+    init();
+  }
+  function observe() {
+    if (cloneCount !== computeCloneCount()) {
+      emit(EVENT_REFRESH);
     }
   }
-  /**
-   * Determine whether to start moving the track or not by drag angle.
-   *
-   * @param {Object} info - An information object.
-   *
-   * @return {boolean} - True if the track should be moved or false if not.
-   */
-
-
-  function shouldMove(_ref3) {
-    var offset = _ref3.offset;
-
-    if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
-      return false;
+  function generate(count) {
+    const slides = Slides.get().slice();
+    const { length } = slides;
+    if (length) {
+      while (slides.length < count) {
+        push(slides, slides);
+      }
+      push(slides.slice(-count), slides.slice(0, count)).forEach((Slide, index) => {
+        const isHead = index < count;
+        const clone = cloneDeep(Slide.slide, index);
+        isHead ? before(clone, slides[0].slide) : append(Elements.list, clone);
+        push(clones, clone);
+        Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index);
+      });
     }
-
-    var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
-
-    if (isVertical) {
-      angle = 90 - angle;
+  }
+  function cloneDeep(elm, index) {
+    const clone = elm.cloneNode(true);
+    addClass(clone, options.classes.clone);
+    clone.id = `${Splide2.root.id}-clone${pad(index + 1)}`;
+    return clone;
+  }
+  function computeCloneCount() {
+    let { clones: clones2 } = options;
+    if (!Splide2.is(LOOP)) {
+      clones2 = 0;
+    } else if (!clones2) {
+      const fixedSize = measure(Elements.list, options[resolve("fixedWidth")]);
+      const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
+      const baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage;
+      clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2);
     }
+    return clones2;
+  }
+  return {
+    mount,
+    destroy
+  };
+}
 
-    return angle < Splide.options.dragAngleThreshold;
-  }
-  /**
-   * Resist dragging the track on the first/last page because there is no more.
-   *
-   * @param {number} position - A position being applied to the track.
-   *
-   * @return {Object} - Adjusted position.
-   */
-
-
-  function resist(position) {
-    if (Splide.is(SLIDE)) {
-      var sign = Track.sign;
-
-      var _start = sign * Track.trim(Track.toPosition(0));
-
-      var _end = sign * Track.trim(Track.toPosition(Controller.edgeIndex));
-
-      position *= sign;
-
-      if (position < _start) {
-        position = _start - FRICTION_REDUCER * Math.log(_start - position);
-      } else if (position > _end) {
-        position = _end + FRICTION_REDUCER * Math.log(position - _end);
-      }
-
-      position *= sign;
+function Layout(Splide2, Components2, options) {
+  const { on, bind, emit } = EventInterface(Splide2);
+  const { Slides } = Components2;
+  const { ruleBy } = Components2.Style;
+  const { resolve } = Components2.Direction;
+  const { track, list } = Components2.Elements;
+  const { getAt } = Slides;
+  let vertical;
+  function mount() {
+    init();
+    bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on(EVENT_RESIZE, resize);
+  }
+  function init() {
+    vertical = options.direction === TTB;
+    ruleBy(Splide2.root, "maxWidth", unit(options.width));
+    ruleBy(track, resolve("paddingLeft"), cssPadding(false));
+    ruleBy(track, resolve("paddingRight"), cssPadding(true));
+    Slides.rule(resolve("marginRight"), unit(options.gap));
+    Slides.rule("width", cssSlideWidth());
+    setSlidesHeight();
+    resize();
+  }
+  function resize() {
+    ruleBy(track, "height", cssTrackHeight());
+    options.heightRatio && setSlidesHeight();
+    emit(EVENT_RESIZED);
+  }
+  function setSlidesHeight() {
+    Slides.rule("height", cssSlideHeight(), true);
+  }
+  function cssPadding(right) {
+    const { padding } = options;
+    const prop = resolve(right ? "right" : "left", true);
+    return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
+  }
+  function cssTrackHeight() {
+    let height = "";
+    if (vertical) {
+      height = cssHeight();
+      assert(height, "height or heightRatio is missing.");
+      height = `calc(${height} - ${cssPadding(false)} - ${cssPadding(true)})`;
     }
-
-    return position;
+    return height;
   }
-  /**
-   * Called when dragging ends.
-   */
-
-
-  function end() {
-    startInfo = null;
-
-    if (isDragging) {
-      Splide.emit('dragged', currentInfo);
-      go(currentInfo);
-      isDragging = false;
+  function cssHeight() {
+    return unit(options.height || rect(list).width * options.heightRatio);
+  }
+  function cssSlideWidth() {
+    return options.autoWidth ? "" : unit(options.fixedWidth) || (vertical ? "" : cssSlideSize());
+  }
+  function cssSlideHeight() {
+    return unit(options.fixedHeight) || (vertical ? options.autoHeight ? "" : cssSlideSize() : cssHeight());
+  }
+  function cssSlideSize() {
+    const gap = unit(options.gap);
+    return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
+  }
+  function listSize() {
+    return rect(list)[resolve("width")];
+  }
+  function slideSize(index, withoutGap) {
+    const Slide = getAt(index || 0);
+    return Slide ? rect(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+  }
+  function totalSize(index, withoutGap) {
+    const Slide = getAt(index);
+    if (Slide) {
+      const right = rect(Slide.slide)[resolve("right")];
+      const left = rect(list)[resolve("left")];
+      return abs(right - left) + (withoutGap ? 0 : getGap());
     }
+    return 0;
   }
-  /**
-   * Go to the slide determined by the analyzed data.
-   *
-   * @param {Object} info - An info object.
-   */
-
-
-  function go(info) {
-    var velocity = info.velocity[axis];
-    var absV = abs(velocity);
-
-    if (absV > 0) {
-      var options = Splide.options;
-      var index = Splide.index;
-      var sign = velocity < 0 ? -1 : 1;
-      var destIndex = index;
-
-      if (!Splide.is(FADE)) {
-        var destination = Track.position;
+  function sliderSize() {
+    return totalSize(Splide2.length - 1, true) - totalSize(-1, true);
+  }
+  function getGap() {
+    const Slide = getAt(0);
+    return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
+  }
+  function getPadding(right) {
+    return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`, true))) || 0;
+  }
+  return {
+    mount,
+    listSize,
+    slideSize,
+    sliderSize,
+    totalSize,
+    getPadding
+  };
+}
 
-        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
-          destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
+function Move(Splide2, Components2, options) {
+  const { on, emit } = EventInterface(Splide2);
+  const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
+  const { resolve, orient } = Components2.Direction;
+  const { list, track } = Components2.Elements;
+  let waiting;
+  function mount() {
+    if (!Splide2.is(FADE)) {
+      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+    } else {
+      emit(EVENT_REPOSITIONED);
+    }
+  }
+  function reposition() {
+    Components2.Scroll.cancel();
+    jump(Splide2.index);
+    emit(EVENT_REPOSITIONED);
+  }
+  function move(dest, index, prev, callback) {
+    if (!isBusy()) {
+      const { set } = Splide2.state;
+      const position = getPosition();
+      const looping = dest !== index;
+      waiting = looping || options.waitForTransition;
+      set(MOVING);
+      emit(EVENT_MOVE, index, prev, dest);
+      Components2.Transition.start(dest, () => {
+        looping && jump(index);
+        waiting = false;
+        set(IDLE);
+        emit(EVENT_MOVED, index, prev, dest);
+        if (options.trimSpace === "move" && dest !== prev && position === getPosition()) {
+          Components2.Controller.go(dest > prev ? ">" : "<", false, callback);
+        } else {
+          callback && callback();
         }
-
-        destIndex = Track.toIndex(destination);
-      }
-      /*
-       * Do not allow the track to go to a previous position if there is enough velocity.
-       * Always use the adjacent index for the fade mode.
-       */
-
-
-      if (destIndex === index && absV > MIN_VELOCITY) {
-        destIndex = index + sign * Track.sign;
+      });
+    }
+  }
+  function jump(index) {
+    translate(toPosition(index, true));
+  }
+  function translate(position, preventLoop) {
+    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`);
+  }
+  function loop(position) {
+    if (!waiting && Splide2.is(LOOP)) {
+      const diff = orient(position - getPosition());
+      const exceededMin = exceededLimit(false, position) && diff < 0;
+      const exceededMax = exceededLimit(true, position) && diff > 0;
+      if (exceededMin || exceededMax) {
+        const excess = position - getLimit(exceededMax);
+        const size = sliderSize();
+        position -= sign(excess) * size * ceil(abs(excess) / size);
       }
-
-      if (Splide.is(SLIDE)) {
-        destIndex = between(destIndex, 0, Controller.edgeIndex);
+    }
+    return position;
+  }
+  function cancel() {
+    waiting = false;
+    Components2.Transition.cancel();
+    translate(getPosition());
+  }
+  function toIndex(position) {
+    const Slides = Components2.Slides.get();
+    let index = 0;
+    let minDistance = Infinity;
+    for (let i = 0; i < Slides.length; i++) {
+      const slideIndex = Slides[i].index;
+      const distance = abs(toPosition(slideIndex, true) - position);
+      if (distance < minDistance) {
+        minDistance = distance;
+        index = slideIndex;
+      } else {
+        break;
       }
-
-      Controller.go(destIndex, options.isNavigation);
     }
+    return index;
   }
-  /**
-   * Analyze the given event object and return important information for handling swipe behavior.
-   *
-   * @param {Event}   e          - Touch or Mouse event object.
-   * @param {Object}  startInfo  - Information analyzed on start for calculating difference from the current one.
-   *
-   * @return {Object} - An object containing analyzed information, such as offset, velocity, etc.
-   */
-
-
-  function analyze(e, startInfo) {
-    var timeStamp = e.timeStamp,
-        touches = e.touches;
-
-    var _ref4 = touches ? touches[0] : e,
-        clientX = _ref4.clientX,
-        clientY = _ref4.clientY;
-
-    var _ref5 = startInfo.to || {},
-        _ref5$x = _ref5.x,
-        fromX = _ref5$x === void 0 ? clientX : _ref5$x,
-        _ref5$y = _ref5.y,
-        fromY = _ref5$y === void 0 ? clientY : _ref5$y;
-
-    var startTime = startInfo.time || 0;
-    var offset = {
-      x: clientX - fromX,
-      y: clientY - fromY
-    };
-    var duration = timeStamp - startTime;
-    var velocity = {
-      x: offset.x / duration,
-      y: offset.y / duration
-    };
-    return {
-      to: {
-        x: clientX,
-        y: clientY
-      },
-      offset: offset,
-      time: timeStamp,
-      velocity: velocity
-    };
+  function toPosition(index, trimming) {
+    const position = orient(totalSize(index - 1) - offset(index));
+    return trimming ? trim(position) : position;
   }
-
-  return Drag;
-};
-/**
- * The component for handling a click event.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for handling a click event.
- * Click should be disabled during drag/swipe.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Click = function Click(Splide, Components) {
-  /**
-   * Whether click is disabled or not.
-   *
-   * @type {boolean}
-   */
-  var disabled = false;
-  /**
-   * Click component object.
-   *
-   * @type {Object}
-   */
-
-  var Click = {
-    /**
-     * Mount only when the drag is activated and the slide type is not "fade".
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.drag,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('click', onClick, Components.Elements.track, {
-        capture: true
-      }).on('drag', function () {
-        disabled = true;
-      }).on('dragged', function () {
-        // Make sure the flag is released after the click event is fired.
-        setTimeout(function () {
-          disabled = false;
-        });
-      });
+  function getPosition() {
+    const left = resolve("left");
+    return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
+  }
+  function trim(position) {
+    if (options.trimSpace && Splide2.is(SLIDE)) {
+      position = clamp(position, 0, orient(sliderSize() - listSize()));
     }
+    return position;
+  }
+  function offset(index) {
+    const { focus } = options;
+    return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
+  }
+  function getLimit(max) {
+    return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
+  }
+  function isBusy() {
+    return !!waiting;
+  }
+  function exceededLimit(max, position) {
+    position = isUndefined(position) ? getPosition() : position;
+    const exceededMin = max !== true && orient(position) < orient(getLimit(false));
+    const exceededMax = max !== false && orient(position) > orient(getLimit(true));
+    return exceededMin || exceededMax;
+  }
+  return {
+    mount,
+    move,
+    jump,
+    translate,
+    cancel,
+    toIndex,
+    toPosition,
+    getPosition,
+    getLimit,
+    isBusy,
+    exceededLimit
   };
-  /**
-   * Called when a track element is clicked.
-   *
-   * @param {Event} e - A click event.
-   */
+}
 
-  function onClick(e) {
-    if (disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-    }
+function Controller(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  const { Move } = Components2;
+  const { getPosition, getLimit } = Move;
+  const { isEnough, getLength } = Components2.Slides;
+  const isLoop = Splide2.is(LOOP);
+  let currIndex = options.start || 0;
+  let prevIndex = currIndex;
+  let slideCount;
+  let perMove;
+  let perPage;
+  function mount() {
+    init();
+    on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 1);
+    on(EVENT_SCROLLED, reindex, 0);
   }
-
-  return Click;
-};
-/**
- * The component for playing slides automatically.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Set of pause flags.
- */
-
-
-var PAUSE_FLAGS = {
-  HOVER: 1,
-  FOCUS: 2,
-  MANUAL: 3
-};
-/**
- * The component for playing slides automatically.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var Autoplay = function Autoplay(Splide, Components, name) {
-  /**
-   * Store pause flags.
-   *
-   * @type {Array}
-   */
-  var flags = [];
-  /**
-   * Store an interval object.
-   *
-   * @type {Object};
-   */
-
-  var interval;
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Autoplay component object.
-   *
-   * @type {Object}
-   */
-
-  var Autoplay = {
-    /**
-     * Required only when the autoplay option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.autoplay,
-
-    /**
-     * Called when the component is mounted.
-     * Note that autoplay starts only if there are slides over perPage number.
-     */
-    mount: function mount() {
-      var options = Splide.options;
-
-      if (Elements.slides.length > options.perPage) {
-        interval = createInterval(function () {
-          Splide.go('>');
-        }, options.interval, function (rate) {
-          Splide.emit(name + ":playing", rate);
-
-          if (Elements.bar) {
-            applyStyle(Elements.bar, {
-              width: rate * 100 + "%"
-            });
-          }
-        });
-        bind();
-        this.play();
-      }
-    },
-
-    /**
-     * Start autoplay.
-     *
-     * @param {number} flag - A pause flag to be removed.
-     */
-    play: function play(flag) {
-      if (flag === void 0) {
-        flag = 0;
+  function init() {
+    slideCount = getLength(true);
+    perMove = options.perMove;
+    perPage = options.perPage;
+    currIndex = clamp(currIndex, 0, slideCount - 1);
+  }
+  function reindex() {
+    setIndex(Move.toIndex(getPosition()));
+  }
+  function go(control, allowSameIndex, callback) {
+    const dest = parse(control);
+    const index = loop(dest);
+    if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
+      setIndex(index);
+      Move.move(dest, index, prevIndex, callback);
+    }
+  }
+  function parse(control) {
+    let index = currIndex;
+    if (isString(control)) {
+      const [, indicator, number] = control.match(/([+\-<>])(\d+)?/) || [];
+      if (indicator === "+" || indicator === "-") {
+        index = computeDestIndex(currIndex + +`${indicator}${+number || 1}`, currIndex, true);
+      } else if (indicator === ">") {
+        index = number ? toIndex(+number) : getNext(true);
+      } else if (indicator === "<") {
+        index = getPrev(true);
       }
-
-      flags = flags.filter(function (f) {
-        return f !== flag;
-      });
-
-      if (!flags.length) {
-        Splide.emit(name + ":play");
-        interval.play(Splide.options.resetProgress);
+    } else {
+      if (isLoop) {
+        index = clamp(control, -perPage, slideCount + perPage - 1);
+      } else {
+        index = clamp(control, 0, getEnd());
       }
-    },
-
-    /**
-     * Pause autoplay.
-     * Note that Array.includes is not supported by IE.
-     *
-     * @param {number} flag - A pause flag to be added.
-     */
-    pause: function pause(flag) {
-      if (flag === void 0) {
-        flag = 0;
+    }
+    return index;
+  }
+  function getNext(destination) {
+    return getAdjacent(false, destination);
+  }
+  function getPrev(destination) {
+    return getAdjacent(true, destination);
+  }
+  function getAdjacent(prev, destination) {
+    const number = perMove || hasFocus() ? 1 : perPage;
+    const dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex);
+    if (dest === -1 && Splide2.is(SLIDE)) {
+      if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {
+        return prev ? 0 : getEnd();
       }
-
-      interval.pause();
-
-      if (flags.indexOf(flag) === -1) {
-        flags.push(flag);
+    }
+    return destination ? dest : loop(dest);
+  }
+  function computeDestIndex(dest, from, incremental) {
+    if (isEnough()) {
+      const end = getEnd();
+      if (dest < 0 || dest > end) {
+        if (between(0, dest, from, true) || between(end, from, dest, true)) {
+          dest = toIndex(toPage(dest));
+        } else {
+          if (isLoop) {
+            dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
+          } else if (options.rewind) {
+            dest = dest < 0 ? end : 0;
+          } else {
+            dest = -1;
+          }
+        }
+      } else {
+        if (!isLoop && !incremental && dest !== from) {
+          dest = perMove ? dest : toIndex(toPage(from) + (dest < from ? -1 : 1));
+        }
       }
+    } else {
+      dest = -1;
+    }
+    return dest;
+  }
+  function getEnd() {
+    let end = slideCount - perPage;
+    if (hasFocus() || isLoop && perMove) {
+      end = slideCount - 1;
+    }
+    return max(end, 0);
+  }
+  function loop(index) {
+    if (isLoop) {
+      return isEnough() ? index % slideCount + (index < 0 ? slideCount : 0) : -1;
+    }
+    return index;
+  }
+  function toIndex(page) {
+    return clamp(hasFocus() ? page : perPage * page, 0, getEnd());
+  }
+  function toPage(index) {
+    if (!hasFocus()) {
+      index = between(index, slideCount - perPage, slideCount - 1) ? slideCount - 1 : index;
+      index = floor(index / perPage);
+    }
+    return index;
+  }
+  function setIndex(index) {
+    if (index !== currIndex) {
+      prevIndex = currIndex;
+      currIndex = index;
+    }
+  }
+  function getIndex(prev) {
+    return prev ? prevIndex : currIndex;
+  }
+  function hasFocus() {
+    return !isUndefined(options.focus) || options.isNavigation;
+  }
+  return {
+    mount,
+    go,
+    getNext,
+    getPrev,
+    getEnd,
+    setIndex,
+    getIndex,
+    toIndex,
+    toPage,
+    hasFocus
+  };
+}
 
-      if (flags.length === 1) {
-        Splide.emit(name + ":pause");
+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) {
+  const { on, bind, emit } = EventInterface(Splide2);
+  const { classes, i18n } = options;
+  const { Elements, Controller } = Components2;
+  let wrapper = Elements.arrows;
+  let prev = Elements.prev;
+  let next = Elements.next;
+  let created;
+  const arrows = {};
+  function mount() {
+    init();
+    on(EVENT_UPDATED, init);
+  }
+  function init() {
+    if (options.arrows) {
+      if (!prev || !next) {
+        createArrows();
+      }
+    }
+    if (prev && next) {
+      if (!arrows.prev) {
+        const { id } = Elements.track;
+        setAttribute(prev, ARIA_CONTROLS, id);
+        setAttribute(next, ARIA_CONTROLS, id);
+        arrows.prev = prev;
+        arrows.next = next;
+        listen();
+        emit(EVENT_ARROWS_MOUNTED, prev, next);
+      } else {
+        display(wrapper, options.arrows === false ? "none" : "");
       }
     }
+  }
+  function destroy() {
+    if (created) {
+      remove(wrapper);
+    } else {
+      removeAttribute(prev, ALL_ATTRIBUTES);
+      removeAttribute(next, ALL_ATTRIBUTES);
+    }
+  }
+  function listen() {
+    const { go } = Controller;
+    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update);
+    bind(next, "click", () => {
+      go(">", true);
+    });
+    bind(prev, "click", () => {
+      go("<", true);
+    });
+  }
+  function createArrows() {
+    wrapper = create("div", classes.arrows);
+    prev = createArrow(true);
+    next = createArrow(false);
+    created = true;
+    append(wrapper, [prev, next]);
+    before(wrapper, child(options.arrows === "slider" && Elements.slider || Splide2.root));
+  }
+  function createArrow(prev2) {
+    const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${options.arrowPath || PATH}" />`;
+    return parseHtml(arrow);
+  }
+  function update() {
+    const index = Splide2.index;
+    const prevIndex = Controller.getPrev();
+    const nextIndex = Controller.getNext();
+    const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
+    const nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
+    prev.disabled = prevIndex < 0;
+    next.disabled = nextIndex < 0;
+    setAttribute(prev, ARIA_LABEL, prevLabel);
+    setAttribute(next, ARIA_LABEL, nextLabel);
+    emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex);
+  }
+  return {
+    arrows,
+    mount,
+    destroy
   };
-  /**
-   * Listen some events.
-   */
-
-  function bind() {
-    var options = Splide.options;
-    var sibling = Splide.sibling;
-    var elms = [Splide.root, sibling ? sibling.root : null];
+}
 
+function Autoplay(Splide2, Components2, options) {
+  const { on, bind, emit } = EventInterface(Splide2);
+  const { Elements } = Components2;
+  const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
+  const { isPaused } = interval;
+  let hovered;
+  let focused;
+  let paused;
+  function mount() {
+    const { autoplay } = options;
+    if (autoplay) {
+      initButton(true);
+      initButton(false);
+      listen();
+      if (autoplay !== "pause") {
+        play();
+      }
+    }
+  }
+  function initButton(forPause) {
+    const prop = forPause ? "pause" : "play";
+    const button = Elements[prop];
+    if (button) {
+      setAttribute(button, ARIA_CONTROLS, Elements.track.id);
+      setAttribute(button, ARIA_LABEL, options.i18n[prop]);
+      bind(button, "click", forPause ? pause : play);
+    }
+  }
+  function listen() {
+    const { root } = Elements;
     if (options.pauseOnHover) {
-      switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
-      switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
+      bind(root, "mouseenter mouseleave", (e) => {
+        hovered = e.type === "mouseenter";
+        autoToggle();
+      });
     }
-
     if (options.pauseOnFocus) {
-      switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
-      switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
+      bind(root, "focusin focusout", (e) => {
+        focused = e.type === "focusin";
+        autoToggle();
+      });
     }
-
-    if (Elements.play) {
-      Splide.on('click', function () {
-        // Need to be removed a focus flag at first.
-        Autoplay.play(PAUSE_FLAGS.FOCUS);
-        Autoplay.play(PAUSE_FLAGS.MANUAL);
-      }, Elements.play);
+    on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+  }
+  function play() {
+    if (isPaused() && Components2.Slides.isEnough()) {
+      interval.start(!options.resetProgress);
+      focused = hovered = paused = false;
+      emit(EVENT_AUTOPLAY_PLAY);
+    }
+  }
+  function pause(manual = true) {
+    if (!isPaused()) {
+      interval.pause();
+      emit(EVENT_AUTOPLAY_PAUSE);
     }
-
-    if (Elements.pause) {
-      switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, false);
+    paused = manual;
+  }
+  function autoToggle() {
+    if (!paused) {
+      if (!hovered && !focused) {
+        play();
+      } else {
+        pause(false);
+      }
     }
-
-    Splide.on('move refresh', function () {
-      Autoplay.play();
-    }) // Rewind the timer.
-    .on('destroy', function () {
-      Autoplay.pause();
-    });
   }
-  /**
-   * Play or pause on the given event.
-   *
-   * @param {Element[]} elms  - Elements.
-   * @param {string}    event - An event name or names.
-   * @param {number}    flag  - A pause flag defined on the top.
-   * @param {boolean}   play  - Determine whether to play or pause.
-   */
-
-
-  function switchOn(elms, event, flag, play) {
-    elms.forEach(function (elm) {
-      Splide.on(event, function () {
-        Autoplay[play ? 'play' : 'pause'](flag);
-      }, elm);
-    });
+  function update(rate) {
+    const { bar } = Elements;
+    if (bar) {
+      style(bar, { width: `${rate * 100}%` });
+    }
+    emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
+  return {
+    mount,
+    destroy: interval.cancel,
+    play,
+    pause,
+    isPaused
+  };
+}
 
-  return Autoplay;
-};
-/**
- * The component for change an img element to background image of its wrapper.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for change an img element to background image of its wrapper.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Cover = function Cover(Splide, Components) {
-  /**
-   * Hold options.
-   *
-   * @type {Object}
-   */
-  var options = Splide.options;
-  /**
-   * Cover component object.
-   *
-   * @type {Object}
-   */
-
-  var Cover = {
-    /**
-     * Required only when "cover" option is true.
-     *
-     * @type {boolean}
-     */
-    required: options.cover,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('lazyload:loaded', function (img) {
-        cover(img, false);
+function Cover(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  function mount() {
+    if (options.cover) {
+      on(EVENT_LAZYLOAD_LOADED, (img, Slide) => {
+        toggle(true, img, Slide);
       });
-      Splide.on('mounted updated refresh', function () {
-        return apply(false);
-      });
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      apply(true);
+      on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true));
     }
-  };
-  /**
-   * Apply "cover" to all slides.
-   *
-   * @param {boolean} uncover - If true, "cover" will be clear.
-   */
-
-  function apply(uncover) {
-    Components.Elements.each(function (Slide) {
-      var img = child(Slide.slide, 'IMG') || child(Slide.container, 'IMG');
-
+  }
+  function destroy() {
+    apply(false);
+  }
+  function apply(cover) {
+    Components2.Slides.forEach((Slide) => {
+      const img = child(Slide.container || Slide.slide, "img");
       if (img && img.src) {
-        cover(img, uncover);
+        toggle(cover, img, Slide);
       }
     });
   }
-  /**
-   * Set background image of the parent element, using source of the given image element.
-   *
-   * @param {Element} img     - An image element.
-   * @param {boolean} uncover - Reset "cover".
-   */
-
-
-  function cover(img, uncover) {
-    applyStyle(img.parentElement, {
-      background: uncover ? '' : "center/cover no-repeat url(\"" + img.src + "\")"
-    });
-    applyStyle(img, {
-      display: uncover ? '' : 'none'
-    });
+  function toggle(cover, img, Slide) {
+    Slide.rule("background", cover ? `center/cover no-repeat url("${img.src}")` : "", true);
+    display(img, cover ? "none" : "");
   }
+  return {
+    mount,
+    destroy
+  };
+}
 
-  return Cover;
-};
-/**
- * Export vector path for an arrow.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Namespace definition for SVG element.
- *
- * @type {string}
- */
-
-
-var XML_NAME_SPACE = 'http://www.w3.org/2000/svg';
-/**
- * The arrow vector path.
- *
- * @type {number}
- */
-
-var 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';
-/**
- * SVG width and height.
- *
- * @type {number}
- */
-
-var SIZE = 40;
-/**
- * The component for appending prev/next arrows.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for appending prev/next arrows.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var Arrows = function Arrows(Splide, Components, name) {
-  /**
-   * Previous arrow element.
-   *
-   * @type {Element|undefined}
-   */
-  var prev;
-  /**
-   * Next arrow element.
-   *
-   * @type {Element|undefined}
-   */
-
-  var next;
-  /**
-   * Store the class list.
-   *
-   * @type {Object}
-   */
-
-  var classes = Splide.classes;
-  /**
-   * Hold the root element.
-   *
-   * @type {Element}
-   */
-
-  var root = Splide.root;
-  /**
-   * Whether arrows are created programmatically or not.
-   *
-   * @type {boolean}
-   */
-
-  var created;
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Arrows component object.
-   *
-   * @type {Object}
-   */
-
-  var Arrows = {
-    /**
-     * Required when the arrows option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.arrows,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      // Attempt to get arrows from HTML source.
-      prev = Elements.arrows.prev;
-      next = Elements.arrows.next; // If arrows were not found in HTML, let's generate them.
-
-      if ((!prev || !next) && Splide.options.arrows) {
-        prev = createArrow(true);
-        next = createArrow(false);
-        created = true;
-        appendArrows();
-      }
-
-      if (prev && next) {
-        bind();
-      }
-
-      this.arrows = {
-        prev: prev,
-        next: next
-      };
-    },
-
-    /**
-     * Called after all components are mounted.
-     */
-    mounted: function mounted() {
-      Splide.emit(name + ":mounted", prev, next);
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      removeAttribute([prev, next], 'disabled');
-
-      if (created) {
-        _remove(prev.parentElement);
+const BOUNCE_DIFF_THRESHOLD = 10;
+const BOUNCE_DURATION = 600;
+const FRICTION_FACTOR = 0.6;
+const BASE_VELOCITY = 1.5;
+const MIN_DURATION = 800;
+
+function Scroll(Splide2, Components2, options) {
+  const { on, emit } = EventInterface(Splide2);
+  const { Move } = Components2;
+  const { getPosition, getLimit, exceededLimit } = Move;
+  let interval;
+  function mount() {
+    on(EVENT_MOVE, clear);
+    on([EVENT_UPDATED, EVENT_REFRESH], cancel);
+  }
+  function scroll(destination, duration, suppressConstraint) {
+    const start = getPosition();
+    let friction = 1;
+    duration = duration || computeDuration(abs(destination - start));
+    clear();
+    interval = RequestInterval(duration, onScrolled, (rate) => {
+      const position = getPosition();
+      const target = start + (destination - start) * easing(rate);
+      const diff = (target - getPosition()) * friction;
+      Move.translate(position + diff);
+      if (Splide2.is(SLIDE) && !suppressConstraint && exceededLimit()) {
+        friction *= FRICTION_FACTOR;
+        if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
+          bounce(exceededLimit(false));
+        }
       }
+    }, 1);
+    emit(EVENT_SCROLL);
+    interval.start();
+  }
+  function bounce(backwards) {
+    scroll(getLimit(!backwards), BOUNCE_DURATION, true);
+  }
+  function onScrolled() {
+    emit(EVENT_SCROLLED);
+  }
+  function computeDuration(distance) {
+    return max(distance / BASE_VELOCITY, MIN_DURATION);
+  }
+  function clear() {
+    if (interval) {
+      interval.cancel();
+    }
+  }
+  function cancel() {
+    if (interval && !interval.isPaused()) {
+      clear();
+      onScrolled();
     }
+  }
+  function easing(t) {
+    const { easingFunc } = options;
+    return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
+  }
+  return {
+    mount,
+    destroy: clear,
+    scroll,
+    cancel
   };
-  /**
-   * Listen to native and custom events.
-   */
-
-  function bind() {
-    Splide.on('click', function () {
-      Splide.go('<');
-    }, prev).on('click', function () {
-      Splide.go('>');
-    }, next).on('mounted move updated refresh', updateDisabled);
-  }
-  /**
-   * Update a disabled attribute.
-   */
-
-
-  function updateDisabled() {
-    var _Components$Controlle = Components.Controller,
-        prevIndex = _Components$Controlle.prevIndex,
-        nextIndex = _Components$Controlle.nextIndex;
-    var isEnough = Splide.length > Splide.options.perPage || Splide.is(LOOP);
-    prev.disabled = prevIndex < 0 || !isEnough;
-    next.disabled = nextIndex < 0 || !isEnough;
-    Splide.emit(name + ":updated", prev, next, prevIndex, nextIndex);
-  }
-  /**
-   * Create a wrapper element and append arrows.
-   */
-
-
-  function appendArrows() {
-    var wrapper = create('div', {
-      class: classes.arrows
-    });
-    append(wrapper, prev);
-    append(wrapper, next);
-    var slider = Elements.slider;
-    var parent = Splide.options.arrows === 'slider' && slider ? slider : root;
-    before(wrapper, parent.firstElementChild);
-  }
-  /**
-   * Create an arrow element.
-   *
-   * @param {boolean} prev - Determine to create a prev arrow or next arrow.
-   *
-   * @return {Element} - A created arrow element.
-   */
-
+}
 
-  function createArrow(prev) {
-    var arrow = "<button class=\"" + classes.arrow + " " + (prev ? classes.prev : classes.next) + "\" type=\"button\">" + ("<svg xmlns=\"" + XML_NAME_SPACE + "\"\tviewBox=\"0 0 " + SIZE + " " + SIZE + "\"\twidth=\"" + SIZE + "\"\theight=\"" + SIZE + "\">") + ("<path d=\"" + (Splide.options.arrowPath || PATH) + "\" />");
-    return domify(arrow);
+const FRICTION = 5;
+const LOG_INTERVAL = 50;
+const POINTER_DOWN_EVENTS = "touchstart mousedown";
+const POINTER_MOVE_EVENTS = "touchmove mousemove";
+const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+
+function Drag(Splide2, Components2, options) {
+  const { on, emit, bind, unbind } = EventInterface(Splide2);
+  const { Move, Scroll, Controller } = Components2;
+  const { track } = Components2.Elements;
+  const { resolve, orient } = Components2.Direction;
+  const { getPosition, exceededLimit } = Move;
+  const isSlide = Splide2.is(SLIDE);
+  const isFade = Splide2.is(FADE);
+  let basePosition;
+  let baseEvent;
+  let prevBaseEvent;
+  let lastEvent;
+  let isFree;
+  let isDragging;
+  let isMouse;
+  let hasExceeded = false;
+  let clickPrevented;
+  let disabled;
+  let target;
+  function mount() {
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, { passive: false, capture: true });
+    bind(track, "click", onClick, { capture: true });
+    on([EVENT_MOUNTED, EVENT_UPDATED], init);
   }
-
-  return Arrows;
-};
-/**
- * The component for handling pagination
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The event name for updating some attributes of pagination nodes.
- *
- * @type {string}
- */
-
-
-var ATTRIBUTES_UPDATE_EVENT = 'move.page';
-/**
- * The event name for recreating pagination.
- *
- * @type {string}
- */
-
-var UPDATE_EVENT = 'updated.page refresh.page';
-/**
- * The component for handling pagination
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var Pagination = function Pagination(Splide, Components, name) {
-  /**
-   * Store all data for pagination.
-   * - list: A list element.
-   * - items: An array that contains objects(li, button, index, page).
-   *
-   * @type {Object}
-   */
-  var data = {};
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Pagination component object.
-   *
-   * @type {Object}
-   */
-
-  var Pagination = {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var pagination = Splide.options.pagination;
-
-      if (pagination) {
-        data = createPagination();
-        var slider = Elements.slider;
-        var parent = pagination === 'slider' && slider ? slider : Splide.root;
-        append(parent, data.list);
-        Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes);
+  function init() {
+    const { drag } = options;
+    disable(!drag);
+    isFree = drag === "free";
+  }
+  function onPointerDown(e) {
+    if (!disabled) {
+      isMouse = e.type === "mousedown";
+      if (!isMouse || !e.button) {
+        if (!Move.isBusy()) {
+          target = isMouse ? window : track;
+          prevBaseEvent = null;
+          lastEvent = null;
+          clickPrevented = false;
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove);
+          bind(target, POINTER_UP_EVENTS, onPointerUp);
+          Move.cancel();
+          Scroll.cancel();
+          save(e);
+        } else {
+          prevent(e, true);
+        }
       }
-
-      Splide.off(UPDATE_EVENT).on(UPDATE_EVENT, function () {
-        Pagination.destroy();
-
-        if (Splide.options.pagination) {
-          Pagination.mount();
-          Pagination.mounted();
+    }
+  }
+  function onPointerMove(e) {
+    if (!lastEvent) {
+      clickPrevented = true;
+      emit(EVENT_DRAG);
+    }
+    lastEvent = e;
+    if (e.cancelable) {
+      if (isDragging) {
+        const expired = timeOf(e) - timeOf(baseEvent) > LOG_INTERVAL;
+        const exceeded = hasExceeded !== (hasExceeded = exceededLimit());
+        if (expired || exceeded) {
+          save(e);
+        }
+        if (!isFade) {
+          Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
+        }
+        emit(EVENT_DRAGGING);
+        prevent(e);
+      } else {
+        const threshold = options.dragMinThreshold || 15;
+        isDragging = isMouse || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+        if (isSliderDirection()) {
+          prevent(e);
         }
-      });
-    },
-
-    /**
-     * Called after all components are mounted.
-     */
-    mounted: function mounted() {
-      if (Splide.options.pagination) {
-        var index = Splide.index;
-        Splide.emit(name + ":mounted", data, this.getItem(index));
-        updateAttributes(index, -1);
       }
-    },
-
-    /**
-     * Destroy the pagination.
-     * Be aware that node.remove() is not supported by IE.
-     */
-    destroy: function destroy() {
-      _remove(data.list);
-
-      if (data.items) {
-        data.items.forEach(function (item) {
-          Splide.off('click', item.button);
-        });
-      } // Do not remove UPDATE_EVENT to recreate pagination if needed.
-
-
-      Splide.off(ATTRIBUTES_UPDATE_EVENT);
-      data = {};
-    },
-
-    /**
-     * Return an item by index.
-     *
-     * @param {number} index - A slide index.
-     *
-     * @return {Object|undefined} - An item object on success or undefined on failure.
-     */
-    getItem: function getItem(index) {
-      return data.items[Components.Controller.toPage(index)];
-    },
-
-    /**
-     * Return object containing pagination data.
-     *
-     * @return {Object} - Pagination data including list and items.
-     */
-    get data() {
-      return data;
     }
-
-  };
-  /**
-   * Update attributes.
-   *
-   * @param {number} index     - Active index.
-   * @param {number} prevIndex - Prev index.
-   */
-
-  function updateAttributes(index, prevIndex) {
-    var prev = Pagination.getItem(prevIndex);
-    var curr = Pagination.getItem(index);
-    var active = STATUS_CLASSES.active;
-
-    if (prev) {
-      removeClass(prev.button, active);
+  }
+  function onPointerUp(e) {
+    unbind(target, `${POINTER_MOVE_EVENTS} ${POINTER_UP_EVENTS}`);
+    if (lastEvent) {
+      if (isDragging || e.cancelable && isSliderDirection()) {
+        const velocity = computeVelocity(e);
+        const destination = computeDestination(velocity);
+        if (isFree) {
+          Scroll.scroll(destination);
+        } else if (isFade) {
+          Controller.go(Splide2.index + orient(sign(velocity)));
+        } else {
+          Controller.go(computeIndex(destination), true);
+        }
+        prevent(e);
+      }
+      emit(EVENT_DRAGGED);
     }
-
-    if (curr) {
-      addClass(curr.button, active);
+    isDragging = false;
+  }
+  function save(e) {
+    prevBaseEvent = baseEvent;
+    baseEvent = e;
+    basePosition = getPosition();
+  }
+  function onClick(e) {
+    if (!disabled && clickPrevented) {
+      prevent(e, true);
     }
-
-    Splide.emit(name + ":updated", data, prev, curr);
   }
-  /**
-   * Create a wrapper and button elements.
-   *
-   * @return {Object} - An object contains all data.
-   */
-
-
-  function createPagination() {
-    var options = Splide.options;
-    var classes = Splide.classes;
-    var list = create('ul', {
-      class: classes.pagination
-    });
-    var items = Elements.getSlides(false).filter(function (Slide) {
-      return options.focus !== false || Slide.index % options.perPage === 0;
-    }).map(function (Slide, page) {
-      var li = create('li', {});
-      var button = create('button', {
-        class: classes.page,
-        type: 'button'
-      });
-      append(li, button);
-      append(list, li);
-      Splide.on('click', function () {
-        Splide.go(">" + page);
-      }, button);
-      return {
-        li: li,
-        button: button,
-        page: page,
-        Slides: Elements.getSlidesByPage(page)
-      };
-    });
-    return {
-      list: list,
-      items: items
-    };
+  function isSliderDirection() {
+    const diffX = abs(coordOf(lastEvent) - coordOf(baseEvent));
+    const diffY = abs(coordOf(lastEvent, true) - coordOf(baseEvent, true));
+    return diffX > diffY;
   }
-
-  return Pagination;
-};
-/**
- * The component for loading slider images lazily.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The name for a data attribute of src.
- *
- * @type {string}
- */
-
-
-var SRC_DATA_NAME = 'data-splide-lazy';
-/**
- * The name for a data attribute of srcset.
- *
- * @type {string}
- */
-
-var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
-/**
- * The component for loading slider images lazily.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var LazyLoad = function LazyLoad(Splide, Components, name) {
-  /**
-   * Next index for sequential loading.
-   *
-   * @type {number}
-   */
-  var nextIndex;
-  /**
-   * Store objects containing an img element and a Slide object.
-   *
-   * @type {Object[]}
-   */
-
-  var images;
-  /**
-   * Store the options.
-   *
-   * @type {Object}
-   */
-
-  var options = Splide.options;
-  /**
-   * Whether to load images sequentially or not.
-   *
-   * @type {boolean}
-   */
-
-  var isSequential = options.lazyLoad === 'sequential';
-  /**
-   * Lazyload component object.
-   *
-   * @type {Object}
-   */
-
-  var Lazyload = {
-    /**
-     * Mount only when the lazyload option is provided.
-     *
-     * @type {boolean}
-     */
-    required: options.lazyLoad,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('mounted refresh', function () {
-        init();
-        Components.Elements.each(function (Slide) {
-          each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "], [" + SRCSET_DATA_NAME + "]"), function (img) {
-            if (!img.src && !img.srcset) {
-              images.push({
-                img: img,
-                Slide: Slide
-              });
-              applyStyle(img, {
-                display: 'none'
-              });
-            }
-          });
-        });
-
-        if (isSequential) {
-          loadNext();
-        }
-      });
-
-      if (!isSequential) {
-        Splide.on("mounted refresh moved." + name, check);
+  function computeVelocity(e) {
+    if (Splide2.is(LOOP) || !hasExceeded) {
+      const base = baseEvent === lastEvent && prevBaseEvent || baseEvent;
+      const diffCoord = coordOf(lastEvent) - coordOf(base);
+      const diffTime = timeOf(e) - timeOf(base);
+      const isFlick = timeOf(e) - timeOf(lastEvent) < LOG_INTERVAL;
+      if (diffTime && isFlick) {
+        return diffCoord / diffTime;
       }
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: init
+    }
+    return 0;
+  }
+  function computeDestination(velocity) {
+    return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));
+  }
+  function computeIndex(destination) {
+    const dest = Move.toIndex(destination);
+    return isSlide ? clamp(dest, 0, Controller.getEnd()) : dest;
+  }
+  function coordOf(e, orthogonal) {
+    const prop = `page${resolve(orthogonal ? "Y" : "X")}`;
+    return (isMouse ? e : e.touches[0])[prop];
+  }
+  function timeOf(e) {
+    return e.timeStamp;
+  }
+  function constrain(diff) {
+    return diff / (hasExceeded && isSlide ? FRICTION : 1);
+  }
+  function disable(value) {
+    disabled = value;
+  }
+  return {
+    mount,
+    disable
   };
-  /**
-   * Initialize parameters.
-   */
+}
 
+const IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
+function Keyboard(Splide2, Components2, options) {
+  const { on, bind, unbind } = EventInterface(Splide2);
+  const { root } = Components2.Elements;
+  const { resolve } = Components2.Direction;
+  let target;
+  function mount() {
+    init();
+    on(EVENT_UPDATED, () => {
+      destroy();
+      init();
+    });
+  }
   function init() {
-    images = [];
-    nextIndex = 0;
-  }
-  /**
-   * Check how close each image is from the active slide and
-   * determine whether to start loading or not, according to the distance.
-   *
-   * @param {number} index - Current index.
-   */
-
-
-  function check(index) {
-    index = isNaN(index) ? Splide.index : index;
-    images = images.filter(function (image) {
-      if (image.Slide.isWithin(index, options.perPage * (options.preloadPages + 1))) {
-        load(image.img, image.Slide);
-        return false;
+    const { keyboard = "global" } = options;
+    if (keyboard) {
+      if (keyboard === "focused") {
+        target = root;
+        setAttribute(root, TAB_INDEX, 0);
+      } else {
+        target = window;
       }
-
-      return true;
-    }); // Unbind if all images are loaded.
-
-    if (!images[0]) {
-      Splide.off("moved." + name);
+      bind(target, "keydown", onKeydown);
     }
   }
-  /**
-   * Start loading an image.
-   * Creating a clone of the image element since setting src attribute directly to it
-   * often occurs 'hitch', blocking some other processes of a browser.
-   *
-   * @param {Element} img   - An image element.
-   * @param {Object}  Slide - A Slide object.
-   */
-
-
-  function load(img, Slide) {
-    addClass(Slide.slide, STATUS_CLASSES.loading);
-    var spinner = create('span', {
-      class: Splide.classes.spinner
-    });
-    append(img.parentElement, spinner);
-
-    img.onload = function () {
-      loaded(img, spinner, Slide, false);
-    };
-
-    img.onerror = function () {
-      loaded(img, spinner, Slide, true);
-    };
-
-    setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_NAME) || '');
-    setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME) || '');
+  function destroy() {
+    unbind(target, "keydown");
+    if (isHTMLElement(target)) {
+      removeAttribute(target, TAB_INDEX);
+    }
   }
-  /**
-   * Start loading a next image in images array.
-   */
-
-
-  function loadNext() {
-    if (nextIndex < images.length) {
-      var image = images[nextIndex];
-      load(image.img, image.Slide);
+  function onKeydown(e) {
+    const { key } = e;
+    const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
+    if (normalizedKey === resolve("ArrowLeft")) {
+      Splide2.go("<");
+    } else if (normalizedKey === resolve("ArrowRight")) {
+      Splide2.go(">");
     }
+  }
+  return {
+    mount,
+    destroy
+  };
+}
 
-    nextIndex++;
-  }
-  /**
-   * Called just after the image was loaded or loading was aborted by some error.
-   *
-   * @param {Element} img     - An image element.
-   * @param {Element} spinner - A spinner element.
-   * @param {Object}  Slide   - A Slide object.
-   * @param {boolean} error   - True if the image was loaded successfully or false on error.
-   */
-
-
-  function loaded(img, spinner, Slide, error) {
-    removeClass(Slide.slide, STATUS_CLASSES.loading);
-
-    if (!error) {
-      _remove(spinner);
-
-      applyStyle(img, {
-        display: ''
+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) {
+  const { on, off, bind, emit } = EventInterface(Splide2);
+  const isSequential = options.lazyLoad === "sequential";
+  let images = [];
+  let index = 0;
+  function mount() {
+    if (options.lazyLoad) {
+      on([EVENT_MOUNTED, EVENT_REFRESH], () => {
+        destroy();
+        init();
       });
-      Splide.emit(name + ":loaded", img).emit('resize');
+      if (!isSequential) {
+        on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED], observe);
+      }
     }
-
+  }
+  function init() {
+    Components2.Slides.forEach((_Slide) => {
+      queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => {
+        const src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
+        const srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
+        if (src !== _img.src || srcset !== _img.srcset) {
+          const _spinner = create("span", options.classes.spinner, _img.parentElement);
+          setAttribute(_spinner, ROLE, "presentation");
+          images.push({ _img, _Slide, src, srcset, _spinner });
+          display(_img, "none");
+        }
+      });
+    });
     if (isSequential) {
       loadNext();
     }
   }
-
-  return Lazyload;
-};
-/**
- * Export aria attribute names.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Attribute name for aria-current.
- *
- * @type {string}
- */
-
-
-var ARIA_CURRENRT = 'aria-current';
-/**
- * Attribute name for aria-control.
- *
- * @type {string}
- */
-
-var ARIA_CONTROLS = 'aria-controls';
-/**
- * Attribute name for aria-control.
- *
- * @type {string}
- */
-
-var ARIA_LABEL = 'aria-label';
-/**
- * Attribute name for aria-hidden.
- *
- * @type {string}
- */
-
-var ARIA_HIDDEN = 'aria-hidden';
-/**
- * Attribute name for tab-index.
- *
- * @type {string}
- */
-
-var TAB_INDEX = 'tabindex';
-/**
- * The component for controlling slides via keyboard.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Map a key to a slide control.
- *
- * @type {Object}
- */
-
-var KEY_MAP = {
-  ltr: {
-    ArrowLeft: '<',
-    ArrowRight: '>',
-    // For IE.
-    Left: '<',
-    Right: '>'
-  },
-  rtl: {
-    ArrowLeft: '>',
-    ArrowRight: '<',
-    // For IE.
-    Left: '>',
-    Right: '<'
-  },
-  ttb: {
-    ArrowUp: '<',
-    ArrowDown: '>',
-    // For IE.
-    Up: '<',
-    Down: '>'
+  function destroy() {
+    index = 0;
+    images = [];
   }
-};
-/**
- * The component for controlling slides via keyboard.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-var Keyboard = function Keyboard(Splide) {
-  /**
-   * Hold the target element.
-   *
-   * @type {Element|Document|undefined}
-   */
-  var target;
-  return {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('mounted updated', function () {
-        var options = Splide.options;
-        var root = Splide.root;
-        var map = KEY_MAP[options.direction];
-        var keyboard = options.keyboard;
-
-        if (target) {
-          Splide.off('keydown', target);
-          removeAttribute(root, TAB_INDEX);
-        }
-
-        if (keyboard) {
-          if (keyboard === 'focused') {
-            target = root;
-            setAttribute(root, TAB_INDEX, 0);
-          } else {
-            target = document;
-          }
-
-          Splide.on('keydown', function (e) {
-            if (map[e.key]) {
-              Splide.go(map[e.key]);
-            }
-          }, target);
-        }
-      });
+  function observe() {
+    images = images.filter((data) => {
+      if (data._Slide.isWithin(Splide2.index, options.perPage * ((options.preloadPages || 1) + 1))) {
+        return load(data);
+      }
+      return true;
+    });
+    if (!images.length) {
+      off(EVENT_MOVED);
+    }
+  }
+  function load(data) {
+    const { _img } = data;
+    addClass(data._Slide.slide, CLASS_LOADING);
+    bind(_img, "load error", (e) => {
+      onLoad(data, e.type === "error");
+    });
+    ["src", "srcset"].forEach((name) => {
+      if (data[name]) {
+        setAttribute(_img, name, data[name]);
+        removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
+      }
+    });
+  }
+  function onLoad(data, error) {
+    const { _Slide } = data;
+    removeClass(_Slide.slide, CLASS_LOADING);
+    if (!error) {
+      remove(data._spinner);
+      display(data._img, "");
+      emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
+      emit(EVENT_RESIZE);
+    }
+    if (isSequential) {
+      loadNext();
+    }
+  }
+  function loadNext() {
+    if (index < images.length) {
+      load(images[index++]);
     }
+  }
+  return {
+    mount,
+    destroy
   };
-};
-/**
- * The component for enhancing accessibility.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for enhancing accessibility.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var A11y = function A11y(Splide, Components) {
-  /**
-   * Hold a i18n object.
-   *
-   * @type {Object}
-   */
-  var i18n = Splide.i18n;
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * All attributes related with A11y.
-   *
-   * @type {string[]}
-   */
-
-  var allAttributes = [ARIA_HIDDEN, TAB_INDEX, ARIA_CONTROLS, ARIA_LABEL, ARIA_CURRENRT, 'role'];
-  /**
-   * A11y component object.
-   *
-   * @type {Object}
-   */
-
-  var A11y = {
-    /**
-     * Required only when the accessibility option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.accessibility,
+}
 
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('visible', function (Slide) {
-        updateSlide(Slide.slide, true);
-      }).on('hidden', function (Slide) {
-        updateSlide(Slide.slide, false);
-      }).on('arrows:mounted', initArrows).on('arrows:updated', updateArrows).on('pagination:mounted', initPagination).on('pagination:updated', updatePagination).on('refresh', function () {
-        removeAttribute(Components.Clones.clones, allAttributes);
+function Pagination(Splide2, Components2, options) {
+  const { on, emit, bind, unbind } = EventInterface(Splide2);
+  const { Slides, Elements, Controller } = Components2;
+  const { hasFocus, getIndex } = Controller;
+  const items = [];
+  let list;
+  function mount() {
+    init();
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on([EVENT_MOVE, EVENT_SCROLLED], update);
+  }
+  function init() {
+    destroy();
+    if (options.pagination && Slides.isEnough()) {
+      createPagination();
+      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide2.index));
+      update();
+    }
+  }
+  function destroy() {
+    if (list) {
+      remove(list);
+      items.forEach((item) => {
+        unbind(item.button, "click");
       });
-
-      if (Splide.options.isNavigation) {
-        Splide.on('navigation:mounted navigation:updated', initNavigation).on('active', function (Slide) {
-          updateNavigation(Slide, true);
-        }).on('inactive', function (Slide) {
-          updateNavigation(Slide, false);
-        });
-      }
-
-      initAutoplay();
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      var Arrows = Components.Arrows;
-      var arrows = Arrows ? Arrows.arrows : {};
-      removeAttribute(Elements.slides.concat([arrows.prev, arrows.next, Elements.play, Elements.pause]), allAttributes);
+      empty(items);
+      list = null;
+    }
+  }
+  function createPagination() {
+    const { length } = Splide2;
+    const { classes, i18n, perPage } = options;
+    const parent = options.pagination === "slider" && Elements.slider || Elements.root;
+    const max = hasFocus() ? length : ceil(length / perPage);
+    list = create("ul", classes.pagination, parent);
+    for (let i = 0; i < max; i++) {
+      const li = create("li", null, list);
+      const button = create("button", { class: classes.page, type: "button" }, li);
+      const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
+      const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
+      bind(button, "click", onClick.bind(null, i));
+      setAttribute(button, ARIA_CONTROLS, controls.join(" "));
+      setAttribute(button, ARIA_LABEL, format(text, i + 1));
+      items.push({ li, button, page: i });
+    }
+  }
+  function onClick(page) {
+    Controller.go(`>${page}`, true, () => {
+      const Slide = Slides.getAt(Controller.toIndex(page));
+      Slide && Slide.slide.focus();
+    });
+  }
+  function getAt(index) {
+    return items[Controller.toPage(index)];
+  }
+  function update() {
+    const prev = getAt(getIndex(true));
+    const curr = getAt(getIndex());
+    if (prev) {
+      removeClass(prev.button, CLASS_ACTIVE);
+      removeAttribute(prev.button, ARIA_CURRENT);
+    }
+    if (curr) {
+      addClass(curr.button, CLASS_ACTIVE);
+      setAttribute(curr.button, ARIA_CURRENT, true);
     }
+    emit(EVENT_PAGINATION_UPDATED, { list, items }, prev, curr);
+  }
+  return {
+    items,
+    mount,
+    destroy,
+    getAt
   };
-  /**
-   * Update slide attributes when it gets visible or hidden.
-   *
-   * @param {Element} slide   - A slide element.
-   * @param {Boolean} visible - True when the slide gets visible, or false when hidden.
-   */
-
-  function updateSlide(slide, visible) {
-    setAttribute(slide, ARIA_HIDDEN, !visible);
+}
 
-    if (Splide.options.slideFocus) {
-      setAttribute(slide, TAB_INDEX, visible ? 0 : -1);
+const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
+function Sync(Splide2, Components2, options) {
+  const { splides } = Splide2;
+  const { list } = Components2.Elements;
+  function mount() {
+    if (options.isNavigation) {
+      navigate();
+    } else {
+      sync();
     }
   }
-  /**
-   * Initialize arrows if they are available.
-   * Append screen reader elements and add aria-controls attribute.
-   *
-   * @param {Element} prev - Previous arrow element.
-   * @param {Element} next - Next arrow element.
-   */
-
-
-  function initArrows(prev, next) {
-    var controls = Elements.track.id;
-    setAttribute(prev, ARIA_CONTROLS, controls);
-    setAttribute(next, ARIA_CONTROLS, controls);
-  }
-  /**
-   * Update arrow attributes.
-   *
-   * @param {Element} prev      - Previous arrow element.
-   * @param {Element} next      - Next arrow element.
-   * @param {number}  prevIndex - Previous slide index or -1 when there is no precede slide.
-   * @param {number}  nextIndex - Next slide index or -1 when there is no next slide.
-   */
-
-
-  function updateArrows(prev, next, prevIndex, nextIndex) {
-    var index = Splide.index;
-    var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
-    var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
-    setAttribute(prev, ARIA_LABEL, prevLabel);
-    setAttribute(next, ARIA_LABEL, nextLabel);
+  function destroy() {
+    removeAttribute(list, ALL_ATTRIBUTES);
   }
-  /**
-   * Initialize pagination if it's available.
-   * Append a screen reader element and add aria-controls/label attribute to each item.
-   *
-   * @param {Object} data       - Data object containing all items.
-   * @param {Object} activeItem - An initial active item.
-   */
-
-
-  function initPagination(data, activeItem) {
-    if (activeItem) {
-      setAttribute(activeItem.button, ARIA_CURRENRT, true);
-    }
-
-    data.items.forEach(function (item) {
-      var options = Splide.options;
-      var text = options.focus === false && options.perPage > 1 ? i18n.pageX : i18n.slideX;
-      var label = sprintf(text, item.page + 1);
-      var button = item.button;
-      var controls = item.Slides.map(function (Slide) {
-        return Slide.slide.id;
+  function sync() {
+    const processed = [];
+    splides.concat(Splide2).forEach((splide, index, instances) => {
+      EventInterface(splide).on(EVENT_MOVE, (index2, prev, dest) => {
+        instances.forEach((instance) => {
+          if (instance !== splide && !includes(processed, splide)) {
+            processed.push(instance);
+            instance.go(instance.is(LOOP) ? dest : index2);
+          }
+        });
+        empty(processed);
       });
-      setAttribute(button, ARIA_CONTROLS, controls.join(' '));
-      setAttribute(button, ARIA_LABEL, label);
     });
   }
-  /**
-   * Update pagination attributes.
-   *
-   * @param {Object}  data - Data object containing all items.
-   * @param {Element} prev - A previous active element.
-   * @param {Element} curr - A current active element.
-   */
-
-
-  function updatePagination(data, prev, curr) {
-    if (prev) {
-      removeAttribute(prev.button, ARIA_CURRENRT);
+  function navigate() {
+    const { on, emit } = EventInterface(Splide2);
+    on(EVENT_CLICK, onClick);
+    on(EVENT_SLIDE_KEYDOWN, onKeydown);
+    on([EVENT_MOUNTED, EVENT_UPDATED], update);
+    setAttribute(list, ROLE, "menu");
+    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+  }
+  function update() {
+    setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
+  }
+  function onClick(Slide) {
+    Splide2.go(Slide.index);
+  }
+  function onKeydown(Slide, e) {
+    if (includes(TRIGGER_KEYS, e.key)) {
+      onClick(Slide);
+      prevent(e);
     }
+  }
+  return {
+    mount,
+    destroy
+  };
+}
 
-    if (curr) {
-      setAttribute(curr.button, ARIA_CURRENRT, true);
+function Wheel(Splide2, Components2, options) {
+  const { bind } = EventInterface(Splide2);
+  function mount() {
+    if (options.wheel) {
+      bind(Components2.Elements.track, "wheel", onWheel, { passive: false, capture: true });
+    }
+  }
+  function onWheel(e) {
+    const { deltaY } = e;
+    if (deltaY) {
+      Splide2.go(deltaY < 0 ? "<" : ">");
+      prevent(e);
     }
   }
-  /**
-   * Initialize autoplay buttons.
-   */
+  return {
+    mount
+  };
+}
 
+var ComponentConstructors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Options: Options,
+  Direction: Direction,
+  Elements: Elements,
+  Style: Style$1,
+  Slides: Slides,
+  Clones: Clones,
+  Layout: Layout,
+  Move: Move,
+  Controller: Controller,
+  Arrows: Arrows,
+  Autoplay: Autoplay,
+  Cover: Cover,
+  Scroll: Scroll,
+  Drag: Drag,
+  Keyboard: Keyboard,
+  LazyLoad: LazyLoad,
+  Pagination: Pagination,
+  Sync: Sync,
+  Wheel: Wheel
+});
 
-  function initAutoplay() {
-    ['play', 'pause'].forEach(function (name) {
-      var elm = Elements[name];
+const I18N = {
+  prev: "Previous slide",
+  next: "Next slide",
+  first: "Go to first slide",
+  last: "Go to last slide",
+  slideX: "Go to slide %s",
+  pageX: "Go to page %s",
+  play: "Start autoplay",
+  pause: "Pause autoplay"
+};
 
-      if (elm) {
-        if (!isButton(elm)) {
-          setAttribute(elm, 'role', 'button');
-        }
+const DEFAULTS = {
+  type: "slide",
+  speed: 400,
+  waitForTransition: true,
+  perPage: 1,
+  arrows: true,
+  pagination: true,
+  interval: 5e3,
+  pauseOnHover: true,
+  pauseOnFocus: true,
+  resetProgress: true,
+  easing: "cubic-bezier(.42,.65,.27,.99)",
+  drag: true,
+  direction: "ltr",
+  slideFocus: true,
+  trimSpace: true,
+  focusableNodes: "a, button, textarea, input, select, iframe",
+  classes: CLASSES,
+  i18n: I18N
+};
 
-        setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
-        setAttribute(elm, ARIA_LABEL, i18n[name]);
-      }
+function Fade(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  const { ruleBy } = Components2.Style;
+  function mount() {
+    on([EVENT_MOUNTED, EVENT_REFRESH], () => {
+      nextTick(() => {
+        Components2.Slides.forEach((Slide) => {
+          ruleBy(Slide.slide, "transition", `opacity ${options.speed}ms ${options.easing}`);
+        });
+      });
     });
   }
-  /**
-   * Initialize navigation slider.
-   * Add button role, aria-label, aria-controls to slide elements and append screen reader text to them.
-   *
-   * @param {Splide} main - A main Splide instance.
-   */
-
-
-  function initNavigation(main) {
-    Elements.each(function (Slide) {
-      var slide = Slide.slide;
-      var realIndex = Slide.realIndex;
-
-      if (!isButton(slide)) {
-        setAttribute(slide, 'role', 'button');
-      }
-
-      var slideIndex = realIndex > -1 ? realIndex : Slide.index;
-      var label = sprintf(i18n.slideX, slideIndex + 1);
-      var mainSlide = main.Components.Elements.getSlide(slideIndex);
-      setAttribute(slide, ARIA_LABEL, label);
+  function start(index, done) {
+    const { track } = Components2.Elements;
+    ruleBy(track, "height", unit(rect(track).height));
+    nextTick(() => {
+      done();
+      ruleBy(track, "height", "");
+    });
+  }
+  return {
+    mount,
+    start,
+    cancel: noop
+  };
+}
 
-      if (mainSlide) {
-        setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
+function Slide(Splide2, Components2, options) {
+  const { bind } = EventInterface(Splide2);
+  const { Move, Controller } = Components2;
+  const { list } = Components2.Elements;
+  let endCallback;
+  function mount() {
+    bind(list, "transitionend", (e) => {
+      if (e.target === list && endCallback) {
+        cancel();
+        endCallback();
       }
     });
   }
-  /**
-   * Update navigation attributes.
-   *
-   * @param {Object}  Slide  - A target Slide object.
-   * @param {boolean} active - True if the slide is active or false if inactive.
-   */
-
-
-  function updateNavigation(_ref6, active) {
-    var slide = _ref6.slide;
-
-    if (active) {
-      setAttribute(slide, ARIA_CURRENRT, true);
+  function start(index, done) {
+    const destination = Move.toPosition(index, true);
+    const position = Move.getPosition();
+    const speed = getSpeed(index);
+    if (abs(destination - position) >= 1 && speed >= 1) {
+      apply(`transform ${speed}ms ${options.easing}`);
+      Move.translate(destination, true);
+      endCallback = done;
     } else {
-      removeAttribute(slide, ARIA_CURRENRT);
+      Move.jump(index);
+      done();
     }
   }
-  /**
-   * Check if the given element is button or not.
-   *
-   * @param {Element} elm - An element to be checked.
-   *
-   * @return {boolean} - True if the given element is button.
-   */
-
-
-  function isButton(elm) {
-    return elm.tagName === 'BUTTON';
+  function cancel() {
+    apply("");
   }
-
-  return A11y;
-};
-/**
- * The component for synchronizing a slider with another.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The event name for sync.
- *
- * @type {string}
- */
-
-
-var SYNC_EVENT = 'move.sync';
-/**
- * The event names for click navigation.
- * @type {string}
- */
-
-var CLICK_EVENTS = 'mouseup touchend';
-/**
- * The keys for triggering the navigation button.
- *
- * @type {String[]}
- */
-
-var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
-/**
- * The component for synchronizing a slider with another.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-var Sync = function Sync(Splide) {
-  /**
-   * Keep the sibling Splide instance.
-   *
-   * @type {Splide}
-   */
-  var sibling = Splide.sibling;
-  /**
-   * Whether the sibling slider is navigation or not.
-   *
-   * @type {Splide|boolean}
-   */
-
-  var isNavigation = sibling && sibling.options.isNavigation;
-  /**
-   * Layout component object.
-   *
-   * @type {Object}
-   */
-
-  var Sync = {
-    /**
-     * Required only when the sub slider is available.
-     *
-     * @type {boolean}
-     */
-    required: !!sibling,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      syncMain();
-      syncSibling();
-
-      if (isNavigation) {
-        bind();
-        Splide.on('refresh', function () {
-          setTimeout(function () {
-            bind();
-            sibling.emit('navigation:updated', Splide);
-          });
-        });
-      }
-    },
-
-    /**
-     * Called after all components are mounted.
-     */
-    mounted: function mounted() {
-      if (isNavigation) {
-        sibling.emit('navigation:mounted', Splide);
+  function getSpeed(index) {
+    const { rewindSpeed } = options;
+    if (Splide2.is(SLIDE) && rewindSpeed) {
+      const prev = Controller.getIndex(true);
+      const end = Controller.getEnd();
+      if (prev === 0 && index >= end || prev >= end && index === 0) {
+        return rewindSpeed;
       }
     }
+    return options.speed;
+  }
+  function apply(transition) {
+    Components2.Style.ruleBy(list, "transition", transition);
+  }
+  return {
+    mount,
+    start,
+    cancel
   };
-  /**
-   * Listen the primary slider event to move secondary one.
-   * Must unbind a handler at first to avoid infinite loop.
-   */
+}
 
-  function syncMain() {
-    Splide.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
-      sibling.off(SYNC_EVENT).go(sibling.is(LOOP) ? destIndex : newIndex, false);
-      syncSibling();
+const _Splide = class {
+  constructor(target, options) {
+    this.event = EventBus();
+    this.Components = {};
+    this.state = State(CREATED);
+    this.splides = [];
+    this._options = {};
+    this._Extensions = {};
+    const root = isString(target) ? query(document, target) : target;
+    assert(root, `${root} is invalid.`);
+    this.root = root;
+    merge(DEFAULTS, _Splide.defaults);
+    merge(merge(this._options, DEFAULTS), options || {});
+  }
+  mount(Extensions, Transition) {
+    const { state, Components: Components2 } = this;
+    assert(state.is([CREATED, DESTROYED]), "Already mounted!");
+    state.set(CREATED);
+    this._Components = Components2;
+    this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
+    this._Extensions = Extensions || this._Extensions;
+    const Constructors = assign({}, ComponentConstructors, this._Extensions, { Transition: this._Transition });
+    forOwn(Constructors, (Component, key) => {
+      const component = Component(this, Components2, this._options);
+      Components2[key] = component;
+      component.setup && component.setup();
     });
-  }
-  /**
-   * Listen the secondary slider event to move primary one.
-   * Must unbind a handler at first to avoid infinite loop.
-   */
-
-
-  function syncSibling() {
-    sibling.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
-      Splide.off(SYNC_EVENT).go(Splide.is(LOOP) ? destIndex : newIndex, false);
-      syncMain();
+    forOwn(Components2, (component) => {
+      component.mount && component.mount();
     });
+    this.emit(EVENT_MOUNTED);
+    addClass(this.root, CLASS_INITIALIZED);
+    state.set(IDLE);
+    this.emit(EVENT_READY);
+    return this;
   }
-  /**
-   * Listen some events on each slide.
-   */
-
-
-  function bind() {
-    sibling.Components.Elements.each(function (_ref7) {
-      var slide = _ref7.slide,
-          index = _ref7.index;
-
-      /*
-       * Listen mouseup and touchend events to handle click.
-       */
-      Splide.off(CLICK_EVENTS, slide).on(CLICK_EVENTS, function (e) {
-        // Ignore a middle or right click.
-        if (!e.button || e.button === 0) {
-          moveSibling(index);
-        }
-      }, slide);
-      /*
-       * Subscribe keyup to handle Enter and Space key.
-       * Note that Array.includes is not supported by IE.
-       */
-
-      Splide.off('keyup', slide).on('keyup', function (e) {
-        if (TRIGGER_KEYS.indexOf(e.key) > -1) {
-          e.preventDefault();
-          moveSibling(index);
-        }
-      }, slide, {
-        passive: false
+  sync(splide) {
+    this.splides.push(splide);
+    splide.splides.push(this);
+    return this;
+  }
+  go(control) {
+    this._Components.Controller.go(control);
+    return this;
+  }
+  on(events, callback) {
+    this.event.on(events, callback, null, DEFAULT_USER_EVENT_PRIORITY);
+    return this;
+  }
+  off(events) {
+    this.event.off(events);
+    return this;
+  }
+  emit(event) {
+    this.event.emit(event, ...slice(arguments, 1));
+    return this;
+  }
+  add(slides, index) {
+    this._Components.Slides.add(slides, index);
+    return this;
+  }
+  remove(matcher) {
+    this._Components.Slides.remove(matcher);
+    return this;
+  }
+  is(type) {
+    return this._options.type === type;
+  }
+  refresh() {
+    this.emit(EVENT_REFRESH);
+    return this;
+  }
+  destroy(completely = true) {
+    const { event, state } = this;
+    if (state.is(CREATED)) {
+      event.on(EVENT_READY, this.destroy.bind(this, completely), this);
+    } else {
+      forOwn(this._Components, (component) => {
+        component.destroy && component.destroy(completely);
       });
-    });
+      event.emit(EVENT_DESTROY);
+      event.destroy();
+      empty(this.splides);
+      state.set(DESTROYED);
+    }
+    return this;
   }
-  /**
-   * Move the sibling to the given index.
-   * Need to check "IDLE" status because slides can be moving by Drag component.
-   *
-   * @param {number} index - Target index.
-   */
-
-
-  function moveSibling(index) {
-    if (Splide.State.is(IDLE)) {
-      sibling.go(index);
+  get options() {
+    return this._options;
+  }
+  set options(options) {
+    const { _options } = this;
+    merge(_options, options);
+    if (!this.state.is(CREATED)) {
+      this.emit(EVENT_UPDATED, _options);
     }
   }
-
-  return Sync;
+  get length() {
+    return this._Components.Slides.getLength(true);
+  }
+  get index() {
+    return this._Components.Controller.getIndex();
+  }
 };
-/**
- * The component for updating options according to a current window width.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Interval time for throttle.
- *
- * @type {number}
- */
-
-
-var THROTTLE = 50;
-/**
- * The component for updating options according to a current window width.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-var Breakpoints = function Breakpoints(Splide) {
-  /**
-   * Store breakpoints.
-   *
-   * @type {Object|boolean}
-   */
-  var breakpoints = Splide.options.breakpoints;
-  /**
-   * The check function whose frequency of call is reduced.
-   *
-   * @type {Function}
-   */
-
-  var throttledCheck = throttle(check, THROTTLE);
-  /**
-   * Keep initial options.
-   *
-   * @type {Object}
-   */
-
-  var initialOptions;
-  /**
-   * An array containing objects of point and MediaQueryList.
-   *
-   * @type {Object[]}
-   */
+let Splide = _Splide;
+Splide.defaults = {};
+Splide.STATES = STATES;
 
-  var map = [];
-  /**
-   * Hold the previous breakpoint.
-   *
-   * @type {number|undefined}
-   */
+const CLASS_RENDERED = "is-rendered";
 
-  var prevPoint;
-  /**
-   * Breakpoints component object.
-   *
-   * @type {Object}
-   */
-
-  var Breakpoints = {
-    /**
-     * Required only when the breakpoints definition is provided and browser supports matchMedia.
-     *
-     * @type {boolean}
-     */
-    required: breakpoints && matchMedia,
+const RENDERER_DEFAULT_CONFIG = {
+  listTag: "ul",
+  slideTag: "li"
+};
 
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      map = Object.keys(breakpoints).sort(function (n, m) {
-        return +n - +m;
-      }).map(function (point) {
-        return {
-          point: point,
-          mql: matchMedia("(max-width:" + point + "px)")
-        };
+class Style {
+  constructor(id, options) {
+    this.styles = {};
+    this.id = id;
+    this.options = options;
+  }
+  rule(selector, prop, value, breakpoint) {
+    breakpoint = breakpoint || "default";
+    const selectors = this.styles[breakpoint] = this.styles[breakpoint] || {};
+    const styles = selectors[selector] = selectors[selector] || {};
+    styles[prop] = value;
+  }
+  build() {
+    let css = "";
+    if (this.styles.default) {
+      css += this.buildSelectors(this.styles.default);
+    }
+    Object.keys(this.styles).sort((n, m) => this.options.mediaQuery === "min" ? +n - +m : +m - +n).forEach((breakpoint) => {
+      if (breakpoint !== "default") {
+        css += `@media screen and (max-width: ${breakpoint}px) {`;
+        css += this.buildSelectors(this.styles[breakpoint]);
+        css += `}`;
+      }
+    });
+    return css;
+  }
+  buildSelectors(selectors) {
+    let css = "";
+    forOwn(selectors, (styles, selector) => {
+      css += `#${this.id} ${selector} {`;
+      forOwn(styles, (value, prop) => {
+        if (value || value === 0) {
+          css += `${prop}: ${value};`;
+        }
       });
-      /*
-       * To keep monitoring resize event after destruction without "completely",
-       * use native addEventListener instead of Splide.on.
-       */
-
-      this.destroy(true);
-      addEventListener('resize', throttledCheck); // Keep initial options to apply them when no breakpoint matches.
-
-      initialOptions = Splide.options;
-      check();
-    },
+      css += "}";
+    });
+    return css;
+  }
+}
 
-    /**
-     * Destroy.
-     *
-     * @param {boolean} completely - Whether to destroy Splide completely.
-     */
-    destroy: function destroy(completely) {
-      if (completely) {
-        removeEventListener('resize', throttledCheck);
-      }
+class SplideRenderer {
+  constructor(contents, options, config, defaults) {
+    this.slides = [];
+    this.options = {};
+    this.breakpoints = [];
+    merge(DEFAULTS, defaults || {});
+    merge(merge(this.options, DEFAULTS), options || {});
+    this.contents = contents;
+    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);
+    assert(this.contents.length, "Provide at least 1 content.");
+    this.init();
+  }
+  static clean(splide) {
+    const { on } = EventInterface(splide);
+    const { root } = splide;
+    const clones = queryAll(root, `.${CLASS_CLONE}`);
+    on(EVENT_MOUNTED, () => {
+      remove(child(root, "style"));
+    });
+    remove(clones);
+  }
+  init() {
+    this.parseBreakpoints();
+    this.initSlides();
+    this.registerRootStyles();
+    this.registerTrackStyles();
+    this.registerSlideStyles();
+    this.registerListStyles();
+  }
+  initSlides() {
+    push(this.slides, this.contents.map((content, index) => {
+      content = isString(content) ? { html: content } : content;
+      content.styles = content.styles || {};
+      content.attrs = content.attrs || {};
+      this.cover(content);
+      const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
+      assign(content.attrs, {
+        class: `${classes} ${content.attrs.class || ""}`.trim(),
+        style: this.buildStyles(content.styles)
+      });
+      return content;
+    }));
+    if (this.isLoop()) {
+      this.generateClones(this.slides);
     }
-  };
-  /**
-   * Check the breakpoint.
-   */
-
-  function check() {
-    var point = getPoint();
-
-    if (point !== prevPoint) {
-      prevPoint = point;
-      var _State = Splide.State;
-      var options = breakpoints[point] || initialOptions;
-      var destroy = options.destroy;
-
-      if (destroy) {
-        Splide.options = initialOptions;
-        Splide.destroy(destroy === 'completely');
+  }
+  registerRootStyles() {
+    this.breakpoints.forEach(([width, options]) => {
+      this.Style.rule(" ", "max-width", unit(options.width), width);
+    });
+  }
+  registerTrackStyles() {
+    const { Style: Style2 } = this;
+    const selector = `.${CLASS_TRACK}`;
+    this.breakpoints.forEach(([width, options]) => {
+      Style2.rule(selector, this.resolve("paddingLeft"), this.cssPadding(options, false), width);
+      Style2.rule(selector, this.resolve("paddingRight"), this.cssPadding(options, true), width);
+      Style2.rule(selector, "height", this.cssTrackHeight(options), width);
+    });
+  }
+  registerListStyles() {
+    const { Style: Style2 } = this;
+    const selector = `.${CLASS_LIST}`;
+    this.breakpoints.forEach(([width, options]) => {
+      Style2.rule(selector, "transform", this.buildTranslate(options), width);
+    });
+  }
+  registerSlideStyles() {
+    const { Style: Style2 } = this;
+    const selector = `.${CLASS_SLIDE}`;
+    this.breakpoints.forEach(([width, options]) => {
+      Style2.rule(selector, "width", this.cssSlideWidth(options), width);
+      Style2.rule(selector, this.resolve("marginRight"), unit(options.gap) || "0px", width);
+      const height = this.cssSlideHeight(options);
+      if (height) {
+        Style2.rule(selector, "height", height, width);
       } else {
-        if (_State.is(DESTROYED)) {
-          Splide.mount();
-        }
-
-        Splide.options = options;
+        Style2.rule(selector, "padding-top", this.cssSlidePadding(options), width);
       }
+      Style2.rule(`${selector} > img`, "display", options.cover ? "none" : "inline", width);
+    });
+  }
+  buildTranslate(options) {
+    const { resolve, orient } = this.Direction;
+    const values = [];
+    values.push(this.cssOffsetClones(options));
+    values.push(this.cssOffsetGaps(options));
+    if (this.isCenter(options)) {
+      values.push(this.buildCssValue(orient(-50), "%"));
+      values.push(...this.cssOffsetCenter(options));
+    }
+    return values.filter(Boolean).map((value) => `translate${resolve("X")}(${value})`).join(" ");
+  }
+  cssOffsetClones(options) {
+    const { resolve, orient } = this.Direction;
+    const cloneCount = this.getCloneCount();
+    if (this.isFixedWidth(options)) {
+      const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
+      return this.buildCssValue(orient(value) * cloneCount, unit2);
+    }
+    const percent = 100 * cloneCount / options.perPage;
+    return `${orient(percent)}%`;
+  }
+  cssOffsetCenter(options) {
+    const { resolve, orient } = this.Direction;
+    if (this.isFixedWidth(options)) {
+      const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
+      return [this.buildCssValue(orient(value / 2), unit2)];
+    }
+    const values = [];
+    const { perPage, gap } = options;
+    values.push(`${orient(50 / perPage)}%`);
+    if (gap) {
+      const { value, unit: unit2 } = this.parseCssValue(gap);
+      const gapOffset = (value / perPage - value) / 2;
+      values.push(this.buildCssValue(orient(gapOffset), unit2));
+    }
+    return values;
+  }
+  cssOffsetGaps(options) {
+    const cloneCount = this.getCloneCount();
+    if (cloneCount && options.gap) {
+      const { orient } = this.Direction;
+      const { value, unit: unit2 } = this.parseCssValue(options.gap);
+      if (this.isFixedWidth(options)) {
+        return this.buildCssValue(orient(value * cloneCount), unit2);
+      }
+      const { perPage } = options;
+      const gaps = cloneCount / perPage;
+      return this.buildCssValue(orient(gaps * value), unit2);
+    }
+    return "";
+  }
+  resolve(prop) {
+    return camelToKebab(this.Direction.resolve(prop));
+  }
+  cssPadding(options, right) {
+    const { padding } = options;
+    const prop = this.Direction.resolve(right ? "right" : "left", true);
+    return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
+  }
+  cssTrackHeight(options) {
+    let height = "";
+    if (this.isVertical()) {
+      height = this.cssHeight(options);
+      assert(height, '"height" is missing.');
+      height = `calc(${height} - ${this.cssPadding(options, false)} - ${this.cssPadding(options, true)})`;
+    }
+    return height;
+  }
+  cssHeight(options) {
+    return unit(options.height);
+  }
+  cssSlideWidth(options) {
+    return options.autoWidth ? "" : unit(options.fixedWidth) || (this.isVertical() ? "" : this.cssSlideSize(options));
+  }
+  cssSlideHeight(options) {
+    return unit(options.fixedHeight) || (this.isVertical() ? options.autoHeight ? "" : this.cssSlideSize(options) : this.cssHeight(options));
+  }
+  cssSlideSize(options) {
+    const gap = unit(options.gap);
+    return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
+  }
+  cssSlidePadding(options) {
+    const { heightRatio } = options;
+    return heightRatio ? `${heightRatio * 100}%` : "";
+  }
+  buildCssValue(value, unit2) {
+    return `${value}${unit2}`;
+  }
+  parseCssValue(value) {
+    if (isString(value)) {
+      const number = parseFloat(value) || 0;
+      const unit2 = value.replace(/\d*(\.\d*)?/, "") || "px";
+      return { value: number, unit: unit2 };
+    }
+    return { value, unit: "px" };
+  }
+  parseBreakpoints() {
+    const { breakpoints } = this.options;
+    this.breakpoints.push(["default", this.options]);
+    if (breakpoints) {
+      forOwn(breakpoints, (options, width) => {
+        this.breakpoints.push([width, merge(merge({}, this.options), options)]);
+      });
     }
   }
-  /**
-   * Return the breakpoint matching current window width.
-   * Note that Array.prototype.find is not supported by IE.
-   *
-   * @return {number|string} - A breakpoint as number or string. -1 if no point matches.
-   */
-
-
-  function getPoint() {
-    var item = map.filter(function (item) {
-      return item.mql.matches;
-    })[0];
-    return item ? item.point : -1;
+  isFixedWidth(options) {
+    return !!options[this.Direction.resolve("fixedWidth")];
   }
-
-  return Breakpoints;
-};
-/**
- * Export components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var COMPLETE = {
-  Options: Options,
-  Breakpoints: Breakpoints,
-  Controller: Controller,
-  Elements: Elements,
-  Track: Track,
-  Clones: Clones,
-  Layout: Layout,
-  Drag: Drag,
-  Click: Click,
-  Autoplay: Autoplay,
-  Cover: Cover,
-  Arrows: Arrows,
-  Pagination: Pagination,
-  LazyLoad: LazyLoad,
-  Keyboard: Keyboard,
-  Sync: Sync,
-  A11y: A11y
-};
-/**
- * Exports the Splide class with all components.
- *
- * @since 1.0.0
- */
-
-var Splide = /*#__PURE__*/function (_Splide$) {
-  _inheritsLoose(Splide, _Splide$);
-
-  function Splide(root, options) {
-    return _Splide$.call(this, root, options, COMPLETE) || this;
+  isLoop() {
+    return this.options.type === LOOP;
   }
+  isCenter(options) {
+    if (options.focus === "center") {
+      if (this.isLoop()) {
+        return true;
+      }
+      if (this.options.type === SLIDE) {
+        return !this.options.trimSpace;
+      }
+    }
+    return false;
+  }
+  isVertical() {
+    return this.options.direction === TTB;
+  }
+  buildClasses() {
+    const { options } = this;
+    return [
+      CLASS_ROOT,
+      `${CLASS_ROOT}--${options.type}`,
+      `${CLASS_ROOT}--${options.direction}`,
+      options.drag && `${CLASS_ROOT}--draggable`,
+      options.isNavigation && `${CLASS_ROOT}--nav`,
+      CLASS_ACTIVE,
+      !this.config.hidden && CLASS_RENDERED
+    ].filter(Boolean).join(" ");
+  }
+  buildAttrs(attrs) {
+    let attr = "";
+    forOwn(attrs, (value, key) => {
+      attr += value ? ` ${camelToKebab(key)}="${value}"` : "";
+    });
+    return attr.trim();
+  }
+  buildStyles(styles) {
+    let style = "";
+    forOwn(styles, (value, key) => {
+      style += ` ${camelToKebab(key)}:${value};`;
+    });
+    return style.trim();
+  }
+  renderSlides() {
+    const { slideTag: tag } = this.config;
+    return this.slides.map((content) => {
+      return `<${tag} ${this.buildAttrs(content.attrs)}>${content.html || ""}</${tag}>`;
+    }).join("");
+  }
+  cover(content) {
+    const { styles, html = "" } = content;
+    if (this.options.cover && !this.options.lazyLoad) {
+      const src = html.match(/<img.*?src\s*=\s*(['"])(.+?)\1.*?>/);
+      if (src && src[2]) {
+        styles.background = `center/cover no-repeat url('${src[2]}')`;
+      }
+    }
+  }
+  generateClones(contents) {
+    const { classes } = this.options;
+    const count = this.getCloneCount();
+    const slides = contents.slice();
+    while (slides.length < count) {
+      push(slides, slides);
+    }
+    push(slides.slice(-count).reverse(), slides.slice(0, count)).forEach((content, index) => {
+      const attrs = assign({}, content.attrs, { class: `${content.attrs.class} ${classes.clone}` });
+      const clone = assign({}, content, { attrs });
+      index < count ? contents.unshift(clone) : contents.push(clone);
+    });
+  }
+  getCloneCount() {
+    if (this.isLoop()) {
+      const { options } = this;
+      if (options.clones) {
+        return options.clones;
+      }
+      const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
+      return perPage * ((options.flickMaxPages || 1) + 1);
+    }
+    return 0;
+  }
+  renderArrows() {
+    let html = "";
+    html += `<div class="${this.options.classes.arrows}">`;
+    html += this.renderArrow(true);
+    html += this.renderArrow(false);
+    html += `</div>`;
+    return html;
+  }
+  renderArrow(prev) {
+    const { classes, i18n } = this.options;
+    const attrs = {
+      class: `${classes.arrow} ${prev ? classes.prev : classes.next}`,
+      type: "button",
+      ariaLabel: prev ? i18n.prev : i18n.next
+    };
+    return `<button ${this.buildAttrs(attrs)}><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
+  }
+  html() {
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack, slider, beforeSlider, afterSlider } = this.config;
+    let html = "";
+    html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
+    html += `<style>${this.Style.build()}</style>`;
+    if (slider) {
+      html += beforeSlider || "";
+      html += `<div class="splide__slider">`;
+    }
+    html += beforeTrack || "";
+    if (arrows) {
+      html += this.renderArrows();
+    }
+    html += `<div class="splide__track">`;
+    html += `<${listTag} class="splide__list">`;
+    html += this.renderSlides();
+    html += `</${listTag}>`;
+    html += `</div>`;
+    html += afterTrack || "";
+    if (slider) {
+      html += `</div>`;
+      html += afterSlider || "";
+    }
+    html += `</div>`;
+    return html;
+  }
+}
 
-  return Splide;
-}(Splide$1);
-
+exports.CLASSES = CLASSES;
+exports.CLASS_ACTIVE = CLASS_ACTIVE;
+exports.CLASS_ARROW = CLASS_ARROW;
+exports.CLASS_ARROWS = CLASS_ARROWS;
+exports.CLASS_ARROW_NEXT = CLASS_ARROW_NEXT;
+exports.CLASS_ARROW_PREV = CLASS_ARROW_PREV;
+exports.CLASS_AUTOPLAY = CLASS_AUTOPLAY;
+exports.CLASS_CLONE = CLASS_CLONE;
+exports.CLASS_CONTAINER = CLASS_CONTAINER;
+exports.CLASS_INITIALIZED = CLASS_INITIALIZED;
+exports.CLASS_LIST = CLASS_LIST;
+exports.CLASS_LOADING = CLASS_LOADING;
+exports.CLASS_NEXT = CLASS_NEXT;
+exports.CLASS_PAGINATION = CLASS_PAGINATION;
+exports.CLASS_PAGINATION_PAGE = CLASS_PAGINATION_PAGE;
+exports.CLASS_PAUSE = CLASS_PAUSE;
+exports.CLASS_PLAY = CLASS_PLAY;
+exports.CLASS_PREV = CLASS_PREV;
+exports.CLASS_PROGRESS = CLASS_PROGRESS;
+exports.CLASS_PROGRESS_BAR = CLASS_PROGRESS_BAR;
+exports.CLASS_ROOT = CLASS_ROOT;
+exports.CLASS_SLIDE = CLASS_SLIDE;
+exports.CLASS_SLIDER = CLASS_SLIDER;
+exports.CLASS_SPINNER = CLASS_SPINNER;
+exports.CLASS_TRACK = CLASS_TRACK;
+exports.CLASS_VISIBLE = CLASS_VISIBLE;
+exports.EVENT_ACTIVE = EVENT_ACTIVE;
+exports.EVENT_ARROWS_MOUNTED = EVENT_ARROWS_MOUNTED;
+exports.EVENT_ARROWS_UPDATED = EVENT_ARROWS_UPDATED;
+exports.EVENT_AUTOPLAY_PAUSE = EVENT_AUTOPLAY_PAUSE;
+exports.EVENT_AUTOPLAY_PLAY = EVENT_AUTOPLAY_PLAY;
+exports.EVENT_AUTOPLAY_PLAYING = EVENT_AUTOPLAY_PLAYING;
+exports.EVENT_CLICK = EVENT_CLICK;
+exports.EVENT_DESTROY = EVENT_DESTROY;
+exports.EVENT_DRAG = EVENT_DRAG;
+exports.EVENT_DRAGGED = EVENT_DRAGGED;
+exports.EVENT_DRAGGING = EVENT_DRAGGING;
+exports.EVENT_HIDDEN = EVENT_HIDDEN;
+exports.EVENT_INACTIVE = EVENT_INACTIVE;
+exports.EVENT_LAZYLOAD_LOADED = EVENT_LAZYLOAD_LOADED;
+exports.EVENT_MOUNTED = EVENT_MOUNTED;
+exports.EVENT_MOVE = EVENT_MOVE;
+exports.EVENT_MOVED = EVENT_MOVED;
+exports.EVENT_NAVIGATION_MOUNTED = EVENT_NAVIGATION_MOUNTED;
+exports.EVENT_PAGINATION_MOUNTED = EVENT_PAGINATION_MOUNTED;
+exports.EVENT_PAGINATION_UPDATED = EVENT_PAGINATION_UPDATED;
+exports.EVENT_READY = EVENT_READY;
+exports.EVENT_REFRESH = EVENT_REFRESH;
+exports.EVENT_REPOSITIONED = EVENT_REPOSITIONED;
+exports.EVENT_RESIZE = EVENT_RESIZE;
+exports.EVENT_RESIZED = EVENT_RESIZED;
+exports.EVENT_SCROLL = EVENT_SCROLL;
+exports.EVENT_SCROLLED = EVENT_SCROLLED;
+exports.EVENT_SLIDE_KEYDOWN = EVENT_SLIDE_KEYDOWN;
+exports.EVENT_UPDATED = EVENT_UPDATED;
+exports.EVENT_VISIBLE = EVENT_VISIBLE;
+exports.EventBus = EventBus;
+exports.EventInterface = EventInterface;
+exports.RequestInterval = RequestInterval;
+exports.STATUS_CLASSES = STATUS_CLASSES;
 exports.Splide = Splide;
+exports.SplideRenderer = SplideRenderer;
+exports.State = State;
+exports.Throttle = Throttle;
 exports['default'] = Splide;

dist/js/splide.esm.js

@@ -1,5735 +1,2762 @@
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /*!
  * Splide.js
- * Version  : 2.4.24
+ * Version  : 3.0.0
  * License  : MIT
- * Copyright: 2020 Naotoshi Fujita
- */
-
-/**
- * The function for providing an Event object simply managing events.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+ * Copyright: 2021 Naotoshi Fujita
+ */
+const PROJECT_CODE = "splide";
+const DATA_ATTRIBUTE = `data-${PROJECT_CODE}`;
+
+const CREATED = 1;
+const MOUNTED = 2;
+const IDLE = 3;
+const MOVING = 4;
+const DESTROYED = 5;
+const STATES = {
+  CREATED,
+  MOUNTED,
+  IDLE,
+  MOVING,
+  DESTROYED
+};
 
-/**
- * The function for providing an Event object simply managing events.
- */
-var Event = function Event() {
-  /**
-   * Store all event data.
-   *
-   * @type {Array}
-   */
-  var data = [];
-  var Event = {
-    /**
-     * Subscribe the given event(s).
-     *
-     * @param {string}   events  - An event name. Use space to separate multiple events.
-     *                             Also, namespace is accepted by dot, such as 'resize.{namespace}'.
-     * @param {function} handler - A callback function.
-     * @param {Element}  elm     - Optional. Native event will be listened to when this arg is provided.
-     * @param {Object}   options - Optional. Options for addEventListener.
-     */
-    on: function on(events, handler, elm, options) {
-      if (elm === void 0) {
-        elm = null;
-      }
+const DEFAULT_EVENT_PRIORITY = 10;
+const DEFAULT_USER_EVENT_PRIORITY = 20;
 
-      if (options === void 0) {
-        options = {};
-      }
+function empty(array) {
+  array.length = 0;
+}
 
-      events.split(' ').forEach(function (event) {
-        if (elm) {
-          elm.addEventListener(event, handler, options);
-        }
+function isObject(subject) {
+  return !isNull(subject) && typeof subject === "object";
+}
+function isArray(subject) {
+  return Array.isArray(subject);
+}
+function isFunction(subject) {
+  return typeof subject === "function";
+}
+function isString(subject) {
+  return typeof subject === "string";
+}
+function isUndefined(subject) {
+  return typeof subject === "undefined";
+}
+function isNull(subject) {
+  return subject === null;
+}
+function isHTMLElement(subject) {
+  return subject instanceof HTMLElement;
+}
 
-        data.push({
-          event: event,
-          handler: handler,
-          elm: elm,
-          options: options
-        });
-      });
-    },
+function toArray(value) {
+  return isArray(value) ? value : [value];
+}
 
-    /**
-     * Unsubscribe the given event(s).
-     *
-     * @param {string}  events - A event name or names split by space.
-     * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
-     */
-    off: function off(events, elm) {
-      if (elm === void 0) {
-        elm = null;
-      }
+function forEach(values, iteratee) {
+  toArray(values).forEach(iteratee);
+}
 
-      events.split(' ').forEach(function (event) {
-        data = data.filter(function (item) {
-          if (item && item.event === event && item.elm === elm) {
-            unsubscribe(item);
-            return false;
-          }
+function includes(array, value) {
+  return array.indexOf(value) > -1;
+}
 
-          return true;
-        });
-      });
-    },
+function push(array, items) {
+  array.push(...toArray(items));
+  return array;
+}
 
-    /**
-     * Emit an event.
-     * This method is only for custom events.
-     *
-     * @param {string}  event - An event name.
-     * @param {*}       args  - Any number of arguments passed to handlers.
-     */
-    emit: function emit(event) {
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
+const arrayProto = Array.prototype;
 
-      data.forEach(function (item) {
-        if (!item.elm && item.event.split('.')[0] === event) {
-          item.handler.apply(item, args);
-        }
-      });
-    },
+function slice(arrayLike, start, end) {
+  return arrayProto.slice.call(arrayLike, start, end);
+}
 
-    /**
-     * Clear event data.
-     */
-    destroy: function destroy() {
-      data.forEach(unsubscribe);
-      data = [];
-    }
-  };
-  /**
-   * Remove the registered event listener.
-   *
-   * @param {Object} item - An object containing event data.
-   */
+function find(arrayLike, predicate) {
+  return slice(arrayLike).filter(predicate)[0];
+}
 
-  function unsubscribe(item) {
-    if (item.elm) {
-      item.elm.removeEventListener(item.event, item.handler, item.options);
-    }
+function toggleClass(elm, classes, add) {
+  if (elm) {
+    forEach(classes, (name) => {
+      if (name) {
+        elm.classList[add ? "add" : "remove"](name);
+      }
+    });
   }
+}
 
-  return Event;
-};
-/**
- * The function providing a super simple state system.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The function providing a super simple state system.
- *
- * @param {string|number} initialState - Provide the initial state value.
- */
-
+function addClass(elm, classes) {
+  toggleClass(elm, isString(classes) ? classes.split(" ") : classes, true);
+}
 
-var State = function State(initialState) {
-  /**
-   * Store the current state.
-   *
-   * @type {string|number}
-   */
-  var curr = initialState;
-  return {
-    /**
-     * Change state.
-     *
-     * @param {string|number} state - A new state.
-     */
-    set: function set(state) {
-      curr = state;
-    },
+function append(parent, children) {
+  forEach(children, parent.appendChild.bind(parent));
+}
 
-    /**
-     * Verify if the current state is given one or not.
-     *
-     * @param {string|number} state - A state name to be verified.
-     *
-     * @return {boolean} - True if the current state is the given one.
-     */
-    is: function is(state) {
-      return state === curr;
+function before(nodes, ref) {
+  forEach(nodes, (node) => {
+    const parent = ref.parentNode;
+    if (parent) {
+      parent.insertBefore(node, ref);
     }
-  };
-};
-/**
- * Some utility functions related with Object, supporting IE.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var keys = Object.keys;
-/**
- * Iterate an object like Array.forEach.
- * IE doesn't support forEach of HTMLCollection.
- *
- * @param {Object}    obj       - An object.
- * @param {function}  callback  - A function handling each value. Arguments are value, property and index.
- */
-
-function each(obj, callback) {
-  keys(obj).some(function (key, index) {
-    return callback(obj[key], key, index);
   });
 }
-/**
- * Return values of the given object as an array.
- * IE doesn't support Object.values.
- *
- * @param {Object} obj - An object.
- *
- * @return {Array} - An array containing all values of the given object.
- */
-
 
-function values(obj) {
-  return keys(obj).map(function (key) {
-    return obj[key];
-  });
+function matches(elm, selector) {
+  return (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
 }
-/**
- * Check if the given subject is object or not.
- *
- * @param {*} subject - A subject to be verified.
- *
- * @return {boolean} - True if object, false otherwise.
- */
 
-
-function isObject(subject) {
-  return typeof subject === 'object';
+function children(parent, selector) {
+  return parent ? slice(parent.children).filter((child) => matches(child, selector)) : [];
 }
-/**
- * Merge two objects deeply.
- *
- * @param {Object} to   - An object where "from" is merged.
- * @param {Object} from - An object merged to "to".
- *
- * @return {Object} - A merged object.
- */
-
 
-function merge(_ref, from) {
-  var to = _extends({}, _ref);
+function child(parent, selector) {
+  return selector ? children(parent, selector)[0] : parent.firstElementChild;
+}
 
-  each(from, function (value, key) {
-    if (isObject(value)) {
-      if (!isObject(to[key])) {
-        to[key] = {};
+function forOwn(object, iteratee) {
+  if (object) {
+    const keys = Object.keys(object);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (key !== "__proto__") {
+        if (iteratee(object[key], key) === false) {
+          break;
+        }
       }
-
-      to[key] = merge(to[key], value);
-    } else {
-      to[key] = value;
     }
-  });
-  return to;
+  }
+  return object;
 }
-/**
- * Assign all properties "from" to "to" object.
- *
- * @param {Object} to   - An object where properties are assigned.
- * @param {Object} from - An object whose properties are assigned to "to".
- *
- * @return {Object} - An assigned object.
- */
 
+function assign(object) {
+  slice(arguments, 1).forEach((source) => {
+    forOwn(source, (value, key) => {
+      object[key] = source[key];
+    });
+  });
+  return object;
+}
 
-function assign(to, from) {
-  keys(from).forEach(function (key) {
-    if (!to[key]) {
-      Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
+function merge(object, source) {
+  forOwn(source, (value, key) => {
+    if (isArray(value)) {
+      object[key] = value.slice();
+    } else if (isObject(value)) {
+      object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+    } else {
+      object[key] = value;
     }
   });
-  return to;
+  return object;
 }
-/**
- * A package of some miscellaneous utility functions.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Convert the given value to array.
- *
- * @param {*} value - Any value.
- *
- * @return {*[]} - Array containing the given value.
- */
-
 
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
+function removeAttribute(elm, attrs) {
+  if (elm) {
+    forEach(attrs, (attr) => {
+      elm.removeAttribute(attr);
+    });
+  }
 }
-/**
- * Check if the given value is between min and max.
- * Min will be returned when the value is less than min or max will do when greater than max.
- *
- * @param {number} value - A number to be checked.
- * @param {number} m1    - Minimum or maximum number.
- * @param {number} m2    - Maximum or minimum number.
- *
- * @return {number} - A value itself, min or max.
- */
-
 
-function between(value, m1, m2) {
-  return Math.min(Math.max(value, m1 > m2 ? m2 : m1), m1 > m2 ? m1 : m2);
+function setAttribute(elm, attrs, value) {
+  if (isObject(attrs)) {
+    forOwn(attrs, (value2, name) => {
+      setAttribute(elm, name, value2);
+    });
+  } else {
+    isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
+  }
 }
-/**
- * The sprintf method with minimum functionality.
- *
- * @param {string}       format       - The string format.
- * @param {string|Array} replacements - Replacements accepting multiple arguments.
- *
- * @returns {string} - Converted string.
- */
 
-
-function sprintf(format, replacements) {
-  var i = 0;
-  return format.replace(/%s/g, function () {
-    return toArray(replacements)[i++];
-  });
+function create(tag, attrs, parent) {
+  const elm = document.createElement(tag);
+  if (attrs) {
+    isString(attrs) ? addClass(elm, attrs) : setAttribute(elm, attrs);
+  }
+  parent && append(parent, elm);
+  return elm;
 }
-/**
- * Append px unit to the given subject if necessary.
- *
- * @param {number|string} value - A value that may not include an unit.
- *
- * @return {string} - If the value is string, return itself.
- *                    If number, do value + "px". An empty string, otherwise.
- */
-
-
-function unit(value) {
-  var type = typeof value;
 
-  if (type === 'number' && value > 0) {
-    return parseFloat(value) + 'px';
+function style(elm, styles) {
+  if (isString(styles)) {
+    return getComputedStyle(elm)[styles];
   }
+  forOwn(styles, (value, key) => {
+    if (!isNull(value)) {
+      elm.style[key] = `${value}`;
+    }
+  });
+}
 
-  return type === 'string' ? value : '';
+function display(elm, display2) {
+  style(elm, { display: display2 });
 }
-/**
- * Pad start with 0.
- *
- * @param {number} number - A number to be filled with 0.
- *
- * @return {string|number} - Padded number.
- */
 
+function getAttribute(elm, attr) {
+  return elm.getAttribute(attr);
+}
 
-function pad(number) {
-  return number < 10 ? '0' + number : number;
+function hasClass(elm, className) {
+  return elm && elm.classList.contains(className);
 }
-/**
- * Convert the given value to pixel.
- *
- * @param {Element}       root  - Root element where a dummy div is appended.
- * @param {string|number} value - CSS value to be converted, such as 10rem.
- *
- * @return {number} - Pixel.
- */
 
+function rect(target) {
+  return target.getBoundingClientRect();
+}
 
-function toPixel(root, value) {
-  if (typeof value === 'string') {
-    var div = create('div', {});
-    applyStyle(div, {
-      position: 'absolute',
-      width: value
-    });
-    append(root, div);
-    value = div.clientWidth;
+function remove(nodes) {
+  forEach(nodes, (node) => {
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+  });
+}
 
-    _remove(div);
+function measure(parent, value) {
+  if (isString(value)) {
+    const div = create("div", { style: `width: ${value}; position: absolute;` }, parent);
+    value = rect(div).width;
+    remove(div);
   }
-
-  return +value || 0;
+  return value;
 }
-/**
- * Some utility functions related with DOM.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
 
-/**
- * Find the first element matching the given selector.
- * Be aware that all selectors after a space are ignored.
- *
- * @param {Element|Node}  elm       - An ancestor element.
- * @param {string}        selector  - DOMString.
- *
- * @return {Element|null} - A found element or null.
- */
+function parseHtml(html) {
+  return child(new DOMParser().parseFromString(html, "text/html").body);
+}
 
+function prevent(e, stopPropagation) {
+  e.preventDefault();
+  if (stopPropagation) {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  }
+}
 
-function find(elm, selector) {
-  return elm ? elm.querySelector(selector.split(' ')[0]) : null;
+function query(parent, selector) {
+  return parent && parent.querySelector(selector);
 }
-/**
- * Find a first child having the given tag or class name.
- *
- * @param {Element} parent         - A parent element.
- * @param {string}  tagOrClassName - A tag or class name.
- *
- * @return {Element|undefined} - A found element on success or undefined on failure.
- */
 
+function queryAll(parent, selector) {
+  return slice(parent.querySelectorAll(selector));
+}
 
-function child(parent, tagOrClassName) {
-  return children(parent, tagOrClassName)[0];
+function removeClass(elm, classes) {
+  toggleClass(elm, classes, false);
 }
-/**
- * Return chile elements that matches the provided tag or class name.
- *
- * @param {Element} parent         - A parent element.
- * @param {string}  tagOrClassName - A tag or class name.
- *
- * @return {Element[]} - Found elements.
- */
 
+function unit(value) {
+  return isString(value) ? value : value ? `${value}px` : "";
+}
 
-function children(parent, tagOrClassName) {
-  if (parent) {
-    return values(parent.children).filter(function (child) {
-      return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName === tagOrClassName;
-    });
+function assert(condition, message = "") {
+  if (!condition) {
+    throw new Error(`[${PROJECT_CODE}] ${message}`);
   }
+}
 
-  return [];
+function nextTick(callback) {
+  setTimeout(callback);
 }
-/**
- * Create an element with some optional attributes.
- *
- * @param {string} tag   - A tag name.
- * @param {Object} attrs - An object any attribute pairs of name and value.
- *
- * @return {Element} - A created element.
- */
 
+const noop = () => {
+};
 
-function create(tag, attrs) {
-  var elm = document.createElement(tag);
-  each(attrs, function (value, key) {
-    return setAttribute(elm, key, value);
-  });
-  return elm;
+function raf(func) {
+  return requestAnimationFrame(func);
 }
-/**
- * Convert HTML string to DOM node.
- *
- * @param {string} html - HTML string.
- *
- * @return {Node} - A created node.
- */
 
+const { min, max, floor, ceil, abs } = Math;
 
-function domify(html) {
-  var div = create('div', {});
-  div.innerHTML = html;
-  return div.firstChild;
+function approximatelyEqual(x, y, epsilon) {
+  return abs(x - y) < epsilon;
 }
-/**
- * Remove a given element from a DOM tree.
- *
- * @param {Element|Element[]} elms - Element(s) to be removed.
- */
 
+function between(number, minOrMax, maxOrMin, exclusive) {
+  const minimum = min(minOrMax, maxOrMin);
+  const maximum = max(minOrMax, maxOrMin);
+  return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum;
+}
 
-function _remove(elms) {
-  toArray(elms).forEach(function (elm) {
-    if (elm) {
-      var parent = elm.parentElement;
-      parent && parent.removeChild(elm);
-    }
-  });
+function clamp(number, x, y) {
+  const minimum = min(x, y);
+  const maximum = max(x, y);
+  return min(max(minimum, number), maximum);
 }
-/**
- * Append a child to a given element.
- *
- * @param {Element} parent - A parent element.
- * @param {Element} child  - An element to be appended.
- */
 
+function sign(x) {
+  return +(x > 0) - +(x < 0);
+}
 
-function append(parent, child) {
-  if (parent) {
-    parent.appendChild(child);
-  }
+function camelToKebab(string) {
+  return string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
-/**
- * Insert an element before the reference element.
- *
- * @param {Element|Node} ref - A reference element.
- * @param {Element}      elm - An element to be inserted.
- */
 
+function format(string, replacements) {
+  forEach(replacements, (replacement) => {
+    string = string.replace("%s", `${replacement}`);
+  });
+  return string;
+}
 
-function before(elm, ref) {
-  if (elm && ref) {
-    var parent = ref.parentElement;
-    parent && parent.insertBefore(elm, ref);
-  }
+function pad(number) {
+  return number < 10 ? `0${number}` : `${number}`;
 }
-/**
- * Apply styles to the given element.
- *
- * @param {Element} elm     - An element where styles are applied.
- * @param {Object}  styles  - Object containing styles.
- */
 
+const ids = {};
+function uniqueId(prefix) {
+  return `${prefix}${pad(ids[prefix] = (ids[prefix] || 0) + 1)}`;
+}
 
-function applyStyle(elm, styles) {
-  if (elm) {
-    each(styles, function (value, prop) {
-      if (value !== null) {
-        elm.style[prop] = value;
-      }
+function EventBus() {
+  let handlers = {};
+  function on(events, callback, key, priority = DEFAULT_EVENT_PRIORITY) {
+    forEachEvent(events, (event, namespace) => {
+      handlers[event] = handlers[event] || [];
+      push(handlers[event], {
+        _event: event,
+        _callback: callback,
+        _namespace: namespace,
+        _priority: priority,
+        _key: key
+      }).sort((handler1, handler2) => handler1._priority - handler2._priority);
+    });
+  }
+  function off(events, key) {
+    forEachEvent(events, (event, namespace) => {
+      const eventHandlers = handlers[event];
+      handlers[event] = eventHandlers && eventHandlers.filter((handler) => {
+        return handler._key ? handler._key !== key : handler._namespace !== namespace;
+      });
+    });
+  }
+  function offBy(key) {
+    forOwn(handlers, (eventHandlers, event) => {
+      off(event, key);
+    });
+  }
+  function emit(event) {
+    (handlers[event] || []).forEach((handler) => {
+      handler._callback.apply(handler, slice(arguments, 1));
+    });
+  }
+  function destroy() {
+    handlers = {};
+  }
+  function forEachEvent(events, iteratee) {
+    toArray(events).join(" ").split(" ").forEach((eventNS) => {
+      const fragments = eventNS.split(".");
+      iteratee(fragments[0], fragments[1]);
     });
   }
+  return {
+    on,
+    off,
+    offBy,
+    emit,
+    destroy
+  };
 }
-/**
- * Add or remove classes to/from the element.
- * This function is for internal usage.
- *
- * @param {Element}         elm     - An element where classes are added.
- * @param {string|string[]} classes - Class names being added.
- * @param {boolean}         remove  - Whether to remove or add classes.
- */
-
 
-function addOrRemoveClasses(elm, classes, remove) {
-  if (elm) {
-    toArray(classes).forEach(function (name) {
-      if (name) {
-        elm.classList[remove ? 'remove' : 'add'](name);
+const EVENT_MOUNTED = "mounted";
+const EVENT_READY = "ready";
+const EVENT_MOVE = "move";
+const EVENT_MOVED = "moved";
+const EVENT_CLICK = "click";
+const EVENT_ACTIVE = "active";
+const EVENT_INACTIVE = "inactive";
+const EVENT_VISIBLE = "visible";
+const EVENT_HIDDEN = "hidden";
+const EVENT_SLIDE_KEYDOWN = "slide:keydown";
+const EVENT_REFRESH = "refresh";
+const EVENT_UPDATED = "updated";
+const EVENT_RESIZE = "resize";
+const EVENT_RESIZED = "resized";
+const EVENT_REPOSITIONED = "repositioned";
+const EVENT_DRAG = "drag";
+const EVENT_DRAGGING = "dragging";
+const EVENT_DRAGGED = "dragged";
+const EVENT_SCROLL = "scroll";
+const EVENT_SCROLLED = "scrolled";
+const EVENT_DESTROY = "destroy";
+const EVENT_ARROWS_MOUNTED = "arrows:mounted";
+const EVENT_ARROWS_UPDATED = "arrows:updated";
+const EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+const EVENT_PAGINATION_UPDATED = "pagination:updated";
+const EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+const EVENT_AUTOPLAY_PLAY = "autoplay:play";
+const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+
+function EventInterface(Splide2) {
+  const { event } = Splide2;
+  const key = {};
+  let listeners = [];
+  function on(events, callback, priority) {
+    event.on(events, callback, key, priority);
+  }
+  function off(events) {
+    event.off(events, key);
+  }
+  function bind(targets, events, callback, options) {
+    forEachEvent(targets, events, (target, event2) => {
+      listeners.push([target, event2, callback, options]);
+      target.addEventListener(event2, callback, options);
+    });
+  }
+  function unbind(targets, events) {
+    forEachEvent(targets, events, (target, event2) => {
+      listeners = listeners.filter((listener) => {
+        if (listener[0] === target && listener[1] === event2) {
+          target.removeEventListener(event2, listener[2], listener[3]);
+          return false;
+        }
+        return true;
+      });
+    });
+  }
+  function forEachEvent(targets, events, iteratee) {
+    forEach(targets, (target) => {
+      if (target) {
+        events.split(" ").forEach(iteratee.bind(null, target));
       }
     });
   }
+  function destroy() {
+    listeners = listeners.filter((data) => unbind(data[0], data[1]));
+    event.offBy(key);
+  }
+  event.on(EVENT_DESTROY, destroy, key);
+  return {
+    on,
+    off,
+    emit: event.emit,
+    bind,
+    unbind,
+    destroy
+  };
 }
-/**
- * Add classes to the element.
- *
- * @param {Element}          elm     - An element where classes are added.
- * @param {string|string[]}  classes - Class names being added.
- */
 
-
-function addClass(elm, classes) {
-  addOrRemoveClasses(elm, classes, false);
+function RequestInterval(interval, onInterval, onUpdate, limit) {
+  const { now } = Date;
+  let startTime;
+  let rate = 0;
+  let id;
+  let paused = true;
+  let count = 0;
+  function update() {
+    if (!paused) {
+      const elapsed = now() - startTime;
+      if (elapsed >= interval) {
+        rate = 1;
+        startTime = now();
+      } else {
+        rate = elapsed / interval;
+      }
+      if (onUpdate) {
+        onUpdate(rate);
+      }
+      if (rate === 1) {
+        onInterval();
+        if (limit && ++count >= limit) {
+          return pause();
+        }
+      }
+      raf(update);
+    }
+  }
+  function start(resume) {
+    !resume && cancel();
+    startTime = now() - (resume ? rate * interval : 0);
+    paused = false;
+    raf(update);
+  }
+  function pause() {
+    paused = true;
+  }
+  function rewind() {
+    startTime = now();
+    rate = 0;
+    if (onUpdate) {
+      onUpdate(rate);
+    }
+  }
+  function cancel() {
+    cancelAnimationFrame(id);
+    rate = 0;
+    id = 0;
+    paused = true;
+  }
+  function isPaused() {
+    return paused;
+  }
+  return {
+    start,
+    rewind,
+    pause,
+    cancel,
+    isPaused
+  };
 }
-/**
- * Remove a class from the element.
- *
- * @param {Element}         elm     - An element where classes are removed.
- * @param {string|string[]} classes - A class name being removed.
- */
-
 
-function removeClass(elm, classes) {
-  addOrRemoveClasses(elm, classes, true);
+function State(initialState) {
+  let state = initialState;
+  function set(value) {
+    state = value;
+  }
+  function is(states) {
+    return includes(toArray(states), state);
+  }
+  return { set, is };
 }
-/**
- * Verify if the provided element has the class or not.
- *
- * @param {Element} elm       - An element.
- * @param {string}  className - A class name.
- *
- * @return {boolean} - True if the element has the class or false if not.
- */
 
-
-function hasClass(elm, className) {
-  return !!elm && elm.classList.contains(className);
+function Throttle(func, duration) {
+  let interval;
+  function throttled() {
+    if (!interval) {
+      interval = RequestInterval(duration || 0, () => {
+        func.apply(this, arguments);
+        interval = null;
+      }, null, 1);
+      interval.start();
+    }
+  }
+  return throttled;
 }
-/**
- * Set attribute to the given element.
- *
- * @param {Element}                 elm   - An element where an attribute is assigned.
- * @param {string}                  name  - Attribute name.
- * @param {string|number|boolean}   value - Attribute value.
- */
-
 
-function setAttribute(elm, name, value) {
-  if (elm) {
-    elm.setAttribute(name, value);
+function Options(Splide2, Components2, options) {
+  const throttledObserve = Throttle(observe);
+  let initialOptions;
+  let points;
+  let currPoint;
+  function setup() {
+    try {
+      merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE)));
+    } catch (e) {
+      assert(false, e.message);
+    }
+    initialOptions = merge({}, options);
+    const { breakpoints } = options;
+    if (breakpoints) {
+      const isMin = options.mediaQuery === "min";
+      points = Object.keys(breakpoints).sort((n, m) => isMin ? +m - +n : +n - +m).map((point) => [
+        point,
+        matchMedia(`(${isMin ? "min" : "max"}-width:${point}px)`)
+      ]);
+      observe();
+    }
+  }
+  function mount() {
+    if (points) {
+      addEventListener("resize", throttledObserve);
+    }
+  }
+  function destroy(completely) {
+    if (completely) {
+      removeEventListener("resize", throttledObserve);
+    }
+  }
+  function observe() {
+    const item = find(points, (item2) => item2[1].matches) || [];
+    if (item[0] !== currPoint) {
+      onMatch(currPoint = item[0]);
+    }
+  }
+  function onMatch(point) {
+    const newOptions = options.breakpoints[point] || initialOptions;
+    if (newOptions.destroy) {
+      Splide2.options = initialOptions;
+      Splide2.destroy(newOptions.destroy === "completely");
+    } else {
+      if (Splide2.state.is(DESTROYED)) {
+        destroy(true);
+        Splide2.mount();
+      }
+      Splide2.options = newOptions;
+    }
   }
+  return {
+    setup,
+    mount,
+    destroy
+  };
 }
-/**
- * Get attribute from the given element.
- *
- * @param {Element} elm  - An element where an attribute is assigned.
- * @param {string}  name - Attribute name.
- *
- * @return {string} - The value of the given attribute if available. An empty string if not.
- */
 
-
-function getAttribute(elm, name) {
-  return elm ? elm.getAttribute(name) : '';
+const RTL = "rtl";
+const TTB = "ttb";
+
+const ORIENTATION_MAP = {
+  marginRight: ["marginBottom", "marginLeft"],
+  autoWidth: ["autoHeight"],
+  fixedWidth: ["fixedHeight"],
+  paddingLeft: ["paddingTop", "paddingRight"],
+  paddingRight: ["paddingBottom", "paddingLeft"],
+  width: ["height"],
+  left: ["top", "right"],
+  right: ["bottom", "left"],
+  x: ["y"],
+  X: ["Y"],
+  Y: ["X"],
+  ArrowLeft: ["ArrowUp", "ArrowRight"],
+  ArrowRight: ["ArrowDown", "ArrowLeft"]
+};
+function Direction(Splide2, Components2, options) {
+  function resolve(prop, axisOnly) {
+    const { direction } = options;
+    const index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
+    return ORIENTATION_MAP[prop][index] || prop;
+  }
+  function orient(value) {
+    return value * (options.direction === RTL ? 1 : -1);
+  }
+  return {
+    resolve,
+    orient
+  };
 }
-/**
- * Remove attribute from the given element.
- *
- * @param {Element|Element[]} elms  - An element where an attribute is removed.
- * @param {string|string[]}      names - Attribute name.
- */
 
+const CLASS_ROOT = PROJECT_CODE;
+const CLASS_SLIDER = `${PROJECT_CODE}__slider`;
+const CLASS_TRACK = `${PROJECT_CODE}__track`;
+const CLASS_LIST = `${PROJECT_CODE}__list`;
+const CLASS_SLIDE = `${PROJECT_CODE}__slide`;
+const CLASS_CLONE = `${CLASS_SLIDE}--clone`;
+const CLASS_CONTAINER = `${CLASS_SLIDE}__container`;
+const CLASS_ARROWS = `${PROJECT_CODE}__arrows`;
+const CLASS_ARROW = `${PROJECT_CODE}__arrow`;
+const CLASS_ARROW_PREV = `${CLASS_ARROW}--prev`;
+const CLASS_ARROW_NEXT = `${CLASS_ARROW}--next`;
+const CLASS_PAGINATION = `${PROJECT_CODE}__pagination`;
+const CLASS_PAGINATION_PAGE = `${CLASS_PAGINATION}__page`;
+const CLASS_PROGRESS = `${PROJECT_CODE}__progress`;
+const CLASS_PROGRESS_BAR = `${CLASS_PROGRESS}__bar`;
+const CLASS_AUTOPLAY = `${PROJECT_CODE}__autoplay`;
+const CLASS_PLAY = `${PROJECT_CODE}__play`;
+const CLASS_PAUSE = `${PROJECT_CODE}__pause`;
+const CLASS_SPINNER = `${PROJECT_CODE}__spinner`;
+const CLASS_INITIALIZED = "is-initialized";
+const CLASS_ACTIVE = "is-active";
+const CLASS_PREV = "is-prev";
+const CLASS_NEXT = "is-next";
+const CLASS_VISIBLE = "is-visible";
+const CLASS_LOADING = "is-loading";
+const STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING];
+const CLASSES = {
+  slide: CLASS_SLIDE,
+  clone: CLASS_CLONE,
+  arrows: CLASS_ARROWS,
+  arrow: CLASS_ARROW,
+  prev: CLASS_ARROW_PREV,
+  next: CLASS_ARROW_NEXT,
+  pagination: CLASS_PAGINATION,
+  page: CLASS_PAGINATION_PAGE,
+  spinner: CLASS_SPINNER
+};
 
-function removeAttribute(elms, names) {
-  toArray(names).forEach(function (name) {
-    toArray(elms).forEach(function (elm) {
-      return elm && elm.removeAttribute(name);
+function Elements(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  const { root } = Splide2;
+  const elements = {};
+  const slides = [];
+  let classes;
+  let slider;
+  let track;
+  let list;
+  function setup() {
+    collect();
+    identify();
+    addClass(root, classes = getClasses());
+  }
+  function mount() {
+    on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2);
+    on(EVENT_UPDATED, update);
+  }
+  function destroy() {
+    empty(slides);
+    removeClass(root, classes);
+  }
+  function refresh() {
+    destroy();
+    setup();
+  }
+  function update() {
+    removeClass(root, classes);
+    addClass(root, classes = getClasses());
+  }
+  function collect() {
+    slider = child(root, `.${CLASS_SLIDER}`);
+    track = query(root, `.${CLASS_TRACK}`);
+    list = child(track, `.${CLASS_LIST}`);
+    assert(track && list, "A track/list element is missing.");
+    push(slides, children(list, `.${CLASS_SLIDE}:not(.${CLASS_CLONE})`));
+    const autoplay = find(`.${CLASS_AUTOPLAY}`);
+    const arrows = find(`.${CLASS_ARROWS}`);
+    assign(elements, {
+      root,
+      slider,
+      track,
+      list,
+      slides,
+      arrows,
+      autoplay,
+      prev: query(arrows, `.${CLASS_ARROW_PREV}`),
+      next: query(arrows, `.${CLASS_ARROW_NEXT}`),
+      bar: query(find(`.${CLASS_PROGRESS}`), `.${CLASS_PROGRESS_BAR}`),
+      play: query(autoplay, `.${CLASS_PLAY}`),
+      pause: query(autoplay, `.${CLASS_PAUSE}`)
     });
+  }
+  function identify() {
+    const id = root.id || uniqueId(PROJECT_CODE);
+    root.id = id;
+    track.id = track.id || `${id}-track`;
+    list.id = list.id || `${id}-list`;
+  }
+  function find(selector) {
+    return child(root, selector) || child(slider, selector);
+  }
+  function getClasses() {
+    return [
+      `${CLASS_ROOT}--${options.type}`,
+      `${CLASS_ROOT}--${options.direction}`,
+      options.drag && `${CLASS_ROOT}--draggable`,
+      options.isNavigation && `${CLASS_ROOT}--nav`,
+      CLASS_ACTIVE
+    ];
+  }
+  return assign(elements, {
+    setup,
+    mount,
+    destroy
   });
 }
-/**
- * Return the Rect object of the provided object.
- *
- * @param {Element} elm - An element.
- *
- * @return {ClientRect|DOMRect} - A rect object.
- */
-
 
-function getRect(elm) {
-  return elm.getBoundingClientRect();
+function Style$1() {
+  let style;
+  let sheet;
+  function mount() {
+    style = create("style", {}, document.head);
+    sheet = style.sheet;
+  }
+  function destroy() {
+    remove(style);
+    sheet = null;
+  }
+  function rule(selector, prop, value) {
+    const { cssRules } = sheet;
+    const cssRule = find(cssRules, (cssRule2) => isCSSStyleRule(cssRule2) && cssRule2.selectorText === selector) || cssRules[sheet.insertRule(`${selector}{}`, 0)];
+    if (isCSSStyleRule(cssRule)) {
+      const { style: style2 } = cssRule;
+      value = `${value}`;
+      if (style2[prop] !== value) {
+        style2[prop] = value;
+      }
+    }
+  }
+  function ruleBy(target, prop, value) {
+    rule(`#${isHTMLElement(target) ? target.id : target}`, prop, value);
+  }
+  function isCSSStyleRule(cssRule) {
+    return cssRule instanceof CSSStyleRule;
+  }
+  return {
+    mount,
+    destroy,
+    rule,
+    ruleBy
+  };
 }
-/**
- * Trigger the given callback after all images contained by the element are loaded.
- *
- * @param {Element}  elm      - Element that may contain images.
- * @param {Function} callback - Callback function fired right after all images are loaded.
- */
 
-
-function loaded(elm, callback) {
-  var images = elm.querySelectorAll('img');
-  var length = images.length;
-
-  if (length) {
-    var count = 0;
-    each(images, function (img) {
-      img.onload = img.onerror = function () {
-        if (++count === length) {
-          callback();
-        }
-      };
+const ROLE = "role";
+const ARIA_CONTROLS = "aria-controls";
+const ARIA_CURRENT = "aria-current";
+const ARIA_LABEL = "aria-label";
+const ARIA_HIDDEN = "aria-hidden";
+const TAB_INDEX = "tabindex";
+const DISABLED = "disabled";
+const ARIA_ORIENTATION = "aria-orientation";
+const ALL_ATTRIBUTES = [
+  ROLE,
+  ARIA_CONTROLS,
+  ARIA_CURRENT,
+  ARIA_LABEL,
+  ARIA_HIDDEN,
+  ARIA_ORIENTATION,
+  TAB_INDEX,
+  DISABLED
+];
+
+const SLIDE = "slide";
+const LOOP = "loop";
+const FADE = "fade";
+
+function Slide$1(Splide2, index, slideIndex, slide) {
+  const { on, emit, bind, destroy: destroyEvents } = EventInterface(Splide2);
+  const { Components, root, options } = Splide2;
+  const { isNavigation, updateOnMove } = options;
+  const { resolve } = Components.Direction;
+  const isClone = slideIndex > -1;
+  const container = child(slide, `.${CLASS_CONTAINER}`);
+  const focusableNodes = options.focusableNodes && queryAll(slide, options.focusableNodes);
+  let destroyed;
+  function mount() {
+    init();
+    bind(slide, "click keydown", (e) => {
+      emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, this, e);
     });
-  } else {
-    // Trigger the callback immediately if there is no image.
-    callback();
-  }
-}
-/**
- * Export slider types.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Normal slider.
- *
- * @type {string}
- */
-
-
-var SLIDE = 'slide';
-/**
- * Loop after the last slide and before the first one.
- *
- * @type {string}
- */
-
-var LOOP = 'loop';
-/**
- * The track doesn't move.
- *
- * @type {string}
- */
-
-var FADE = 'fade';
-/**
- * The component for general slide effect transition.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for general slide effect transition.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Slide$1 = function Slide$1(Splide, Components) {
-  /**
-   * Hold the list element.
-   *
-   * @type {Element}
-   */
-  var list;
-  /**
-   * Hold the onEnd callback function.
-   *
-   * @type {function}
-   */
-
-  var endCallback;
-  return {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      list = Components.Elements.list;
-      Splide.on('transitionend', function (e) {
-        if (e.target === list && endCallback) {
-          endCallback();
-        }
-      }, list);
-    },
-
-    /**
-     * Start transition.
-     *
-     * @param {number}   destIndex - Destination slide index that might be clone's.
-     * @param {number}   newIndex  - New index.
-     * @param {number}   prevIndex - Previous index.
-     * @param {Object}   coord     - Destination coordinates.
-     * @param {function} done      - Callback function must be invoked when transition is completed.
-     */
-    start: function start(destIndex, newIndex, prevIndex, coord, done) {
-      var options = Splide.options;
-      var edgeIndex = Components.Controller.edgeIndex;
-      var speed = options.speed;
-      endCallback = done;
-
-      if (Splide.is(SLIDE)) {
-        if (prevIndex === 0 && newIndex >= edgeIndex || prevIndex >= edgeIndex && newIndex === 0) {
-          speed = options.rewindSpeed || speed;
-        }
-      }
-
-      applyStyle(list, {
-        transition: "transform " + speed + "ms " + options.easing,
-        transform: "translate(" + coord.x + "px," + coord.y + "px)"
-      });
-    }
-  };
-};
-/**
- * The component for fade transition.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for fade transition.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Fade = function Fade(Splide, Components) {
-  var Fade = {
-    /**
-     * Called when the component is mounted.
-     * Apply transition style to the first slide.
-     */
-    mount: function mount() {
-      apply(Splide.index);
-    },
-
-    /**
-     * Start transition.
-     *
-     * @param {number}    destIndex - Destination slide index that might be clone's.
-     * @param {number}    newIndex  - New index.
-     * @param {number}    prevIndex - Previous index.
-     * @param {Object}    coord     - Destination coordinates.
-     * @param {function}  done      - Callback function must be invoked when transition is completed.
-     */
-    start: function start(destIndex, newIndex, prevIndex, coord, done) {
-      var track = Components.Elements.track;
-      applyStyle(track, {
-        height: unit(track.clientHeight)
-      });
-      apply(newIndex);
-      setTimeout(function () {
-        done();
-        applyStyle(track, {
-          height: ''
-        });
-      });
+    on([EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+    if (updateOnMove) {
+      on(EVENT_MOVE, onMove.bind(this));
     }
-  };
-  /**
-   * Apply transition style to the slide specified by the given index.
-   *
-   * @param {number} index - A slide index.
-   */
-
-  function apply(index) {
-    var options = Splide.options;
-    applyStyle(Components.Elements.slides[index], {
-      transition: "opacity " + options.speed + "ms " + options.easing
-    });
-  }
-
-  return Fade;
-};
-/**
- * Provide a function for composing components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Compose components.
- *
- * @param {Splide}   Splide     - Splide instance.
- * @param {Object}   Components - Additional components.
- * @param {function} Transition - Change component for transition.
- *
- * @return {Object} - An object containing all components.
- */
-
-
-function compose(Splide, Components, Transition) {
-  var components = {};
-  each(Components, function (Component, name) {
-    components[name] = Component(Splide, components, name.toLowerCase());
-  });
-
-  if (!Transition) {
-    Transition = Splide.is(FADE) ? Fade : Slide$1;
-  }
-
-  components.Transition = Transition(Splide, components);
-  return components;
-}
-/**
- * Utility functions for outputting logs.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Prefix of an error massage.
- *
- * @type {string}
- */
-
-
-var MESSAGE_PREFIX = '[SPLIDE]';
-/**
- * Display an error message on the browser console.
- *
- * @param {string} message - An error message.
- */
-
-function error(message) {
-  console.error(MESSAGE_PREFIX + " " + message);
-}
-/**
- * Check existence of the given object and throw an error if it doesn't.
- *
- * @throws {Error}
- *
- * @param {*}      subject - A subject to be confirmed.
- * @param {string} message - An error message.
- */
-
-
-function exist(subject, message) {
-  if (!subject) {
-    throw new Error(message);
   }
-}
-/**
- * Export class names.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * A root class name.
- *
- * @type {string}
- */
-
-
-var ROOT = 'splide';
-/**
- * The definition table of all classes for elements.
- * They might be modified by options.
- *
- * @type {Object}
- */
-
-var ELEMENT_CLASSES = {
-  root: ROOT,
-  slider: ROOT + "__slider",
-  track: ROOT + "__track",
-  list: ROOT + "__list",
-  slide: ROOT + "__slide",
-  container: ROOT + "__slide__container",
-  arrows: ROOT + "__arrows",
-  arrow: ROOT + "__arrow",
-  prev: ROOT + "__arrow--prev",
-  next: ROOT + "__arrow--next",
-  pagination: ROOT + "__pagination",
-  page: ROOT + "__pagination__page",
-  clone: ROOT + "__slide--clone",
-  progress: ROOT + "__progress",
-  bar: ROOT + "__progress__bar",
-  autoplay: ROOT + "__autoplay",
-  play: ROOT + "__play",
-  pause: ROOT + "__pause",
-  spinner: ROOT + "__spinner",
-  sr: ROOT + "__sr"
-};
-/**
- * Definitions of status classes.
- *
- * @type {Object}
- */
-
-var STATUS_CLASSES = {
-  active: 'is-active',
-  visible: 'is-visible',
-  loading: 'is-loading'
-};
-/**
- * Export i18n texts as object.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Texts for i18n.
- *
- * @type {Object}
- */
-
-var I18N = {
-  prev: 'Previous slide',
-  next: 'Next slide',
-  first: 'Go to first slide',
-  last: 'Go to last slide',
-  slideX: 'Go to slide %s',
-  pageX: 'Go to page %s',
-  play: 'Start autoplay',
-  pause: 'Pause autoplay'
-};
-/**
- * Export default options.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-var DEFAULTS = {
-  /**
-   * Determine a slider type.
-   * - 'slide': Regular slider.
-   * - 'loop' : Carousel slider.
-   * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
-   *
-   * @type {string}
-   */
-  type: 'slide',
-
-  /**
-   * Whether to rewind a slider before the first slide or after the last one.
-   * In "loop" mode, this option is ignored.
-   *
-   * @type {boolean}
-   */
-  rewind: false,
-
-  /**
-   * Transition speed in milliseconds.
-   *
-   * @type {number}
-   */
-  speed: 400,
-
-  /**
-   * Transition speed on rewind in milliseconds.
-   *
-   * @type {number}
-   */
-  rewindSpeed: 0,
-
-  /**
-   * Whether to prevent any actions while a slider is transitioning.
-   * If false, navigation, drag and swipe work while the slider is running.
-   * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
-   *
-   * @type {boolean}
-   */
-  waitForTransition: true,
-
-  /**
-   * Define slider max width.
-   *
-   * @type {number}
-   */
-  width: 0,
-
-  /**
-   * Define slider height.
-   *
-   * @type {number}
-   */
-  height: 0,
-
-  /**
-   * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
-   * perPage number will be ignored when this option is falsy.
-   *
-   * @type {number|string}
-   */
-  fixedWidth: 0,
-
-  /**
-   * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
-   * heightRatio option will be ignored when this option is falsy.
-   *
-   * @type {number|string}
-   */
-  fixedHeight: 0,
-
-  /**
-   * Determine height of slides by ratio to a slider width.
-   * This will be ignored when the fixedHeight is provided.
-   *
-   * @type {number}
-   */
-  heightRatio: 0,
-
-  /**
-   * If true, slide width will be determined by the element width itself.
-   * - perPage/perMove should be 1.
-   *
-   * @type {boolean}
-   */
-  autoWidth: false,
-
-  /**
-   * If true, slide height will be determined by the element width itself.
-   * - perPage/perMove should be 1.
-   *
-   * @type {boolean}
-   */
-  autoHeight: false,
-
-  /**
-   * Determine how many slides should be displayed per page.
-   *
-   * @type {number}
-   */
-  perPage: 1,
-
-  /**
-   * Determine how many slides should be moved when a slider goes to next or perv.
-   *
-   * @type {number}
-   */
-  perMove: 0,
-
-  /**
-   * Determine manually how many clones should be generated on the left and right side.
-   * The total number of clones will be twice of this number.
-   *
-   * @type {number}
-   */
-  clones: 0,
-
-  /**
-   * Start index.
-   *
-   * @type {number}
-   */
-  start: 0,
-
-  /**
-   * Determine which slide should be focused if there are multiple slides in a page.
-   * A string "center" is acceptable for centering slides.
-   *
-   * @type {boolean|number|string}
-   */
-  focus: false,
-
-  /**
-   * Gap between slides. CSS format is allowed such as 1em.
-   *
-   * @type {number|string}
-   */
-  gap: 0,
-
-  /**
-   * Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
-   * Give a single value to set a same size for both sides or
-   * do an object for different sizes.
-   * Also, CSS format is allowed such as 1em.
-   *
-   * @example
-   * - 10: Number
-   * - '1em': CSS format.
-   * - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
-   * - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
-   *
-   * @type {number|string|Object}
-   */
-  padding: 0,
-
-  /**
-   * Whether to append arrows.
-   *
-   * @type {boolean}
-   */
-  arrows: true,
-
-  /**
-   * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
-   *
-   * @type {string}
-   */
-  arrowPath: '',
-
-  /**
-   * Whether to append pagination(indicator dots) or not.
-   *
-   * @type {boolean}
-   */
-  pagination: true,
-
-  /**
-   * Activate autoplay.
-   *
-   * @type {boolean}
-   */
-  autoplay: false,
-
-  /**
-   * Autoplay interval in milliseconds.
-   *
-   * @type {number}
-   */
-  interval: 5000,
-
-  /**
-   * Whether to stop autoplay when a slider is hovered.
-   *
-   * @type {boolean}
-   */
-  pauseOnHover: true,
-
-  /**
-   * Whether to stop autoplay when a slider elements are focused.
-   * True is recommended for accessibility.
-   *
-   * @type {boolean}
-   */
-  pauseOnFocus: true,
-
-  /**
-   * Whether to reset progress of the autoplay timer when resumed.
-   *
-   * @type {boolean}
-   */
-  resetProgress: true,
-
-  /**
-   * Loading images lazily.
-   * Image src must be provided by a data-splide-lazy attribute.
-   *
-   * - false: Do nothing.
-   * - 'nearby': Only images around an active slide will be loaded.
-   * - 'sequential': All images will be sequentially loaded.
-   *
-   * @type {boolean|string}
-   */
-  lazyLoad: false,
-
-  /**
-   * This option works only when a lazyLoad option is "nearby".
-   * Determine how many pages(not slides) around an active slide should be loaded beforehand.
-   *
-   * @type {number}
-   */
-  preloadPages: 1,
-
-  /**
-   * Easing for CSS transition. For example, linear, ease or cubic-bezier().
-   *
-   * @type {string}
-   */
-  easing: 'cubic-bezier(.42,.65,.27,.99)',
-
-  /**
-   * Whether to enable keyboard shortcuts
-   * - true or 'global': Listen to keydown event of the document.
-   * - 'focused': Listen to the keydown event of the slider root element. tabindex="0" will be added to the element.
-   * - false: Disable keyboard shortcuts.
-   *
-   * @type {boolean|string}
-   */
-  keyboard: 'global',
-
-  /**
-   * Whether to allow mouse drag and touch swipe.
-   *
-   * @type {boolean}
-   */
-  drag: true,
-
-  /**
-   * The angle threshold for drag.
-   * The slider starts moving only when the drag angle is less than this threshold.
-   *
-   * @type {number}
-   */
-  dragAngleThreshold: 30,
-
-  /**
-   * Distance threshold for determining if the action is "flick" or "swipe".
-   * When a drag distance is over this value, the action will be treated as "swipe", not "flick".
-   *
-   * @type {number}
-   */
-  swipeDistanceThreshold: 150,
-
-  /**
-   * Velocity threshold for determining if the action is "flick" or "swipe".
-   * Around 0.5 is recommended.
-   *
-   * @type {number}
-   */
-  flickVelocityThreshold: .6,
-
-  /**
-   * Determine power of flick. The larger number this is, the farther a slider runs by flick.
-   * Around 500 is recommended.
-   *
-   * @type {number}
-   */
-  flickPower: 600,
-
-  /**
-   * Limit a number of pages to move by flick.
-   *
-   * @type {number}
-   */
-  flickMaxPages: 1,
-
-  /**
-   * Slider direction.
-   * - 'ltr': Left to right.
-   * - 'rtl': Right to left.
-   * - 'ttb': Top to bottom.
-   *
-   * @type {string}
-   */
-  direction: 'ltr',
-
-  /**
-   * Set img src to background-image of its parent element.
-   * Images with various sizes can be displayed as same dimension without cropping work.
-   * fixedHeight or heightRatio is required.
-   *
-   * @type {boolean}
-   */
-  cover: false,
-
-  /**
-   * Whether to enable accessibility(aria and screen reader texts) or not.
-   *
-   * @type {boolean}
-   */
-  accessibility: true,
-
-  /**
-   * Whether to add tabindex="0" to visible slides or not.
-   *
-   * @type {boolean}
-   */
-  slideFocus: true,
-
-  /**
-   * Determine if a slider is navigation for another.
-   * Use "sync" API to synchronize two sliders.
-   *
-   * @type {boolean}
-   */
-  isNavigation: false,
-
-  /**
-   * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
-   *
-   * @type {boolean}
-   */
-  trimSpace: true,
-
-  /**
-   * The "is-active" class is added after transition as default.
-   * If true, it will be added before move.
-   *
-   * @type {boolean}
-   */
-  updateOnMove: false,
-
-  /**
-   * Throttle duration in milliseconds for the resize event.
-   *
-   * @type {number}
-   */
-  throttle: 100,
-
-  /**
-   * Whether to destroy a slider or not.
-   *
-   * @type {boolean}
-   */
-  destroy: false,
-
-  /**
-   * Options for specific breakpoints.
-   *
-   * @example
-   * {
-   *   1000: {
-   *     perPage: 3,
-   *     gap: 20
-   *   },
-   *   600: {
-   *     perPage: 1,
-   *     gap: 5,
-   *   }
-   * }
-   *
-   * @type {boolean|Object}
-   */
-  breakpoints: false,
-
-  /**
-   * Collection of class names.
-   *
-   * @see ./classes.js
-   *
-   * @type {Object}
-   */
-  classes: ELEMENT_CLASSES,
-
-  /**
-   * Collection of i18n texts.
-   *
-   * @see ./i18n.js
-   *
-   * @type {Object}
-   */
-  i18n: I18N
-};
-/**
- * Export state constants.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Splide has been just created.
- *
- * @type {number}
- */
-
-var CREATED = 1;
-/**
- * All components have been mounted and initialized.
- *
- * @type {number}
- */
-
-var MOUNTED = 2;
-/**
- * Splide is ready for transition.
- *
- * @type {number}
- */
-
-var IDLE = 3;
-/**
- * Splide is moving.
- *
- * @type {number}
- */
-
-var MOVING = 4;
-/**
- * Splide is moving.
- *
- * @type {number}
- */
-
-var DESTROYED = 5;
-var STATES = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  CREATED: CREATED,
-  MOUNTED: MOUNTED,
-  IDLE: IDLE,
-  MOVING: MOVING,
-  DESTROYED: DESTROYED
-});
-/**
- * The main class for applying Splide to an element.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The main class for applying Splide to an element,
- * providing some APIs to control the behavior.
- */
-
-var Splide$1 = /*#__PURE__*/function () {
-  /**
-   * Splide constructor.
-   *
-   * @throws {Error} When the given root element or selector is invalid.
-   *
-   * @param {Element|string}  root       - A selector for a root element or an element itself.
-   * @param {Object}          options    - Optional. Options to change default behaviour.
-   * @param {Object}          Components - Optional. Components.
-   */
-  function Splide$1(root, options, Components) {
-    if (options === void 0) {
-      options = {};
-    }
-
-    if (Components === void 0) {
-      Components = {};
-    }
-
-    this.root = root instanceof Element ? root : document.querySelector(root);
-    exist(this.root, 'An invalid element/selector was given.');
-    this.Components = null;
-    this.Event = Event();
-    this.State = State(CREATED);
-    this.STATES = STATES;
-    this._o = merge(DEFAULTS, options);
-    this._i = 0;
-    this._c = Components;
-    this._e = {}; // Extensions
-
-    this._t = null; // Transition
-  }
-  /**
-   * Compose and mount components.
-   *
-   * @param {Object}   Extensions - Optional. Additional components.
-   * @param {function} Transition - Optional. Set a custom transition component.
-   *
-   * @return {Splide|undefined} - This instance or undefined if an exception occurred.
-   */
-
-
-  var _proto = Splide$1.prototype;
-
-  _proto.mount = function mount(Extensions, Transition) {
-    var _this = this;
-
-    if (Extensions === void 0) {
-      Extensions = this._e;
-    }
-
-    if (Transition === void 0) {
-      Transition = this._t;
+  function init() {
+    if (!isClone) {
+      slide.id = `${root.id}-slide${pad(index + 1)}`;
     }
-
-    // Reset the state.
-    this.State.set(CREATED);
-    this._e = Extensions;
-    this._t = Transition;
-    this.Components = compose(this, merge(this._c, Extensions), Transition);
-
-    try {
-      each(this.Components, function (component, key) {
-        var required = component.required;
-
-        if (required === undefined || required) {
-          component.mount && component.mount();
-        } else {
-          delete _this.Components[key];
-        }
-      });
-    } catch (e) {
-      error(e.message);
-      return;
+    if (isNavigation) {
+      const idx = isClone ? slideIndex : index;
+      const label = format(options.i18n.slideX, idx + 1);
+      const controls = Splide2.splides.map((splide) => splide.root.id).join(" ");
+      setAttribute(slide, ARIA_LABEL, label);
+      setAttribute(slide, ARIA_CONTROLS, controls);
+      setAttribute(slide, ROLE, "menuitem");
     }
-
-    var State = this.State;
-    State.set(MOUNTED);
-    each(this.Components, function (component) {
-      component.mounted && component.mounted();
-    });
-    this.emit('mounted');
-    State.set(IDLE);
-    this.emit('ready');
-    applyStyle(this.root, {
-      visibility: 'visible'
-    });
-    this.on('move drag', function () {
-      return State.set(MOVING);
-    }).on('moved dragged', function () {
-      return State.set(IDLE);
-    });
-    return this;
   }
-  /**
-   * Set sync target.
-   *
-   * @param {Splide} splide - A Splide instance.
-   *
-   * @return {Splide} - This instance.
-   */
-  ;
-
-  _proto.sync = function sync(splide) {
-    this.sibling = splide;
-    return this;
+  function destroy() {
+    destroyed = true;
+    destroyEvents();
+    removeClass(slide, STATUS_CLASSES);
+    removeAttribute(slide, ALL_ATTRIBUTES);
   }
-  /**
-   * Register callback fired on the given event(s).
-   *
-   * @param {string}   events  - An event name. Use space to separate multiple events.
-   *                             Also, namespace is accepted by dot, such as 'resize.{namespace}'.
-   * @param {function} handler - A callback function.
-   * @param {Element}  elm     - Optional. Native event will be listened to when this arg is provided.
-   * @param {Object}   options - Optional. Options for addEventListener.
-   *
-   * @return {Splide} - This instance.
-   */
-  ;
-
-  _proto.on = function on(events, handler, elm, options) {
-    if (elm === void 0) {
-      elm = null;
-    }
-
-    if (options === void 0) {
-      options = {};
+  function onMove(next, prev, dest) {
+    if (!destroyed) {
+      update.call(this);
+      if (dest === index) {
+        updateActivity.call(this, true);
+      }
     }
-
-    this.Event.on(events, handler, elm, options);
-    return this;
   }
-  /**
-   * Unsubscribe the given event.
-   *
-   * @param {string}  events - A event name.
-   * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
-   *
-   * @return {Splide} - This instance.
-   */
-  ;
-
-  _proto.off = function off(events, elm) {
-    if (elm === void 0) {
-      elm = null;
+  function update() {
+    if (!destroyed) {
+      const { index: currIndex } = Splide2;
+      updateActivity.call(this, isActive());
+      updateVisibility.call(this, isVisible());
+      toggleClass(slide, CLASS_PREV, index === currIndex - 1);
+      toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
     }
-
-    this.Event.off(events, elm);
-    return this;
   }
-  /**
-   * Emit an event.
-   *
-   * @param {string} event - An event name.
-   * @param {*}      args  - Any number of arguments passed to handlers.
-   */
-  ;
-
-  _proto.emit = function emit(event) {
-    var _this$Event;
-
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
+  function updateActivity(active) {
+    if (active !== hasClass(slide, CLASS_ACTIVE)) {
+      toggleClass(slide, CLASS_ACTIVE, active);
+      if (isNavigation) {
+        setAttribute(slide, ARIA_CURRENT, active || null);
+      }
+      emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
     }
-
-    (_this$Event = this.Event).emit.apply(_this$Event, [event].concat(args));
-
-    return this;
   }
-  /**
-   * Go to the slide specified by the given control.
-   *
-   * @param {string|number} control - A control pattern.
-   * @param {boolean}       wait    - Optional. Whether to wait for transition.
-   */
-  ;
-
-  _proto.go = function go(control, wait) {
-    if (wait === void 0) {
-      wait = this.options.waitForTransition;
-    }
-
-    if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
-      this.Components.Controller.go(control, false);
+  function updateVisibility(visible) {
+    const ariaHidden = !visible && !isActive();
+    setAttribute(slide, ARIA_HIDDEN, ariaHidden || null);
+    setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null);
+    if (focusableNodes) {
+      focusableNodes.forEach((node) => {
+        setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null);
+      });
     }
-
-    return this;
-  }
-  /**
-   * Verify whether the slider type is the given one or not.
-   *
-   * @param {string} type - A slider type.
-   *
-   * @return {boolean} - True if the slider type is the provided type or false if not.
-   */
-  ;
-
-  _proto.is = function is(type) {
-    return type === this._o.type;
-  }
-  /**
-   * Insert a slide.
-   *
-   * @param {Element|string} slide - A slide element to be added.
-   * @param {number}         index - A slide will be added at the position.
-   */
-  ;
-
-  _proto.add = function add(slide, index) {
-    if (index === void 0) {
-      index = -1;
+    if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+      toggleClass(slide, CLASS_VISIBLE, visible);
+      emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
     }
-
-    this.Components.Elements.add(slide, index, this.refresh.bind(this));
-    return this;
-  }
-  /**
-   * Remove the slide designated by the index.
-   *
-   * @param {number} index - A slide index.
-   */
-  ;
-
-  _proto.remove = function remove(index) {
-    this.Components.Elements.remove(index);
-    this.refresh();
-    return this;
   }
-  /**
-   * Destroy all Slide objects and clones and recreate them again.
-   */
-  ;
-
-  _proto.refresh = function refresh() {
-    this.emit('refresh:before').emit('refresh').emit('resize');
-    return this;
+  function rule(prop, value, useContainer) {
+    const selector = `#${slide.id}${container && useContainer ? ` > .${CLASS_CONTAINER}` : ""}`;
+    Components.Style.rule(selector, prop, value);
   }
-  /**
-   * Destroy the Splide.
-   * "Completely" boolean is mainly for breakpoints.
-   *
-   * @param {boolean} completely - Destroy completely.
-   */
-  ;
-
-  _proto.destroy = function destroy(completely) {
-    var _this2 = this;
-
-    if (completely === void 0) {
-      completely = true;
-    }
-
-    // Postpone destroy because it should be done after mount.
-    if (this.State.is(CREATED)) {
-      this.on('ready', function () {
-        return _this2.destroy(completely);
-      });
-      return;
-    }
-
-    values(this.Components).reverse().forEach(function (component) {
-      component.destroy && component.destroy(completely);
-    });
-    this.emit('destroy', completely); // Destroy all event handlers, including ones for native events.
-
-    this.Event.destroy();
-    this.State.set(DESTROYED);
-    return this;
+  function isActive() {
+    return Splide2.index === index;
   }
-  /**
-   * Return the current slide index.
-   *
-   * @return {number} - The current slide index.
-   // */
-  ;
-
-  _createClass(Splide$1, [{
-    key: "index",
-    get: function get() {
-      return this._i;
-    }
-    /**
-     * Set the current slide index.
-     *
-     * @param {number|string} index - A new index.
-     */
-    ,
-    set: function set(index) {
-      this._i = parseInt(index);
-    }
-    /**
-     * Return length of slides.
-     * This is an alias of Elements.length.
-     *
-     * @return {number} - A number of slides.
-     */
-
-  }, {
-    key: "length",
-    get: function get() {
-      return this.Components.Elements.length;
-    }
-    /**
-     * Return options.
-     *
-     * @return {Object} - Options object.
-     */
-
-  }, {
-    key: "options",
-    get: function get() {
-      return this._o;
-    }
-    /**
-     * Set options with merging the given object to the current one.
-     *
-     * @param {Object} options - New options.
-     */
-    ,
-    set: function set(options) {
-      var created = this.State.is(CREATED);
-
-      if (!created) {
-        this.emit('update');
-      }
-
-      this._o = merge(this._o, options);
-
-      if (!created) {
-        this.emit('updated', this._o);
-      }
-    }
-    /**
-     * Return the class list.
-     * This is an alias of Splide.options.classList.
-     *
-     * @return {Object} - An object containing all class list.
-     */
-
-  }, {
-    key: "classes",
-    get: function get() {
-      return this._o.classes;
-    }
-    /**
-     * Return the i18n strings.
-     * This is an alias of Splide.options.i18n.
-     *
-     * @return {Object} - An object containing all i18n strings.
-     */
-
-  }, {
-    key: "i18n",
-    get: function get() {
-      return this._o.i18n;
+  function isVisible() {
+    if (Splide2.is(FADE)) {
+      return isActive();
     }
-  }]);
-
-  return Splide$1;
-}();
-/**
- * The component for initializing options.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for initializing options.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-
-var Options = function Options(Splide) {
-  /**
-   * Retrieve options from the data attribute.
-   * Note that IE10 doesn't support dataset property.
-   *
-   * @type {string}
-   */
-  var options = getAttribute(Splide.root, 'data-splide');
-
-  if (options) {
-    try {
-      Splide.options = JSON.parse(options);
-    } catch (e) {
-      error(e.message);
-    }
-  }
-
-  return {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      if (Splide.State.is(CREATED)) {
-        Splide.index = Splide.options.start;
-      }
-    }
-  };
-};
-/**
- * Export layout modes.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Enumerate slides from right to left.
- *
- * @type {string}
- */
-
-
-var RTL = 'rtl';
-/**
- * Enumerate slides in a col.
- *
- * @type {string}
- */
-
-var TTB = 'ttb';
-/**
- * The sub component for handling each slide.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Events for restoring original styles.
- *
- * @type {string}
- */
-
-var STYLE_RESTORE_EVENTS = 'update.slide';
-/**
- * The sub component for handling each slide.
- *
- * @param {Splide}  Splide    - A Splide instance.
- * @param {number}  index     - An unique slide index.
- * @param {number}  realIndex - Clones should pass a real slide index.
- * @param {Element} slide     - A slide element.
- *
- * @return {Object} - The sub component object.
- */
-
-var Slide = function Slide(Splide, index, realIndex, slide) {
-  /**
-   * Whether to update "is-active" class before or after transition.
-   *
-   * @type {boolean}
-   */
-  var updateOnMove = Splide.options.updateOnMove;
-  /**
-   * Events when the slide status is updated.
-   * Append a namespace to remove listeners later.
-   *
-   * @type {string}
-   */
-
-  var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resized.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
-  /**
-   * Slide sub component object.
-   *
-   * @type {Object}
-   */
-
-  var Slide = {
-    /**
-     * Slide element.
-     *
-     * @type {Element}
-     */
-    slide: slide,
-
-    /**
-     * Slide index.
-     *
-     * @type {number}
-     */
-    index: index,
-
-    /**
-     * Real index for clones.
-     *
-     * @type {number}
-     */
-    realIndex: realIndex,
-
-    /**
-     * Container element if available.
-     *
-     * @type {Element|undefined}
-     */
-    container: child(slide, Splide.classes.container),
-
-    /**
-     * Whether this is a cloned slide or not.
-     *
-     * @type {boolean}
-     */
-    isClone: realIndex > -1,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this3 = this;
-
-      if (!this.isClone) {
-        slide.id = Splide.root.id + "-slide" + pad(index + 1);
-      }
-
-      Splide.on(STATUS_UPDATE_EVENTS, function () {
-        return _this3.update();
-      }).on(STYLE_RESTORE_EVENTS, restoreStyles).on('click', function () {
-        return Splide.emit('click', _this3);
-      }, slide);
-      /*
-       * Add "is-active" class to a clone element temporarily
-       * and it will be removed on "moved" event.
-       */
-
-      if (updateOnMove) {
-        Splide.on('move.slide', function (newIndex) {
-          if (newIndex === realIndex) {
-            _update(true, false);
-          }
-        });
-      } // Make sure the slide is shown.
-
-
-      applyStyle(slide, {
-        display: ''
-      }); // Hold the original styles.
-
-      this.styles = getAttribute(slide, 'style') || '';
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      Splide.off(STATUS_UPDATE_EVENTS).off(STYLE_RESTORE_EVENTS).off('click', slide);
-      removeClass(slide, values(STATUS_CLASSES));
-      restoreStyles();
-      removeAttribute(this.container, 'style');
-    },
-
-    /**
-     * Update active and visible status.
-     */
-    update: function update() {
-      _update(this.isActive(), false);
-
-      _update(this.isVisible(), true);
-    },
-
-    /**
-     * Check whether this slide is active or not.
-     *
-     * @return {boolean} - True if the slide is active or false if not.
-     */
-    isActive: function isActive() {
-      return Splide.index === index;
-    },
-
-    /**
-     * Check whether this slide is visible in the viewport or not.
-     *
-     * @return {boolean} - True if the slide is visible or false if not.
-     */
-    isVisible: function isVisible() {
-      var active = this.isActive();
-
-      if (Splide.is(FADE) || active) {
-        return active;
-      }
-
-      var ceil = Math.ceil;
-      var trackRect = getRect(Splide.Components.Elements.track);
-      var slideRect = getRect(slide);
-
-      if (Splide.options.direction === TTB) {
-        return trackRect.top <= slideRect.top && slideRect.bottom <= ceil(trackRect.bottom);
-      }
-
-      return trackRect.left <= slideRect.left && slideRect.right <= ceil(trackRect.right);
-    },
-
-    /**
-     * Calculate how far this slide is from another slide and
-     * return true if the distance is within the given number.
-     *
-     * @param {number} from   - Index of a target slide.
-     * @param {number} within - True if the slide is within this number.
-     *
-     * @return {boolean} - True if the slide is within the number or false otherwise.
-     */
-    isWithin: function isWithin(from, within) {
-      var diff = Math.abs(from - index);
-
-      if (!Splide.is(SLIDE) && !this.isClone) {
-        diff = Math.min(diff, Splide.length - diff);
-      }
-
-      return diff < within;
-    }
-  };
-  /**
-   * Update classes for activity or visibility.
-   *
-   * @param {boolean} active        - Is active/visible or not.
-   * @param {boolean} forVisibility - Toggle classes for activity or visibility.
-   */
-
-  function _update(active, forVisibility) {
-    var type = forVisibility ? 'visible' : 'active';
-    var className = STATUS_CLASSES[type];
-
-    if (active) {
-      addClass(slide, className);
-      Splide.emit("" + type, Slide);
-    } else {
-      if (hasClass(slide, className)) {
-        removeClass(slide, className);
-        Splide.emit("" + (forVisibility ? 'hidden' : 'inactive'), Slide);
-      }
-    }
-  }
-  /**
-   * Restore the original styles.
-   */
-
-
-  function restoreStyles() {
-    setAttribute(slide, 'style', Slide.styles);
-  }
-
-  return Slide;
-};
-/**
- * The component for main elements.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The property name for UID stored in a window object.
- *
- * @type {string}
- */
-
-
-var UID_NAME = 'uid';
-/**
- * The component for main elements.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Elements = function Elements(Splide, Components) {
-  /**
-   * Hold the root element.
-   *
-   * @type {Element}
-   */
-  var root = Splide.root;
-  /**
-   * Hold the class list.
-   *
-   * @type {Object}
-   */
-
-  var classes = Splide.classes;
-  /**
-   * Store Slide objects.
-   *
-   * @type {Array}
-   */
-
-  var Slides = [];
-  /*
-   * Assign unique ID to the root element if it doesn't have the one.
-   * Note that IE doesn't support padStart() to fill the uid by 0.
-   */
-
-  if (!root.id) {
-    window.splide = window.splide || {};
-    var uid = window.splide[UID_NAME] || 0;
-    window.splide[UID_NAME] = ++uid;
-    root.id = "splide" + pad(uid);
-  }
-  /**
-   * Elements component object.
-   *
-   * @type {Object}
-   */
-
-
-  var Elements = {
-    /**
-     * Called when the component is mounted.
-     * Collect main elements and store them as member properties.
-     */
-    mount: function mount() {
-      var _this4 = this;
-
-      this.init();
-      Splide.on('refresh', function () {
-        _this4.destroy();
-
-        _this4.init();
-      }).on('updated', function () {
-        removeClass(root, getClasses());
-        addClass(root, getClasses());
-      });
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      Slides.forEach(function (Slide) {
-        Slide.destroy();
-      });
-      Slides = [];
-      removeClass(root, getClasses());
-    },
-
-    /**
-     * Initialization.
-     */
-    init: function init() {
-      var _this5 = this;
-
-      collect();
-      addClass(root, getClasses());
-      this.slides.forEach(function (slide, index) {
-        _this5.register(slide, index, -1);
-      });
-    },
-
-    /**
-     * Register a slide to create a Slide object and handle its behavior.
-     *
-     * @param {Element} slide     - A slide element.
-     * @param {number}  index     - A unique index. This can be negative.
-     * @param {number}  realIndex - A real index for clones. Set -1 for real slides.
-     */
-    register: function register(slide, index, realIndex) {
-      var SlideObject = Slide(Splide, index, realIndex, slide);
-      SlideObject.mount();
-      Slides.push(SlideObject);
-    },
-
-    /**
-     * Return the Slide object designated by the index.
-     * Note that "find" is not supported by IE.
-     *
-     * @return {Object|undefined} - A Slide object if available. Undefined if not.
-     */
-    getSlide: function getSlide(index) {
-      return Slides.filter(function (Slide) {
-        return Slide.index === index;
-      })[0];
-    },
-
-    /**
-     * Return all Slide objects.
-     *
-     * @param {boolean} includeClones - Whether to include cloned slides or not.
-     *
-     * @return {Object[]} - Slide objects.
-     */
-    getSlides: function getSlides(includeClones) {
-      return includeClones ? Slides : Slides.filter(function (Slide) {
-        return !Slide.isClone;
-      });
-    },
-
-    /**
-     * Return Slide objects belonging to the given page.
-     *
-     * @param {number} page - A page number.
-     *
-     * @return {Object[]} - An array containing Slide objects.
-     */
-    getSlidesByPage: function getSlidesByPage(page) {
-      var idx = Components.Controller.toIndex(page);
-      var options = Splide.options;
-      var max = options.focus !== false ? 1 : options.perPage;
-      return Slides.filter(function (_ref2) {
-        var index = _ref2.index;
-        return idx <= index && index < idx + max;
-      });
-    },
-
-    /**
-     * Insert a slide to a slider.
-     * Need to refresh Splide after adding a slide.
-     *
-     * @param {Node|string} slide    - A slide element to be added.
-     * @param {number}      index    - A slide will be added at the position.
-     * @param {Function}    callback - Called right after the slide is added to the DOM tree.
-     */
-    add: function add(slide, index, callback) {
-      if (typeof slide === 'string') {
-        slide = domify(slide);
-      }
-
-      if (slide instanceof Element) {
-        var ref = this.slides[index]; // This will be removed in mount() of a Slide component.
-
-        applyStyle(slide, {
-          display: 'none'
-        });
-
-        if (ref) {
-          before(slide, ref);
-          this.slides.splice(index, 0, slide);
-        } else {
-          append(this.list, slide);
-          this.slides.push(slide);
-        }
-
-        loaded(slide, function () {
-          callback && callback(slide);
-        });
-      }
-    },
-
-    /**
-     * Remove a slide from a slider.
-     * Need to refresh Splide after removing a slide.
-     *
-     * @param index - Slide index.
-     */
-    remove: function remove(index) {
-      _remove(this.slides.splice(index, 1)[0]);
-    },
-
-    /**
-     * Trigger the provided callback for each Slide object.
-     *
-     * @param {Function} callback - A callback function. The first argument will be the Slide object.
-     */
-    each: function each(callback) {
-      Slides.forEach(callback);
-    },
-
-    /**
-     * Return slides length without clones.
-     *
-     * @return {number} - Slide length.
-     */
-    get length() {
-      return this.slides.length;
-    },
-
-    /**
-     * Return "SlideObjects" length including clones.
-     *
-     * @return {number} - Slide length including clones.
-     */
-    get total() {
-      return Slides.length;
-    }
-
-  };
-  /**
-   * Collect elements.
-   */
-
-  function collect() {
-    Elements.slider = child(root, classes.slider);
-    Elements.track = find(root, "." + classes.track);
-    Elements.list = child(Elements.track, classes.list);
-    exist(Elements.track && Elements.list, 'Track or list was not found.');
-    Elements.slides = children(Elements.list, classes.slide);
-    var arrows = findParts(classes.arrows);
-    Elements.arrows = {
-      prev: find(arrows, "." + classes.prev),
-      next: find(arrows, "." + classes.next)
-    };
-    var autoplay = findParts(classes.autoplay);
-    Elements.bar = find(findParts(classes.progress), "." + classes.bar);
-    Elements.play = find(autoplay, "." + classes.play);
-    Elements.pause = find(autoplay, "." + classes.pause);
-    Elements.track.id = Elements.track.id || root.id + "-track";
-    Elements.list.id = Elements.list.id || root.id + "-list";
-  }
-  /**
-   * Return class names for the root element.
-   */
-
-
-  function getClasses() {
-    var rootClass = classes.root;
-    var options = Splide.options;
-    return [rootClass + "--" + options.type, rootClass + "--" + options.direction, options.drag ? rootClass + "--draggable" : '', options.isNavigation ? rootClass + "--nav" : '', STATUS_CLASSES.active];
-  }
-  /**
-   * Find parts only from children of the root or track.
-   *
-   * @return {Element} - A found element or undefined.
-   */
-
-
-  function findParts(className) {
-    return child(root, className) || child(Elements.slider, className);
-  }
-
-  return Elements;
-};
-/**
- * The component for controlling the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var floor = Math.floor;
-/**
- * The component for controlling the track.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Controller = function Controller(Splide, Components) {
-  /**
-   * Store current options.
-   *
-   * @type {Object}
-   */
-  var options;
-  /**
-   * True if the slide is LOOP mode.
-   *
-   * @type {boolean}
-   */
-
-  var isLoop;
-  /**
-   * Controller component object.
-   *
-   * @type {Object}
-   */
-
-  var Controller = {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      options = Splide.options;
-      isLoop = Splide.is(LOOP);
-      bind();
-    },
-
-    /**
-     * Make track run by the given control.
-     * - "+{i}" : Increment the slide index by i.
-     * - "-{i}" : Decrement the slide index by i.
-     * - "{i}"  : Go to the slide whose index is i.
-     * - ">"    : Go to next page.
-     * - "<"    : Go to prev page.
-     * - ">{i}" : Go to page i.
-     *
-     * @param {string|number} control  - A control pattern.
-     * @param {boolean}       silently - Go to the destination without event emission.
-     */
-    go: function go(control, silently) {
-      var destIndex = this.trim(this.parse(control));
-      Components.Track.go(destIndex, this.rewind(destIndex), silently);
-    },
-
-    /**
-     * Parse the given control and return the destination index for the track.
-     *
-     * @param {string} control - A control target pattern.
-     *
-     * @return {number} - A parsed target.
-     */
-    parse: function parse(control) {
-      var index = Splide.index;
-      var matches = String(control).match(/([+\-<>]+)(\d+)?/);
-      var indicator = matches ? matches[1] : '';
-      var number = matches ? parseInt(matches[2]) : 0;
-
-      switch (indicator) {
-        case '+':
-          index += number || 1;
-          break;
-
-        case '-':
-          index -= number || 1;
-          break;
-
-        case '>':
-        case '<':
-          index = parsePage(number, index, indicator === '<');
-          break;
-
-        default:
-          index = parseInt(control);
-      }
-
-      return index;
-    },
-
-    /**
-     * Compute index from the given page number.
-     *
-     * @param {number} page - Page number.
-     *
-     * @return {number} - A computed page number.
-     */
-    toIndex: function toIndex(page) {
-      if (hasFocus()) {
-        return page;
-      }
-
-      var length = Splide.length;
-      var perPage = options.perPage;
-      var index = page * perPage;
-      index = index - (this.pageLength * perPage - length) * floor(index / length); // Adjustment for the last page.
-
-      if (length - perPage <= index && index < length) {
-        index = length - perPage;
-      }
-
-      return index;
-    },
-
-    /**
-     * Compute page number from the given slide index.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - A computed page number.
-     */
-    toPage: function toPage(index) {
-      if (hasFocus()) {
-        return index;
-      }
-
-      var length = Splide.length;
-      var perPage = options.perPage; // Make the last "perPage" number of slides belong to the last page.
-
-      if (length - perPage <= index && index < length) {
-        return floor((length - 1) / perPage);
-      }
-
-      return floor(index / perPage);
-    },
-
-    /**
-     * Trim the given index according to the current mode.
-     * Index being returned could be less than 0 or greater than the length in Loop mode.
-     *
-     * @param {number} index - An index being trimmed.
-     *
-     * @return {number} - A trimmed index.
-     */
-    trim: function trim(index) {
-      if (!isLoop) {
-        index = options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
-      }
-
-      return index;
-    },
-
-    /**
-     * Rewind the given index if it's out of range.
-     *
-     * @param {number} index - An index.
-     *
-     * @return {number} - A rewound index.
-     */
-    rewind: function rewind(index) {
-      var edge = this.edgeIndex;
-
-      if (isLoop) {
-        while (index > edge) {
-          index -= edge + 1;
-        }
-
-        while (index < 0) {
-          index += edge + 1;
-        }
-      } else {
-        if (index > edge) {
-          index = 0;
-        } else if (index < 0) {
-          index = edge;
-        }
-      }
-
-      return index;
-    },
-
-    /**
-     * Check if the direction is "rtl" or not.
-     *
-     * @return {boolean} - True if "rtl" or false if not.
-     */
-    isRtl: function isRtl() {
-      return options.direction === RTL;
-    },
-
-    /**
-     * Return the page length.
-     *
-     * @return {number} - Max page number.
-     */
-    get pageLength() {
-      var length = Splide.length;
-      return hasFocus() ? length : Math.ceil(length / options.perPage);
-    },
-
-    /**
-     * Return the edge index.
-     *
-     * @return {number} - Edge index.
-     */
-    get edgeIndex() {
-      var length = Splide.length;
-
-      if (!length) {
-        return 0;
-      }
-
-      if (hasFocus() || options.isNavigation || isLoop) {
-        return length - 1;
-      }
-
-      return length - options.perPage;
-    },
-
-    /**
-     * Return the index of the previous slide.
-     *
-     * @return {number} - The index of the previous slide if available. -1 otherwise.
-     */
-    get prevIndex() {
-      var prev = Splide.index - 1;
-
-      if (isLoop || options.rewind) {
-        prev = this.rewind(prev);
-      }
-
-      return prev > -1 ? prev : -1;
-    },
-
-    /**
-     * Return the index of the next slide.
-     *
-     * @return {number} - The index of the next slide if available. -1 otherwise.
-     */
-    get nextIndex() {
-      var next = Splide.index + 1;
-
-      if (isLoop || options.rewind) {
-        next = this.rewind(next);
-      }
-
-      return Splide.index < next && next <= this.edgeIndex || next === 0 ? next : -1;
-    }
-
-  };
-  /**
-   * Listen to some events.
-   */
-
-  function bind() {
-    Splide.on('move', function (newIndex) {
-      Splide.index = newIndex;
-    }).on('updated refresh', function (newOptions) {
-      options = newOptions || options;
-      Splide.index = between(Splide.index, 0, Controller.edgeIndex);
-    });
-  }
-  /**
-   * Verify if the focus option is available or not.
-   *
-   * @return {boolean} - True if a slider has the focus option.
-   */
-
-
-  function hasFocus() {
-    return options.focus !== false;
-  }
-  /**
-   * Return the next or previous page index computed by the page number and current index.
-   *
-   * @param {number}  number - Specify the page number.
-   * @param {number}  index  - Current index.
-   * @param {boolean} prev   - Prev or next.
-   *
-   * @return {number} - Slide index.
-   */
-
-
-  function parsePage(number, index, prev) {
-    if (number > -1) {
-      return Controller.toIndex(number);
-    }
-
-    var perMove = options.perMove;
-    var sign = prev ? -1 : 1;
-
-    if (perMove) {
-      return index + perMove * sign;
-    }
-
-    return Controller.toIndex(Controller.toPage(index) + sign);
-  }
-
-  return Controller;
-};
-/**
- * The component for moving list in the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var abs$1 = Math.abs;
-/**
- * The component for moving list in the track.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Track = function Track(Splide, Components) {
-  /**
-   * Hold the Layout component.
-   *
-   * @type {Object}
-   */
-  var Layout;
-  /**
-   * Hold the Layout component.
-   *
-   * @type {Object}
-   */
-
-  var Elements;
-  /**
-   * Store the list element.
-   *
-   * @type {Element}
-   */
-
-  var list;
-  /**
-   * Whether the current direction is vertical or not.
-   *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Whether the slider type is FADE or not.
-   *
-   * @type {boolean}
-   */
-
-  var isFade = Splide.is(FADE);
-  /**
-   * Whether the slider direction is RTL or not.
-   *
-   * @type {boolean}
-   */
-
-  var isRTL = Splide.options.direction === RTL;
-  /**
-   * This will be true while transitioning from the last index to the first one.
-   *
-   * @type {boolean}
-   */
-
-  var isLoopPending = false;
-  /**
-   * Sign for the direction. Only RTL mode uses the positive sign.
-   *
-   * @type {number}
-   */
-
-  var sign = isRTL ? 1 : -1;
-  /**
-   * Track component object.
-   *
-   * @type {Object}
-   */
-
-  var Track = {
-    /**
-     * Make public the sign defined locally.
-     *
-     * @type {number}
-     */
-    sign: sign,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Elements = Components.Elements;
-      Layout = Components.Layout;
-      list = Elements.list;
-    },
-
-    /**
-     * Called after the component is mounted.
-     * The resize event must be registered after the Layout's one is done.
-     */
-    mounted: function mounted() {
-      var _this6 = this;
-
-      if (!isFade) {
-        this.jump(0);
-        Splide.on('mounted resize updated', function () {
-          _this6.jump(Splide.index);
-        });
-      }
-    },
-
-    /**
-     * Go to the given destination index.
-     * After arriving there, the track is jump to the new index without animation, mainly for loop mode.
-     *
-     * @param {number}  destIndex - A destination index.
-     *                              This can be negative or greater than slides length for reaching clones.
-     * @param {number}  newIndex  - An actual new index. They are always same in Slide and Rewind mode.
-     * @param {boolean} silently  - If true, suppress emitting events.
-     */
-    go: function go(destIndex, newIndex, silently) {
-      var newPosition = getTrimmedPosition(destIndex);
-      var prevIndex = Splide.index; // Prevent any actions while transitioning from the last index to the first one for jump.
-
-      if (Splide.State.is(MOVING) && isLoopPending) {
-        return;
-      }
-
-      isLoopPending = destIndex !== newIndex;
-
-      if (!silently) {
-        Splide.emit('move', newIndex, prevIndex, destIndex);
-      }
-
-      if (Math.abs(newPosition - this.position) >= 1 || isFade) {
-        Components.Transition.start(destIndex, newIndex, prevIndex, this.toCoord(newPosition), function () {
-          onTransitionEnd(destIndex, newIndex, prevIndex, silently);
-        });
-      } else {
-        if (destIndex !== prevIndex && Splide.options.trimSpace === 'move') {
-          Components.Controller.go(destIndex + destIndex - prevIndex, silently);
-        } else {
-          onTransitionEnd(destIndex, newIndex, prevIndex, silently);
-        }
-      }
-    },
-
-    /**
-     * Move the track to the specified index.
-     *
-     * @param {number} index - A destination index where the track jumps.
-     */
-    jump: function jump(index) {
-      this.translate(getTrimmedPosition(index));
-    },
-
-    /**
-     * Set the list position by CSS translate property.
-     *
-     * @param {number} position - A new position value.
-     */
-    translate: function translate(position) {
-      applyStyle(list, {
-        transform: "translate" + (isVertical ? 'Y' : 'X') + "(" + position + "px)"
-      });
-    },
-
-    /**
-     * Cancel the transition and set the list position.
-     * Also, loop the slider if necessary.
-     */
-    cancel: function cancel() {
-      if (Splide.is(LOOP)) {
-        this.shift();
-      } else {
-        // Ensure the current position.
-        this.translate(this.position);
-      }
-
-      applyStyle(list, {
-        transition: ''
-      });
-    },
-
-    /**
-     * Shift the slider if it exceeds borders on the edge.
-     */
-    shift: function shift() {
-      var position = abs$1(this.position);
-      var left = abs$1(this.toPosition(0));
-      var right = abs$1(this.toPosition(Splide.length));
-      var innerSize = right - left;
-
-      if (position < left) {
-        position += innerSize;
-      } else if (position > right) {
-        position -= innerSize;
-      }
-
-      this.translate(sign * position);
-    },
-
-    /**
-     * Trim redundant spaces on the left or right edge if necessary.
-     *
-     * @param {number} position - Position value to be trimmed.
-     *
-     * @return {number} - Trimmed position.
-     */
-    trim: function trim(position) {
-      if (!Splide.options.trimSpace || Splide.is(LOOP)) {
-        return position;
-      }
-
-      var edge = sign * (Layout.totalSize() - Layout.size - Layout.gap);
-      return between(position, edge, 0);
-    },
-
-    /**
-     * Calculate the closest slide index from the given position.
-     *
-     * @param {number} position - A position converted to an slide index.
-     *
-     * @return {number} - The closest slide index.
-     */
-    toIndex: function toIndex(position) {
-      var _this7 = this;
-
-      var index = 0;
-      var minDistance = Infinity;
-      Elements.getSlides(true).forEach(function (Slide) {
-        var slideIndex = Slide.index;
-        var distance = abs$1(_this7.toPosition(slideIndex) - position);
-
-        if (distance < minDistance) {
-          minDistance = distance;
-          index = slideIndex;
-        }
-      });
-      return index;
-    },
-
-    /**
-     * Return coordinates object by the given position.
-     *
-     * @param {number} position - A position value.
-     *
-     * @return {Object} - A coordinates object.
-     */
-    toCoord: function toCoord(position) {
-      return {
-        x: isVertical ? 0 : position,
-        y: isVertical ? position : 0
-      };
-    },
-
-    /**
-     * Calculate the track position by a slide index.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {Object} - Calculated position.
-     */
-    toPosition: function toPosition(index) {
-      var position = Layout.totalSize(index) - Layout.slideSize(index) - Layout.gap;
-      return sign * (position + this.offset(index));
-    },
-
-    /**
-     * Return the current offset value, considering direction.
-     *
-     * @return {number} - Offset amount.
-     */
-    offset: function offset(index) {
-      var focus = Splide.options.focus;
-      var slideSize = Layout.slideSize(index);
-
-      if (focus === 'center') {
-        return -(Layout.size - slideSize) / 2;
-      }
-
-      return -(parseInt(focus) || 0) * (slideSize + Layout.gap);
-    },
-
-    /**
-     * Return the current position.
-     * This returns the correct position even while transitioning by CSS.
-     *
-     * @return {number} - Current position.
-     */
-    get position() {
-      var prop = isVertical ? 'top' : isRTL ? 'right' : 'left';
-      return getRect(list)[prop] - (getRect(Elements.track)[prop] - Layout.padding[prop] * sign);
-    }
-
-  };
-  /**
-   * Called whenever slides arrive at a destination.
-   *
-   * @param {number}  destIndex - A destination index.
-   * @param {number}  newIndex  - A new index.
-   * @param {number}  prevIndex - A previous index.
-   * @param {boolean} silently  - If true, suppress emitting events.
-   */
-
-  function onTransitionEnd(destIndex, newIndex, prevIndex, silently) {
-    applyStyle(list, {
-      transition: ''
-    });
-    isLoopPending = false;
-
-    if (!isFade) {
-      Track.jump(newIndex);
-    }
-
-    if (!silently) {
-      Splide.emit('moved', newIndex, prevIndex, destIndex);
-    }
-  }
-  /**
-   * Convert index to the trimmed position.
-   *
-   * @return {number} - Trimmed position.
-   */
-
-
-  function getTrimmedPosition(index) {
-    return Track.trim(Track.toPosition(index));
-  }
-
-  return Track;
-};
-/**
- * The component for cloning some slides for "loop" mode of the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for cloning some slides for "loop" mode of the track.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Clones = function Clones(Splide, Components) {
-  /**
-   * Store information of all clones.
-   *
-   * @type {Array}
-   */
-  var clones = [];
-  /**
-   * Store the current clone count on one side.
-   *
-   * @type {number}
-   */
-
-  var cloneCount = 0;
-  /**
-   * Keep Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Clones component object.
-   *
-   * @type {Object}
-   */
-
-  var Clones = {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this8 = this;
-
-      if (Splide.is(LOOP)) {
-        init();
-        Splide.on('refresh:before', function () {
-          _this8.destroy();
-        }).on('refresh', init).on('resize', function () {
-          if (cloneCount !== getCloneCount()) {
-            // Destroy before refresh not to collect clones by the Elements component.
-            _this8.destroy();
-
-            Splide.refresh();
-          }
-        });
-      }
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      _remove(clones);
-
-      clones = [];
-    },
-
-    /**
-     * Return all clones.
-     *
-     * @return {Element[]} - Cloned elements.
-     */
-    get clones() {
-      return clones;
-    },
-
-    /**
-     * Return clone length.
-     *
-     * @return {number} - A length of clones.
-     */
-    get length() {
-      return clones.length;
-    }
-
-  };
-  /**
-   * Initialization.
-   */
-
-  function init() {
-    Clones.destroy();
-    cloneCount = getCloneCount();
-    generateClones(cloneCount);
-  }
-  /**
-   * Generate and append/prepend clones.
-   *
-   * @param {number} count - The half number of clones.
-   */
-
-
-  function generateClones(count) {
-    var length = Elements.length,
-        register = Elements.register;
-
-    if (length) {
-      var slides = Elements.slides;
-
-      while (slides.length < count) {
-        slides = slides.concat(slides);
-      } // Clones after the last element.
-
-
-      slides.slice(0, count).forEach(function (elm, index) {
-        var clone = cloneDeeply(elm);
-        append(Elements.list, clone);
-        clones.push(clone);
-        register(clone, index + length, index % length);
-      }); // Clones before the first element.
-
-      slides.slice(-count).forEach(function (elm, index) {
-        var clone = cloneDeeply(elm);
-        before(clone, slides[0]);
-        clones.push(clone);
-        register(clone, index - count, (length + index - count % length) % length);
-      });
-    }
-  }
-  /**
-   * Return half count of clones to be generated.
-   * Clone count is determined by:
-   * - "clones" value in the options.
-   * - Number of slides that can be placed in a view in "fixed" mode.
-   * - Max pages a flick action can move.
-   * - Whether the slide length is enough for perPage.
-   *
-   * @return {number} - Count for clones.
-   */
-
-
-  function getCloneCount() {
-    var options = Splide.options;
-
-    if (options.clones) {
-      return options.clones;
-    } // Use the slide length in autoWidth mode because the number cannot be calculated.
-
-
-    var baseCount = options.autoWidth || options.autoHeight ? Elements.length : options.perPage;
-    var dimension = options.direction === TTB ? 'Height' : 'Width';
-    var fixedSize = toPixel(Splide.root, options["fixed" + dimension]);
-
-    if (fixedSize) {
-      // Roughly calculate the count. This needs not to be strict.
-      baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
-    }
-
-    return baseCount * (options.drag ? options.flickMaxPages + 1 : 1);
-  }
-  /**
-   * Clone deeply the given element.
-   *
-   * @param {Element} elm - An element being duplicated.
-   *
-   * @return {Node} - A cloned node(element).
-   */
-
-
-  function cloneDeeply(elm) {
-    var clone = elm.cloneNode(true);
-    addClass(clone, Splide.classes.clone); // ID should not be duplicated.
-
-    removeAttribute(clone, 'id');
-    return clone;
-  }
-
-  return Clones;
-};
-/**
- * The resolver component for horizontal layout.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The resolver component for horizontal layout.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The resolver object.
- */
-
-
-var Horizontal = function Horizontal(Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Keep the root element.
-   *
-   * @type {Element}
-   */
-
-  var root = Splide.root;
-  /**
-   * Keep the track element.
-   *
-   * @type {Element}
-   */
-
-  var track;
-  /**
-   * Keep the latest options.
-   *
-   * @type {Element}
-   */
-
-  var options = Splide.options;
-  return {
-    /**
-     * Margin property name.
-     *
-     * @type {string}
-     */
-    margin: 'margin' + (options.direction === RTL ? 'Left' : 'Right'),
-
-    /**
-     * Always 0 because the height will be determined by inner contents.
-     *
-     * @type {number}
-     */
-    height: 0,
-
-    /**
-     * Initialization.
-     */
-    init: function init() {
-      this.resize();
-    },
-
-    /**
-     * Resize gap and padding.
-     * This must be called on init.
-     */
-    resize: function resize() {
-      options = Splide.options;
-      track = Elements.track;
-      this.gap = toPixel(root, options.gap);
-      var padding = options.padding;
-      var left = toPixel(root, padding.left || padding);
-      var right = toPixel(root, padding.right || padding);
-      this.padding = {
-        left: left,
-        right: right
-      };
-      applyStyle(track, {
-        paddingLeft: unit(left),
-        paddingRight: unit(right)
-      });
-    },
-
-    /**
-     * Return total width from the left of the list to the right of the slide specified by the provided index.
-     *
-     * @param {number} index - Optional. A slide index. If undefined, total width of the slider will be returned.
-     *
-     * @return {number} - Total width to the right side of the specified slide, or 0 for an invalid index.
-     */
-    totalWidth: function totalWidth(index) {
-      if (index === void 0) {
-        index = Splide.length - 1;
-      }
-
-      var Slide = Elements.getSlide(index);
-      var width = 0;
-
-      if (Slide) {
-        var slideRect = getRect(Slide.slide);
-        var listRect = getRect(Elements.list);
-
-        if (options.direction === RTL) {
-          width = listRect.right - slideRect.left;
-        } else {
-          width = slideRect.right - listRect.left;
-        }
-
-        width += this.gap;
-      }
-
-      return width;
-    },
-
-    /**
-     * Return the slide width in px.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - The slide width.
-     */
-    slideWidth: function slideWidth(index) {
-      if (options.autoWidth) {
-        var _Slide = Elements.getSlide(index);
-
-        return _Slide ? _Slide.slide.offsetWidth : 0;
-      }
-
-      var width = options.fixedWidth || (this.width + this.gap) / options.perPage - this.gap;
-      return toPixel(root, width);
-    },
-
-    /**
-     * Return the slide height in px.
-     *
-     * @return {number} - The slide height.
-     */
-    slideHeight: function slideHeight() {
-      var height = options.height || options.fixedHeight || this.width * options.heightRatio;
-      return toPixel(root, height);
-    },
-
-    /**
-     * Return slider width without padding.
-     *
-     * @return {number} - Current slider width.
-     */
-    get width() {
-      return track.clientWidth - this.padding.left - this.padding.right;
-    }
-
-  };
-};
-/**
- * The resolver component for vertical layout.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The resolver component for vertical layout.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The resolver object.
- */
-
-
-var Vertical = function Vertical(Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Keep the root element.
-   *
-   * @type {Element}
-   */
-
-  var root = Splide.root;
-  /**
-   * Keep the track element.
-   *
-   * @type {Element}
-   */
-
-  var track;
-  /**
-   * Keep the latest options.
-   *
-   * @type {Element}
-   */
-
-  var options;
-  return {
-    /**
-     * Margin property name.
-     *
-     * @type {string}
-     */
-    margin: 'marginBottom',
-
-    /**
-     * Initialization.
-     */
-    init: function init() {
-      this.resize();
-    },
-
-    /**
-     * Resize gap and padding.
-     * This must be called on init.
-     */
-    resize: function resize() {
-      options = Splide.options;
-      track = Elements.track;
-      this.gap = toPixel(root, options.gap);
-      var padding = options.padding;
-      var top = toPixel(root, padding.top || padding);
-      var bottom = toPixel(root, padding.bottom || padding);
-      this.padding = {
-        top: top,
-        bottom: bottom
-      };
-      applyStyle(track, {
-        paddingTop: unit(top),
-        paddingBottom: unit(bottom)
-      });
-    },
-
-    /**
-     * Return total height from the top of the list to the bottom of the slide specified by the provided index.
-     *
-     * @param {number} index - Optional. A slide index. If undefined, total height of the slider will be returned.
-     *
-     * @return {number} - Total height to the bottom of the specified slide, or 0 for an invalid index.
-     */
-    totalHeight: function totalHeight(index) {
-      if (index === void 0) {
-        index = Splide.length - 1;
-      }
-
-      var Slide = Elements.getSlide(index);
-
-      if (Slide) {
-        return getRect(Slide.slide).bottom - getRect(Elements.list).top + this.gap;
-      }
-
-      return 0;
-    },
-
-    /**
-     * Return the slide width in px.
-     *
-     * @return {number} - The slide width.
-     */
-    slideWidth: function slideWidth() {
-      return toPixel(root, options.fixedWidth || this.width);
-    },
-
-    /**
-     * Return the slide height in px.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - The slide height.
-     */
-    slideHeight: function slideHeight(index) {
-      if (options.autoHeight) {
-        var _Slide2 = Elements.getSlide(index);
-
-        return _Slide2 ? _Slide2.slide.offsetHeight : 0;
-      }
-
-      var height = options.fixedHeight || (this.height + this.gap) / options.perPage - this.gap;
-      return toPixel(root, height);
-    },
-
-    /**
-     * Return slider width without padding.
-     *
-     * @return {number} - Current slider width.
-     */
-    get width() {
-      return track.clientWidth;
-    },
-
-    /**
-     * Return slide height without padding.
-     *
-     * @return {number} - Slider height.
-     */
-    get height() {
-      var height = options.height || this.width * options.heightRatio;
-      exist(height, '"height" or "heightRatio" is missing.');
-      return toPixel(root, height) - this.padding.top - this.padding.bottom;
-    }
-
-  };
-};
-/**
- * A package of utility functions related with time.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Simple throttle function that controls how often the given function is executed.
- *
- * @param {function} func - A function to be throttled.
- * @param {number}   wait - Time in millisecond for interval of execution.
- *
- * @return {Function} - A debounced function.
- */
-
-
-function throttle(func, wait) {
-  var timeout; // Declare function by the "function" keyword to prevent "this" from being inherited.
-
-  return function () {
-    if (!timeout) {
-      timeout = setTimeout(function () {
-        func();
-        timeout = null;
-      }, wait);
-    }
-  };
-}
-/**
- * Custom setInterval function that provides progress rate as callback.
- *
- * @param {function} callback - A callback function fired every time the interval time passes.
- * @param {number}   interval - Interval duration in milliseconds.
- * @param {function} progress - A callback function fired whenever the progress goes.
- *
- * @return {Object} - An object containing play() and pause() functions.
- */
-
-
-function createInterval(callback, interval, progress) {
-  var _window = window,
-      requestAnimationFrame = _window.requestAnimationFrame;
-  var start,
-      elapse,
-      rate,
-      _pause = true;
-
-  var step = function step(timestamp) {
-    if (!_pause) {
-      if (!start) {
-        start = timestamp;
-
-        if (rate && rate < 1) {
-          start -= rate * interval;
-        }
-      }
-
-      elapse = timestamp - start;
-      rate = elapse / interval;
-
-      if (elapse >= interval) {
-        start = 0;
-        rate = 1;
-        callback();
-      }
-
-      if (progress) {
-        progress(rate);
-      }
-
-      requestAnimationFrame(step);
-    }
-  };
-
-  return {
-    pause: function pause() {
-      _pause = true;
-      start = 0;
-    },
-    play: function play(reset) {
-      start = 0;
-
-      if (reset) {
-        rate = 0;
-      }
-
-      if (_pause) {
-        _pause = false;
-        requestAnimationFrame(step);
-      }
-    }
-  };
-}
-/**
- * The component for handing slide layouts and their sizes.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for handing slide layouts and their sizes.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Layout = function Layout(Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Whether the slider is vertical or not.
-   *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Layout component object.
-   *
-   * @type {Object}
-   */
-
-  var Layout = assign({
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      bind();
-      init(); // The word "size" means width for a horizontal slider and height for a vertical slider.
-
-      this.totalSize = isVertical ? this.totalHeight : this.totalWidth;
-      this.slideSize = isVertical ? this.slideHeight : this.slideWidth;
-    },
-
-    /**
-     * Destroy the component.
-     */
-    destroy: function destroy() {
-      removeAttribute([Elements.list, Elements.track], 'style');
-    },
-
-    /**
-     * Return the slider height on the vertical mode or width on the horizontal mode.
-     *
-     * @return {number}
-     */
-    get size() {
-      return isVertical ? this.height : this.width;
+    const trackRect = rect(Components.Elements.track);
+    const slideRect = rect(slide);
+    const left = resolve("left");
+    const right = resolve("right");
+    return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);
+  }
+  function isWithin(from, distance) {
+    let diff = abs(from - index);
+    if (!Splide2.is(SLIDE) && !isClone) {
+      diff = min(diff, Splide2.length - diff);
     }
+    return diff <= distance;
+  }
+  return {
+    index,
+    slideIndex,
+    slide,
+    container,
+    isClone,
+    mount,
+    destroy,
+    rule,
+    isWithin
+  };
+}
 
-  }, isVertical ? Vertical(Splide, Components) : Horizontal(Splide, Components));
-  /**
-   * Init slider styles according to options.
-   */
-
+function Slides(Splide2, Components2, options) {
+  const { on, emit, bind } = EventInterface(Splide2);
+  const { slides, list } = Components2.Elements;
+  const Slides2 = [];
+  function mount() {
+    init();
+    on(EVENT_REFRESH, refresh);
+  }
   function init() {
-    Layout.init();
-    applyStyle(Splide.root, {
-      maxWidth: unit(Splide.options.width)
+    slides.forEach((slide, index) => {
+      register(slide, index, -1);
     });
-    Elements.each(function (Slide) {
-      Slide.slide.style[Layout.margin] = unit(Layout.gap);
+  }
+  function destroy() {
+    forEach$1((Slide2) => {
+      Slide2.destroy();
     });
-    resize();
+    empty(Slides2);
   }
-  /**
-   * Listen the resize native event with throttle.
-   * Initialize when the component is mounted or options are updated.
-   */
-
-
-  function bind() {
-    Splide.on('resize load', throttle(function () {
-      Splide.emit('resize');
-    }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
-  }
-  /**
-   * Resize the track and slide elements.
-   */
-
-
-  function resize() {
-    var options = Splide.options;
-    Layout.resize();
-    applyStyle(Elements.track, {
-      height: unit(Layout.height)
+  function refresh() {
+    destroy();
+    init();
+  }
+  function register(slide, index, slideIndex) {
+    const object = Slide$1(Splide2, index, slideIndex, slide);
+    object.mount();
+    Slides2.push(object);
+  }
+  function get(excludeClones) {
+    return excludeClones ? filter((Slide2) => !Slide2.isClone) : Slides2;
+  }
+  function getIn(page) {
+    const { Controller } = Components2;
+    const index = Controller.toIndex(page);
+    const max = Controller.hasFocus() ? 1 : options.perPage;
+    return filter((Slide2) => between(Slide2.index, index, index + max - 1));
+  }
+  function getAt(index) {
+    return filter(index)[0];
+  }
+  function add(items, index) {
+    forEach(items, (slide) => {
+      if (isString(slide)) {
+        slide = parseHtml(slide);
+      }
+      if (isHTMLElement(slide)) {
+        const ref = slides[index];
+        ref ? before(slide, ref) : append(list, slide);
+        addClass(slide, options.classes.slide);
+        observeImages(slide, emit.bind(null, EVENT_RESIZE));
+      }
     });
-    var slideHeight = options.autoHeight ? null : unit(Layout.slideHeight());
-    Elements.each(function (Slide) {
-      applyStyle(Slide.container, {
-        height: slideHeight
-      });
-      applyStyle(Slide.slide, {
-        width: options.autoWidth ? null : unit(Layout.slideWidth(Slide.index)),
-        height: Slide.container ? null : slideHeight
-      });
+    emit(EVENT_REFRESH);
+  }
+  function remove$1(matcher) {
+    remove(filter(matcher).map((Slide2) => Slide2.slide));
+    emit(EVENT_REFRESH);
+  }
+  function forEach$1(iteratee, excludeClones) {
+    get(excludeClones).forEach(iteratee);
+  }
+  function filter(matcher) {
+    return Slides2.filter(isFunction(matcher) ? matcher : (Slide2) => isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index));
+  }
+  function rule(prop, value, useContainer) {
+    forEach$1((Slide2) => {
+      Slide2.rule(prop, value, useContainer);
     });
-    Splide.emit('resized');
   }
-
-  return Layout;
-};
-/**
- * The component for supporting mouse drag and swipe.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var abs = Math.abs;
-/**
- * If the absolute velocity is greater thant this value,
- * a slider always goes to a different slide after drag, not allowed to stay on a current slide.
- */
-
-var MIN_VELOCITY = 0.1;
-/**
- * Adjust how much the track can be pulled on the first or last page.
- * The larger number this is, the farther the track moves.
- * This should be around 5 - 9.
- *
- * @type {number}
- */
-
-var FRICTION_REDUCER = 7;
-/**
- * The component supporting mouse drag and swipe.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-var Drag = function Drag(Splide, Components) {
-  /**
-   * Store the Move component.
-   *
-   * @type {Object}
-   */
-  var Track = Components.Track;
-  /**
-   * Store the Controller component.
-   *
-   * @type {Object}
-   */
-
-  var Controller = Components.Controller;
-  /**
-   * Coordinate of the track on starting drag.
-   *
-   * @type {Object}
-   */
-
-  var startCoord;
-  /**
-   * Analyzed info on starting drag.
-   *
-   * @type {Object|null}
-   */
-
-  var startInfo;
-  /**
-   * Analyzed info being updated while dragging/swiping.
-   *
-   * @type {Object}
-   */
-
-  var currentInfo;
-  /**
-   * Determine whether slides are being dragged or not.
-   *
-   * @type {boolean}
-   */
-
-  var isDragging;
-  /**
-   * Whether the slider direction is vertical or not.
-   *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Axis for the direction.
-   *
-   * @type {string}
-   */
-
-  var axis = isVertical ? 'y' : 'x';
-  /**
-   * Drag component object.
-   *
-   * @type {Object}
-   */
-
-  var Drag = {
-    /**
-     * Whether dragging is disabled or not.
-     *
-     * @type {boolean}
-     */
-    disabled: false,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this9 = this;
-
-      var Elements = Components.Elements;
-      var track = Elements.track;
-      Splide.on('touchstart mousedown', start, track).on('touchmove mousemove', move, track, {
-        passive: false
-      }).on('touchend touchcancel mouseleave mouseup dragend', end, track).on('mounted refresh', function () {
-        // Prevent dragging an image or anchor itself.
-        each(Elements.list.querySelectorAll('img, a'), function (elm) {
-          Splide.off('dragstart', elm).on('dragstart', function (e) {
-            e.preventDefault();
-          }, elm, {
-            passive: false
-          });
+  function observeImages(elm, callback) {
+    const images = queryAll(elm, "img");
+    let { length } = images;
+    if (length) {
+      images.forEach((img) => {
+        bind(img, "load error", () => {
+          if (!--length) {
+            callback();
+          }
         });
-      }).on('mounted updated', function () {
-        _this9.disabled = !Splide.options.drag;
       });
+    } else {
+      callback();
     }
+  }
+  function getLength(excludeClones) {
+    return excludeClones ? slides.length : Slides2.length;
+  }
+  function isEnough() {
+    return Slides2.length > options.perPage;
+  }
+  return {
+    mount,
+    destroy,
+    register,
+    get,
+    getIn,
+    getAt,
+    add,
+    remove: remove$1,
+    forEach: forEach$1,
+    filter,
+    rule,
+    getLength,
+    isEnough
   };
-  /**
-   * Called when the track starts to be dragged.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
+}
 
-  function start(e) {
-    if (!Drag.disabled && !isDragging) {
-      // These prams are used to evaluate whether the slider should start moving.
-      init(e);
+function Clones(Splide2, Components2, options) {
+  const { on, emit } = EventInterface(Splide2);
+  const { Elements, Slides } = Components2;
+  const { resolve } = Components2.Direction;
+  const clones = [];
+  let cloneCount;
+  function mount() {
+    init();
+    on(EVENT_REFRESH, refresh);
+    on([EVENT_UPDATED, EVENT_RESIZE], observe);
+  }
+  function init() {
+    if (cloneCount = computeCloneCount()) {
+      generate(cloneCount);
     }
   }
-  /**
-   * Initialize parameters.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
-
-
-  function init(e) {
-    startCoord = Track.toCoord(Track.position);
-    startInfo = analyze(e, {});
-    currentInfo = startInfo;
-  }
-  /**
-   * Called while the track being dragged.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
-
-
-  function move(e) {
-    if (startInfo) {
-      currentInfo = analyze(e, startInfo);
-
-      if (isDragging) {
-        if (e.cancelable) {
-          e.preventDefault();
-        }
-
-        if (!Splide.is(FADE)) {
-          var position = startCoord[axis] + currentInfo.offset[axis];
-          Track.translate(resist(position));
-        }
-      } else {
-        if (shouldMove(currentInfo)) {
-          Splide.emit('drag', startInfo);
-          isDragging = true;
-          Track.cancel(); // These params are actual drag data.
-
-          init(e);
-        }
-      }
+  function destroy() {
+    remove(clones);
+    empty(clones);
+  }
+  function refresh() {
+    destroy();
+    init();
+  }
+  function observe() {
+    if (cloneCount !== computeCloneCount()) {
+      emit(EVENT_REFRESH);
     }
   }
-  /**
-   * Determine whether to start moving the track or not by drag angle.
-   *
-   * @param {Object} info - An information object.
-   *
-   * @return {boolean} - True if the track should be moved or false if not.
-   */
-
-
-  function shouldMove(_ref3) {
-    var offset = _ref3.offset;
-
-    if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
-      return false;
+  function generate(count) {
+    const slides = Slides.get().slice();
+    const { length } = slides;
+    if (length) {
+      while (slides.length < count) {
+        push(slides, slides);
+      }
+      push(slides.slice(-count), slides.slice(0, count)).forEach((Slide, index) => {
+        const isHead = index < count;
+        const clone = cloneDeep(Slide.slide, index);
+        isHead ? before(clone, slides[0].slide) : append(Elements.list, clone);
+        push(clones, clone);
+        Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index);
+      });
     }
-
-    var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
-
-    if (isVertical) {
-      angle = 90 - angle;
+  }
+  function cloneDeep(elm, index) {
+    const clone = elm.cloneNode(true);
+    addClass(clone, options.classes.clone);
+    clone.id = `${Splide2.root.id}-clone${pad(index + 1)}`;
+    return clone;
+  }
+  function computeCloneCount() {
+    let { clones: clones2 } = options;
+    if (!Splide2.is(LOOP)) {
+      clones2 = 0;
+    } else if (!clones2) {
+      const fixedSize = measure(Elements.list, options[resolve("fixedWidth")]);
+      const fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
+      const baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage;
+      clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2);
     }
+    return clones2;
+  }
+  return {
+    mount,
+    destroy
+  };
+}
 
-    return angle < Splide.options.dragAngleThreshold;
-  }
-  /**
-   * Resist dragging the track on the first/last page because there is no more.
-   *
-   * @param {number} position - A position being applied to the track.
-   *
-   * @return {Object} - Adjusted position.
-   */
-
-
-  function resist(position) {
-    if (Splide.is(SLIDE)) {
-      var sign = Track.sign;
-
-      var _start = sign * Track.trim(Track.toPosition(0));
-
-      var _end = sign * Track.trim(Track.toPosition(Controller.edgeIndex));
-
-      position *= sign;
-
-      if (position < _start) {
-        position = _start - FRICTION_REDUCER * Math.log(_start - position);
-      } else if (position > _end) {
-        position = _end + FRICTION_REDUCER * Math.log(position - _end);
-      }
-
-      position *= sign;
+function Layout(Splide2, Components2, options) {
+  const { on, bind, emit } = EventInterface(Splide2);
+  const { Slides } = Components2;
+  const { ruleBy } = Components2.Style;
+  const { resolve } = Components2.Direction;
+  const { track, list } = Components2.Elements;
+  const { getAt } = Slides;
+  let vertical;
+  function mount() {
+    init();
+    bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on(EVENT_RESIZE, resize);
+  }
+  function init() {
+    vertical = options.direction === TTB;
+    ruleBy(Splide2.root, "maxWidth", unit(options.width));
+    ruleBy(track, resolve("paddingLeft"), cssPadding(false));
+    ruleBy(track, resolve("paddingRight"), cssPadding(true));
+    Slides.rule(resolve("marginRight"), unit(options.gap));
+    Slides.rule("width", cssSlideWidth());
+    setSlidesHeight();
+    resize();
+  }
+  function resize() {
+    ruleBy(track, "height", cssTrackHeight());
+    options.heightRatio && setSlidesHeight();
+    emit(EVENT_RESIZED);
+  }
+  function setSlidesHeight() {
+    Slides.rule("height", cssSlideHeight(), true);
+  }
+  function cssPadding(right) {
+    const { padding } = options;
+    const prop = resolve(right ? "right" : "left", true);
+    return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
+  }
+  function cssTrackHeight() {
+    let height = "";
+    if (vertical) {
+      height = cssHeight();
+      assert(height, "height or heightRatio is missing.");
+      height = `calc(${height} - ${cssPadding(false)} - ${cssPadding(true)})`;
     }
-
-    return position;
+    return height;
   }
-  /**
-   * Called when dragging ends.
-   */
-
-
-  function end() {
-    startInfo = null;
-
-    if (isDragging) {
-      Splide.emit('dragged', currentInfo);
-      go(currentInfo);
-      isDragging = false;
+  function cssHeight() {
+    return unit(options.height || rect(list).width * options.heightRatio);
+  }
+  function cssSlideWidth() {
+    return options.autoWidth ? "" : unit(options.fixedWidth) || (vertical ? "" : cssSlideSize());
+  }
+  function cssSlideHeight() {
+    return unit(options.fixedHeight) || (vertical ? options.autoHeight ? "" : cssSlideSize() : cssHeight());
+  }
+  function cssSlideSize() {
+    const gap = unit(options.gap);
+    return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
+  }
+  function listSize() {
+    return rect(list)[resolve("width")];
+  }
+  function slideSize(index, withoutGap) {
+    const Slide = getAt(index || 0);
+    return Slide ? rect(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+  }
+  function totalSize(index, withoutGap) {
+    const Slide = getAt(index);
+    if (Slide) {
+      const right = rect(Slide.slide)[resolve("right")];
+      const left = rect(list)[resolve("left")];
+      return abs(right - left) + (withoutGap ? 0 : getGap());
     }
+    return 0;
   }
-  /**
-   * Go to the slide determined by the analyzed data.
-   *
-   * @param {Object} info - An info object.
-   */
-
-
-  function go(info) {
-    var velocity = info.velocity[axis];
-    var absV = abs(velocity);
-
-    if (absV > 0) {
-      var options = Splide.options;
-      var index = Splide.index;
-      var sign = velocity < 0 ? -1 : 1;
-      var destIndex = index;
-
-      if (!Splide.is(FADE)) {
-        var destination = Track.position;
+  function sliderSize() {
+    return totalSize(Splide2.length - 1, true) - totalSize(-1, true);
+  }
+  function getGap() {
+    const Slide = getAt(0);
+    return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
+  }
+  function getPadding(right) {
+    return parseFloat(style(track, resolve(`padding${right ? "Right" : "Left"}`, true))) || 0;
+  }
+  return {
+    mount,
+    listSize,
+    slideSize,
+    sliderSize,
+    totalSize,
+    getPadding
+  };
+}
 
-        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
-          destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
+function Move(Splide2, Components2, options) {
+  const { on, emit } = EventInterface(Splide2);
+  const { slideSize, getPadding, totalSize, listSize, sliderSize } = Components2.Layout;
+  const { resolve, orient } = Components2.Direction;
+  const { list, track } = Components2.Elements;
+  let waiting;
+  function mount() {
+    if (!Splide2.is(FADE)) {
+      on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+    } else {
+      emit(EVENT_REPOSITIONED);
+    }
+  }
+  function reposition() {
+    Components2.Scroll.cancel();
+    jump(Splide2.index);
+    emit(EVENT_REPOSITIONED);
+  }
+  function move(dest, index, prev, callback) {
+    if (!isBusy()) {
+      const { set } = Splide2.state;
+      const position = getPosition();
+      const looping = dest !== index;
+      waiting = looping || options.waitForTransition;
+      set(MOVING);
+      emit(EVENT_MOVE, index, prev, dest);
+      Components2.Transition.start(dest, () => {
+        looping && jump(index);
+        waiting = false;
+        set(IDLE);
+        emit(EVENT_MOVED, index, prev, dest);
+        if (options.trimSpace === "move" && dest !== prev && position === getPosition()) {
+          Components2.Controller.go(dest > prev ? ">" : "<", false, callback);
+        } else {
+          callback && callback();
         }
-
-        destIndex = Track.toIndex(destination);
-      }
-      /*
-       * Do not allow the track to go to a previous position if there is enough velocity.
-       * Always use the adjacent index for the fade mode.
-       */
-
-
-      if (destIndex === index && absV > MIN_VELOCITY) {
-        destIndex = index + sign * Track.sign;
+      });
+    }
+  }
+  function jump(index) {
+    translate(toPosition(index, true));
+  }
+  function translate(position, preventLoop) {
+    Components2.Style.ruleBy(list, "transform", `translate${resolve("X")}(${preventLoop ? position : loop(position)}px)`);
+  }
+  function loop(position) {
+    if (!waiting && Splide2.is(LOOP)) {
+      const diff = orient(position - getPosition());
+      const exceededMin = exceededLimit(false, position) && diff < 0;
+      const exceededMax = exceededLimit(true, position) && diff > 0;
+      if (exceededMin || exceededMax) {
+        const excess = position - getLimit(exceededMax);
+        const size = sliderSize();
+        position -= sign(excess) * size * ceil(abs(excess) / size);
       }
-
-      if (Splide.is(SLIDE)) {
-        destIndex = between(destIndex, 0, Controller.edgeIndex);
+    }
+    return position;
+  }
+  function cancel() {
+    waiting = false;
+    Components2.Transition.cancel();
+    translate(getPosition());
+  }
+  function toIndex(position) {
+    const Slides = Components2.Slides.get();
+    let index = 0;
+    let minDistance = Infinity;
+    for (let i = 0; i < Slides.length; i++) {
+      const slideIndex = Slides[i].index;
+      const distance = abs(toPosition(slideIndex, true) - position);
+      if (distance < minDistance) {
+        minDistance = distance;
+        index = slideIndex;
+      } else {
+        break;
       }
-
-      Controller.go(destIndex, options.isNavigation);
     }
+    return index;
   }
-  /**
-   * Analyze the given event object and return important information for handling swipe behavior.
-   *
-   * @param {Event}   e          - Touch or Mouse event object.
-   * @param {Object}  startInfo  - Information analyzed on start for calculating difference from the current one.
-   *
-   * @return {Object} - An object containing analyzed information, such as offset, velocity, etc.
-   */
-
-
-  function analyze(e, startInfo) {
-    var timeStamp = e.timeStamp,
-        touches = e.touches;
-
-    var _ref4 = touches ? touches[0] : e,
-        clientX = _ref4.clientX,
-        clientY = _ref4.clientY;
-
-    var _ref5 = startInfo.to || {},
-        _ref5$x = _ref5.x,
-        fromX = _ref5$x === void 0 ? clientX : _ref5$x,
-        _ref5$y = _ref5.y,
-        fromY = _ref5$y === void 0 ? clientY : _ref5$y;
-
-    var startTime = startInfo.time || 0;
-    var offset = {
-      x: clientX - fromX,
-      y: clientY - fromY
-    };
-    var duration = timeStamp - startTime;
-    var velocity = {
-      x: offset.x / duration,
-      y: offset.y / duration
-    };
-    return {
-      to: {
-        x: clientX,
-        y: clientY
-      },
-      offset: offset,
-      time: timeStamp,
-      velocity: velocity
-    };
+  function toPosition(index, trimming) {
+    const position = orient(totalSize(index - 1) - offset(index));
+    return trimming ? trim(position) : position;
   }
-
-  return Drag;
-};
-/**
- * The component for handling a click event.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for handling a click event.
- * Click should be disabled during drag/swipe.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Click = function Click(Splide, Components) {
-  /**
-   * Whether click is disabled or not.
-   *
-   * @type {boolean}
-   */
-  var disabled = false;
-  /**
-   * Click component object.
-   *
-   * @type {Object}
-   */
-
-  var Click = {
-    /**
-     * Mount only when the drag is activated and the slide type is not "fade".
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.drag,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('click', onClick, Components.Elements.track, {
-        capture: true
-      }).on('drag', function () {
-        disabled = true;
-      }).on('dragged', function () {
-        // Make sure the flag is released after the click event is fired.
-        setTimeout(function () {
-          disabled = false;
-        });
-      });
+  function getPosition() {
+    const left = resolve("left");
+    return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
+  }
+  function trim(position) {
+    if (options.trimSpace && Splide2.is(SLIDE)) {
+      position = clamp(position, 0, orient(sliderSize() - listSize()));
     }
+    return position;
+  }
+  function offset(index) {
+    const { focus } = options;
+    return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
+  }
+  function getLimit(max) {
+    return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
+  }
+  function isBusy() {
+    return !!waiting;
+  }
+  function exceededLimit(max, position) {
+    position = isUndefined(position) ? getPosition() : position;
+    const exceededMin = max !== true && orient(position) < orient(getLimit(false));
+    const exceededMax = max !== false && orient(position) > orient(getLimit(true));
+    return exceededMin || exceededMax;
+  }
+  return {
+    mount,
+    move,
+    jump,
+    translate,
+    cancel,
+    toIndex,
+    toPosition,
+    getPosition,
+    getLimit,
+    isBusy,
+    exceededLimit
   };
-  /**
-   * Called when a track element is clicked.
-   *
-   * @param {Event} e - A click event.
-   */
+}
 
-  function onClick(e) {
-    if (disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-    }
+function Controller(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  const { Move } = Components2;
+  const { getPosition, getLimit } = Move;
+  const { isEnough, getLength } = Components2.Slides;
+  const isLoop = Splide2.is(LOOP);
+  let currIndex = options.start || 0;
+  let prevIndex = currIndex;
+  let slideCount;
+  let perMove;
+  let perPage;
+  function mount() {
+    init();
+    on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 1);
+    on(EVENT_SCROLLED, reindex, 0);
   }
-
-  return Click;
-};
-/**
- * The component for playing slides automatically.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Set of pause flags.
- */
-
-
-var PAUSE_FLAGS = {
-  HOVER: 1,
-  FOCUS: 2,
-  MANUAL: 3
-};
-/**
- * The component for playing slides automatically.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var Autoplay = function Autoplay(Splide, Components, name) {
-  /**
-   * Store pause flags.
-   *
-   * @type {Array}
-   */
-  var flags = [];
-  /**
-   * Store an interval object.
-   *
-   * @type {Object};
-   */
-
-  var interval;
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Autoplay component object.
-   *
-   * @type {Object}
-   */
-
-  var Autoplay = {
-    /**
-     * Required only when the autoplay option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.autoplay,
-
-    /**
-     * Called when the component is mounted.
-     * Note that autoplay starts only if there are slides over perPage number.
-     */
-    mount: function mount() {
-      var options = Splide.options;
-
-      if (Elements.slides.length > options.perPage) {
-        interval = createInterval(function () {
-          Splide.go('>');
-        }, options.interval, function (rate) {
-          Splide.emit(name + ":playing", rate);
-
-          if (Elements.bar) {
-            applyStyle(Elements.bar, {
-              width: rate * 100 + "%"
-            });
-          }
-        });
-        bind();
-        this.play();
-      }
-    },
-
-    /**
-     * Start autoplay.
-     *
-     * @param {number} flag - A pause flag to be removed.
-     */
-    play: function play(flag) {
-      if (flag === void 0) {
-        flag = 0;
+  function init() {
+    slideCount = getLength(true);
+    perMove = options.perMove;
+    perPage = options.perPage;
+    currIndex = clamp(currIndex, 0, slideCount - 1);
+  }
+  function reindex() {
+    setIndex(Move.toIndex(getPosition()));
+  }
+  function go(control, allowSameIndex, callback) {
+    const dest = parse(control);
+    const index = loop(dest);
+    if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
+      setIndex(index);
+      Move.move(dest, index, prevIndex, callback);
+    }
+  }
+  function parse(control) {
+    let index = currIndex;
+    if (isString(control)) {
+      const [, indicator, number] = control.match(/([+\-<>])(\d+)?/) || [];
+      if (indicator === "+" || indicator === "-") {
+        index = computeDestIndex(currIndex + +`${indicator}${+number || 1}`, currIndex, true);
+      } else if (indicator === ">") {
+        index = number ? toIndex(+number) : getNext(true);
+      } else if (indicator === "<") {
+        index = getPrev(true);
       }
-
-      flags = flags.filter(function (f) {
-        return f !== flag;
-      });
-
-      if (!flags.length) {
-        Splide.emit(name + ":play");
-        interval.play(Splide.options.resetProgress);
+    } else {
+      if (isLoop) {
+        index = clamp(control, -perPage, slideCount + perPage - 1);
+      } else {
+        index = clamp(control, 0, getEnd());
       }
-    },
-
-    /**
-     * Pause autoplay.
-     * Note that Array.includes is not supported by IE.
-     *
-     * @param {number} flag - A pause flag to be added.
-     */
-    pause: function pause(flag) {
-      if (flag === void 0) {
-        flag = 0;
+    }
+    return index;
+  }
+  function getNext(destination) {
+    return getAdjacent(false, destination);
+  }
+  function getPrev(destination) {
+    return getAdjacent(true, destination);
+  }
+  function getAdjacent(prev, destination) {
+    const number = perMove || hasFocus() ? 1 : perPage;
+    const dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex);
+    if (dest === -1 && Splide2.is(SLIDE)) {
+      if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {
+        return prev ? 0 : getEnd();
       }
-
-      interval.pause();
-
-      if (flags.indexOf(flag) === -1) {
-        flags.push(flag);
+    }
+    return destination ? dest : loop(dest);
+  }
+  function computeDestIndex(dest, from, incremental) {
+    if (isEnough()) {
+      const end = getEnd();
+      if (dest < 0 || dest > end) {
+        if (between(0, dest, from, true) || between(end, from, dest, true)) {
+          dest = toIndex(toPage(dest));
+        } else {
+          if (isLoop) {
+            dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
+          } else if (options.rewind) {
+            dest = dest < 0 ? end : 0;
+          } else {
+            dest = -1;
+          }
+        }
+      } else {
+        if (!isLoop && !incremental && dest !== from) {
+          dest = perMove ? dest : toIndex(toPage(from) + (dest < from ? -1 : 1));
+        }
       }
+    } else {
+      dest = -1;
+    }
+    return dest;
+  }
+  function getEnd() {
+    let end = slideCount - perPage;
+    if (hasFocus() || isLoop && perMove) {
+      end = slideCount - 1;
+    }
+    return max(end, 0);
+  }
+  function loop(index) {
+    if (isLoop) {
+      return isEnough() ? index % slideCount + (index < 0 ? slideCount : 0) : -1;
+    }
+    return index;
+  }
+  function toIndex(page) {
+    return clamp(hasFocus() ? page : perPage * page, 0, getEnd());
+  }
+  function toPage(index) {
+    if (!hasFocus()) {
+      index = between(index, slideCount - perPage, slideCount - 1) ? slideCount - 1 : index;
+      index = floor(index / perPage);
+    }
+    return index;
+  }
+  function setIndex(index) {
+    if (index !== currIndex) {
+      prevIndex = currIndex;
+      currIndex = index;
+    }
+  }
+  function getIndex(prev) {
+    return prev ? prevIndex : currIndex;
+  }
+  function hasFocus() {
+    return !isUndefined(options.focus) || options.isNavigation;
+  }
+  return {
+    mount,
+    go,
+    getNext,
+    getPrev,
+    getEnd,
+    setIndex,
+    getIndex,
+    toIndex,
+    toPage,
+    hasFocus
+  };
+}
 
-      if (flags.length === 1) {
-        Splide.emit(name + ":pause");
+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) {
+  const { on, bind, emit } = EventInterface(Splide2);
+  const { classes, i18n } = options;
+  const { Elements, Controller } = Components2;
+  let wrapper = Elements.arrows;
+  let prev = Elements.prev;
+  let next = Elements.next;
+  let created;
+  const arrows = {};
+  function mount() {
+    init();
+    on(EVENT_UPDATED, init);
+  }
+  function init() {
+    if (options.arrows) {
+      if (!prev || !next) {
+        createArrows();
+      }
+    }
+    if (prev && next) {
+      if (!arrows.prev) {
+        const { id } = Elements.track;
+        setAttribute(prev, ARIA_CONTROLS, id);
+        setAttribute(next, ARIA_CONTROLS, id);
+        arrows.prev = prev;
+        arrows.next = next;
+        listen();
+        emit(EVENT_ARROWS_MOUNTED, prev, next);
+      } else {
+        display(wrapper, options.arrows === false ? "none" : "");
       }
     }
+  }
+  function destroy() {
+    if (created) {
+      remove(wrapper);
+    } else {
+      removeAttribute(prev, ALL_ATTRIBUTES);
+      removeAttribute(next, ALL_ATTRIBUTES);
+    }
+  }
+  function listen() {
+    const { go } = Controller;
+    on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update);
+    bind(next, "click", () => {
+      go(">", true);
+    });
+    bind(prev, "click", () => {
+      go("<", true);
+    });
+  }
+  function createArrows() {
+    wrapper = create("div", classes.arrows);
+    prev = createArrow(true);
+    next = createArrow(false);
+    created = true;
+    append(wrapper, [prev, next]);
+    before(wrapper, child(options.arrows === "slider" && Elements.slider || Splide2.root));
+  }
+  function createArrow(prev2) {
+    const arrow = `<button class="${classes.arrow} ${prev2 ? classes.prev : classes.next}" type="button"><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${options.arrowPath || PATH}" />`;
+    return parseHtml(arrow);
+  }
+  function update() {
+    const index = Splide2.index;
+    const prevIndex = Controller.getPrev();
+    const nextIndex = Controller.getNext();
+    const prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
+    const nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
+    prev.disabled = prevIndex < 0;
+    next.disabled = nextIndex < 0;
+    setAttribute(prev, ARIA_LABEL, prevLabel);
+    setAttribute(next, ARIA_LABEL, nextLabel);
+    emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex);
+  }
+  return {
+    arrows,
+    mount,
+    destroy
   };
-  /**
-   * Listen some events.
-   */
-
-  function bind() {
-    var options = Splide.options;
-    var sibling = Splide.sibling;
-    var elms = [Splide.root, sibling ? sibling.root : null];
+}
 
+function Autoplay(Splide2, Components2, options) {
+  const { on, bind, emit } = EventInterface(Splide2);
+  const { Elements } = Components2;
+  const interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
+  const { isPaused } = interval;
+  let hovered;
+  let focused;
+  let paused;
+  function mount() {
+    const { autoplay } = options;
+    if (autoplay) {
+      initButton(true);
+      initButton(false);
+      listen();
+      if (autoplay !== "pause") {
+        play();
+      }
+    }
+  }
+  function initButton(forPause) {
+    const prop = forPause ? "pause" : "play";
+    const button = Elements[prop];
+    if (button) {
+      setAttribute(button, ARIA_CONTROLS, Elements.track.id);
+      setAttribute(button, ARIA_LABEL, options.i18n[prop]);
+      bind(button, "click", forPause ? pause : play);
+    }
+  }
+  function listen() {
+    const { root } = Elements;
     if (options.pauseOnHover) {
-      switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
-      switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
+      bind(root, "mouseenter mouseleave", (e) => {
+        hovered = e.type === "mouseenter";
+        autoToggle();
+      });
     }
-
     if (options.pauseOnFocus) {
-      switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
-      switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
+      bind(root, "focusin focusout", (e) => {
+        focused = e.type === "focusin";
+        autoToggle();
+      });
     }
-
-    if (Elements.play) {
-      Splide.on('click', function () {
-        // Need to be removed a focus flag at first.
-        Autoplay.play(PAUSE_FLAGS.FOCUS);
-        Autoplay.play(PAUSE_FLAGS.MANUAL);
-      }, Elements.play);
+    on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+  }
+  function play() {
+    if (isPaused() && Components2.Slides.isEnough()) {
+      interval.start(!options.resetProgress);
+      focused = hovered = paused = false;
+      emit(EVENT_AUTOPLAY_PLAY);
+    }
+  }
+  function pause(manual = true) {
+    if (!isPaused()) {
+      interval.pause();
+      emit(EVENT_AUTOPLAY_PAUSE);
     }
-
-    if (Elements.pause) {
-      switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, false);
+    paused = manual;
+  }
+  function autoToggle() {
+    if (!paused) {
+      if (!hovered && !focused) {
+        play();
+      } else {
+        pause(false);
+      }
     }
-
-    Splide.on('move refresh', function () {
-      Autoplay.play();
-    }) // Rewind the timer.
-    .on('destroy', function () {
-      Autoplay.pause();
-    });
   }
-  /**
-   * Play or pause on the given event.
-   *
-   * @param {Element[]} elms  - Elements.
-   * @param {string}    event - An event name or names.
-   * @param {number}    flag  - A pause flag defined on the top.
-   * @param {boolean}   play  - Determine whether to play or pause.
-   */
-
-
-  function switchOn(elms, event, flag, play) {
-    elms.forEach(function (elm) {
-      Splide.on(event, function () {
-        Autoplay[play ? 'play' : 'pause'](flag);
-      }, elm);
-    });
+  function update(rate) {
+    const { bar } = Elements;
+    if (bar) {
+      style(bar, { width: `${rate * 100}%` });
+    }
+    emit(EVENT_AUTOPLAY_PLAYING, rate);
   }
+  return {
+    mount,
+    destroy: interval.cancel,
+    play,
+    pause,
+    isPaused
+  };
+}
 
-  return Autoplay;
-};
-/**
- * The component for change an img element to background image of its wrapper.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for change an img element to background image of its wrapper.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var Cover = function Cover(Splide, Components) {
-  /**
-   * Hold options.
-   *
-   * @type {Object}
-   */
-  var options = Splide.options;
-  /**
-   * Cover component object.
-   *
-   * @type {Object}
-   */
-
-  var Cover = {
-    /**
-     * Required only when "cover" option is true.
-     *
-     * @type {boolean}
-     */
-    required: options.cover,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('lazyload:loaded', function (img) {
-        cover(img, false);
+function Cover(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  function mount() {
+    if (options.cover) {
+      on(EVENT_LAZYLOAD_LOADED, (img, Slide) => {
+        toggle(true, img, Slide);
       });
-      Splide.on('mounted updated refresh', function () {
-        return apply(false);
-      });
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      apply(true);
+      on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true));
     }
-  };
-  /**
-   * Apply "cover" to all slides.
-   *
-   * @param {boolean} uncover - If true, "cover" will be clear.
-   */
-
-  function apply(uncover) {
-    Components.Elements.each(function (Slide) {
-      var img = child(Slide.slide, 'IMG') || child(Slide.container, 'IMG');
-
+  }
+  function destroy() {
+    apply(false);
+  }
+  function apply(cover) {
+    Components2.Slides.forEach((Slide) => {
+      const img = child(Slide.container || Slide.slide, "img");
       if (img && img.src) {
-        cover(img, uncover);
+        toggle(cover, img, Slide);
       }
     });
   }
-  /**
-   * Set background image of the parent element, using source of the given image element.
-   *
-   * @param {Element} img     - An image element.
-   * @param {boolean} uncover - Reset "cover".
-   */
-
-
-  function cover(img, uncover) {
-    applyStyle(img.parentElement, {
-      background: uncover ? '' : "center/cover no-repeat url(\"" + img.src + "\")"
-    });
-    applyStyle(img, {
-      display: uncover ? '' : 'none'
-    });
+  function toggle(cover, img, Slide) {
+    Slide.rule("background", cover ? `center/cover no-repeat url("${img.src}")` : "", true);
+    display(img, cover ? "none" : "");
   }
+  return {
+    mount,
+    destroy
+  };
+}
 
-  return Cover;
-};
-/**
- * Export vector path for an arrow.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Namespace definition for SVG element.
- *
- * @type {string}
- */
-
-
-var XML_NAME_SPACE = 'http://www.w3.org/2000/svg';
-/**
- * The arrow vector path.
- *
- * @type {number}
- */
-
-var 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';
-/**
- * SVG width and height.
- *
- * @type {number}
- */
-
-var SIZE = 40;
-/**
- * The component for appending prev/next arrows.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for appending prev/next arrows.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var Arrows = function Arrows(Splide, Components, name) {
-  /**
-   * Previous arrow element.
-   *
-   * @type {Element|undefined}
-   */
-  var prev;
-  /**
-   * Next arrow element.
-   *
-   * @type {Element|undefined}
-   */
-
-  var next;
-  /**
-   * Store the class list.
-   *
-   * @type {Object}
-   */
-
-  var classes = Splide.classes;
-  /**
-   * Hold the root element.
-   *
-   * @type {Element}
-   */
-
-  var root = Splide.root;
-  /**
-   * Whether arrows are created programmatically or not.
-   *
-   * @type {boolean}
-   */
-
-  var created;
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Arrows component object.
-   *
-   * @type {Object}
-   */
-
-  var Arrows = {
-    /**
-     * Required when the arrows option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.arrows,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      // Attempt to get arrows from HTML source.
-      prev = Elements.arrows.prev;
-      next = Elements.arrows.next; // If arrows were not found in HTML, let's generate them.
-
-      if ((!prev || !next) && Splide.options.arrows) {
-        prev = createArrow(true);
-        next = createArrow(false);
-        created = true;
-        appendArrows();
-      }
-
-      if (prev && next) {
-        bind();
-      }
-
-      this.arrows = {
-        prev: prev,
-        next: next
-      };
-    },
-
-    /**
-     * Called after all components are mounted.
-     */
-    mounted: function mounted() {
-      Splide.emit(name + ":mounted", prev, next);
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      removeAttribute([prev, next], 'disabled');
-
-      if (created) {
-        _remove(prev.parentElement);
+const BOUNCE_DIFF_THRESHOLD = 10;
+const BOUNCE_DURATION = 600;
+const FRICTION_FACTOR = 0.6;
+const BASE_VELOCITY = 1.5;
+const MIN_DURATION = 800;
+
+function Scroll(Splide2, Components2, options) {
+  const { on, emit } = EventInterface(Splide2);
+  const { Move } = Components2;
+  const { getPosition, getLimit, exceededLimit } = Move;
+  let interval;
+  function mount() {
+    on(EVENT_MOVE, clear);
+    on([EVENT_UPDATED, EVENT_REFRESH], cancel);
+  }
+  function scroll(destination, duration, suppressConstraint) {
+    const start = getPosition();
+    let friction = 1;
+    duration = duration || computeDuration(abs(destination - start));
+    clear();
+    interval = RequestInterval(duration, onScrolled, (rate) => {
+      const position = getPosition();
+      const target = start + (destination - start) * easing(rate);
+      const diff = (target - getPosition()) * friction;
+      Move.translate(position + diff);
+      if (Splide2.is(SLIDE) && !suppressConstraint && exceededLimit()) {
+        friction *= FRICTION_FACTOR;
+        if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
+          bounce(exceededLimit(false));
+        }
       }
+    }, 1);
+    emit(EVENT_SCROLL);
+    interval.start();
+  }
+  function bounce(backwards) {
+    scroll(getLimit(!backwards), BOUNCE_DURATION, true);
+  }
+  function onScrolled() {
+    emit(EVENT_SCROLLED);
+  }
+  function computeDuration(distance) {
+    return max(distance / BASE_VELOCITY, MIN_DURATION);
+  }
+  function clear() {
+    if (interval) {
+      interval.cancel();
+    }
+  }
+  function cancel() {
+    if (interval && !interval.isPaused()) {
+      clear();
+      onScrolled();
     }
+  }
+  function easing(t) {
+    const { easingFunc } = options;
+    return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
+  }
+  return {
+    mount,
+    destroy: clear,
+    scroll,
+    cancel
   };
-  /**
-   * Listen to native and custom events.
-   */
-
-  function bind() {
-    Splide.on('click', function () {
-      Splide.go('<');
-    }, prev).on('click', function () {
-      Splide.go('>');
-    }, next).on('mounted move updated refresh', updateDisabled);
-  }
-  /**
-   * Update a disabled attribute.
-   */
-
-
-  function updateDisabled() {
-    var _Components$Controlle = Components.Controller,
-        prevIndex = _Components$Controlle.prevIndex,
-        nextIndex = _Components$Controlle.nextIndex;
-    var isEnough = Splide.length > Splide.options.perPage || Splide.is(LOOP);
-    prev.disabled = prevIndex < 0 || !isEnough;
-    next.disabled = nextIndex < 0 || !isEnough;
-    Splide.emit(name + ":updated", prev, next, prevIndex, nextIndex);
-  }
-  /**
-   * Create a wrapper element and append arrows.
-   */
-
-
-  function appendArrows() {
-    var wrapper = create('div', {
-      class: classes.arrows
-    });
-    append(wrapper, prev);
-    append(wrapper, next);
-    var slider = Elements.slider;
-    var parent = Splide.options.arrows === 'slider' && slider ? slider : root;
-    before(wrapper, parent.firstElementChild);
-  }
-  /**
-   * Create an arrow element.
-   *
-   * @param {boolean} prev - Determine to create a prev arrow or next arrow.
-   *
-   * @return {Element} - A created arrow element.
-   */
-
+}
 
-  function createArrow(prev) {
-    var arrow = "<button class=\"" + classes.arrow + " " + (prev ? classes.prev : classes.next) + "\" type=\"button\">" + ("<svg xmlns=\"" + XML_NAME_SPACE + "\"\tviewBox=\"0 0 " + SIZE + " " + SIZE + "\"\twidth=\"" + SIZE + "\"\theight=\"" + SIZE + "\">") + ("<path d=\"" + (Splide.options.arrowPath || PATH) + "\" />");
-    return domify(arrow);
+const FRICTION = 5;
+const LOG_INTERVAL = 50;
+const POINTER_DOWN_EVENTS = "touchstart mousedown";
+const POINTER_MOVE_EVENTS = "touchmove mousemove";
+const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+
+function Drag(Splide2, Components2, options) {
+  const { on, emit, bind, unbind } = EventInterface(Splide2);
+  const { Move, Scroll, Controller } = Components2;
+  const { track } = Components2.Elements;
+  const { resolve, orient } = Components2.Direction;
+  const { getPosition, exceededLimit } = Move;
+  const isSlide = Splide2.is(SLIDE);
+  const isFade = Splide2.is(FADE);
+  let basePosition;
+  let baseEvent;
+  let prevBaseEvent;
+  let lastEvent;
+  let isFree;
+  let isDragging;
+  let isMouse;
+  let hasExceeded = false;
+  let clickPrevented;
+  let disabled;
+  let target;
+  function mount() {
+    bind(track, POINTER_DOWN_EVENTS, onPointerDown, { passive: false, capture: true });
+    bind(track, "click", onClick, { capture: true });
+    on([EVENT_MOUNTED, EVENT_UPDATED], init);
   }
-
-  return Arrows;
-};
-/**
- * The component for handling pagination
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The event name for updating some attributes of pagination nodes.
- *
- * @type {string}
- */
-
-
-var ATTRIBUTES_UPDATE_EVENT = 'move.page';
-/**
- * The event name for recreating pagination.
- *
- * @type {string}
- */
-
-var UPDATE_EVENT = 'updated.page refresh.page';
-/**
- * The component for handling pagination
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var Pagination = function Pagination(Splide, Components, name) {
-  /**
-   * Store all data for pagination.
-   * - list: A list element.
-   * - items: An array that contains objects(li, button, index, page).
-   *
-   * @type {Object}
-   */
-  var data = {};
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Pagination component object.
-   *
-   * @type {Object}
-   */
-
-  var Pagination = {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var pagination = Splide.options.pagination;
-
-      if (pagination) {
-        data = createPagination();
-        var slider = Elements.slider;
-        var parent = pagination === 'slider' && slider ? slider : Splide.root;
-        append(parent, data.list);
-        Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes);
+  function init() {
+    const { drag } = options;
+    disable(!drag);
+    isFree = drag === "free";
+  }
+  function onPointerDown(e) {
+    if (!disabled) {
+      isMouse = e.type === "mousedown";
+      if (!isMouse || !e.button) {
+        if (!Move.isBusy()) {
+          target = isMouse ? window : track;
+          prevBaseEvent = null;
+          lastEvent = null;
+          clickPrevented = false;
+          bind(target, POINTER_MOVE_EVENTS, onPointerMove);
+          bind(target, POINTER_UP_EVENTS, onPointerUp);
+          Move.cancel();
+          Scroll.cancel();
+          save(e);
+        } else {
+          prevent(e, true);
+        }
       }
-
-      Splide.off(UPDATE_EVENT).on(UPDATE_EVENT, function () {
-        Pagination.destroy();
-
-        if (Splide.options.pagination) {
-          Pagination.mount();
-          Pagination.mounted();
+    }
+  }
+  function onPointerMove(e) {
+    if (!lastEvent) {
+      clickPrevented = true;
+      emit(EVENT_DRAG);
+    }
+    lastEvent = e;
+    if (e.cancelable) {
+      if (isDragging) {
+        const expired = timeOf(e) - timeOf(baseEvent) > LOG_INTERVAL;
+        const exceeded = hasExceeded !== (hasExceeded = exceededLimit());
+        if (expired || exceeded) {
+          save(e);
+        }
+        if (!isFade) {
+          Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
+        }
+        emit(EVENT_DRAGGING);
+        prevent(e);
+      } else {
+        const threshold = options.dragMinThreshold || 15;
+        isDragging = isMouse || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
+        if (isSliderDirection()) {
+          prevent(e);
         }
-      });
-    },
-
-    /**
-     * Called after all components are mounted.
-     */
-    mounted: function mounted() {
-      if (Splide.options.pagination) {
-        var index = Splide.index;
-        Splide.emit(name + ":mounted", data, this.getItem(index));
-        updateAttributes(index, -1);
       }
-    },
-
-    /**
-     * Destroy the pagination.
-     * Be aware that node.remove() is not supported by IE.
-     */
-    destroy: function destroy() {
-      _remove(data.list);
-
-      if (data.items) {
-        data.items.forEach(function (item) {
-          Splide.off('click', item.button);
-        });
-      } // Do not remove UPDATE_EVENT to recreate pagination if needed.
-
-
-      Splide.off(ATTRIBUTES_UPDATE_EVENT);
-      data = {};
-    },
-
-    /**
-     * Return an item by index.
-     *
-     * @param {number} index - A slide index.
-     *
-     * @return {Object|undefined} - An item object on success or undefined on failure.
-     */
-    getItem: function getItem(index) {
-      return data.items[Components.Controller.toPage(index)];
-    },
-
-    /**
-     * Return object containing pagination data.
-     *
-     * @return {Object} - Pagination data including list and items.
-     */
-    get data() {
-      return data;
     }
-
-  };
-  /**
-   * Update attributes.
-   *
-   * @param {number} index     - Active index.
-   * @param {number} prevIndex - Prev index.
-   */
-
-  function updateAttributes(index, prevIndex) {
-    var prev = Pagination.getItem(prevIndex);
-    var curr = Pagination.getItem(index);
-    var active = STATUS_CLASSES.active;
-
-    if (prev) {
-      removeClass(prev.button, active);
+  }
+  function onPointerUp(e) {
+    unbind(target, `${POINTER_MOVE_EVENTS} ${POINTER_UP_EVENTS}`);
+    if (lastEvent) {
+      if (isDragging || e.cancelable && isSliderDirection()) {
+        const velocity = computeVelocity(e);
+        const destination = computeDestination(velocity);
+        if (isFree) {
+          Scroll.scroll(destination);
+        } else if (isFade) {
+          Controller.go(Splide2.index + orient(sign(velocity)));
+        } else {
+          Controller.go(computeIndex(destination), true);
+        }
+        prevent(e);
+      }
+      emit(EVENT_DRAGGED);
     }
-
-    if (curr) {
-      addClass(curr.button, active);
+    isDragging = false;
+  }
+  function save(e) {
+    prevBaseEvent = baseEvent;
+    baseEvent = e;
+    basePosition = getPosition();
+  }
+  function onClick(e) {
+    if (!disabled && clickPrevented) {
+      prevent(e, true);
     }
-
-    Splide.emit(name + ":updated", data, prev, curr);
   }
-  /**
-   * Create a wrapper and button elements.
-   *
-   * @return {Object} - An object contains all data.
-   */
-
-
-  function createPagination() {
-    var options = Splide.options;
-    var classes = Splide.classes;
-    var list = create('ul', {
-      class: classes.pagination
-    });
-    var items = Elements.getSlides(false).filter(function (Slide) {
-      return options.focus !== false || Slide.index % options.perPage === 0;
-    }).map(function (Slide, page) {
-      var li = create('li', {});
-      var button = create('button', {
-        class: classes.page,
-        type: 'button'
-      });
-      append(li, button);
-      append(list, li);
-      Splide.on('click', function () {
-        Splide.go(">" + page);
-      }, button);
-      return {
-        li: li,
-        button: button,
-        page: page,
-        Slides: Elements.getSlidesByPage(page)
-      };
-    });
-    return {
-      list: list,
-      items: items
-    };
+  function isSliderDirection() {
+    const diffX = abs(coordOf(lastEvent) - coordOf(baseEvent));
+    const diffY = abs(coordOf(lastEvent, true) - coordOf(baseEvent, true));
+    return diffX > diffY;
   }
-
-  return Pagination;
-};
-/**
- * The component for loading slider images lazily.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The name for a data attribute of src.
- *
- * @type {string}
- */
-
-
-var SRC_DATA_NAME = 'data-splide-lazy';
-/**
- * The name for a data attribute of srcset.
- *
- * @type {string}
- */
-
-var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
-/**
- * The component for loading slider images lazily.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- * @param {string} name       - A component name as a lowercase string.
- *
- * @return {Object} - The component object.
- */
-
-var LazyLoad = function LazyLoad(Splide, Components, name) {
-  /**
-   * Next index for sequential loading.
-   *
-   * @type {number}
-   */
-  var nextIndex;
-  /**
-   * Store objects containing an img element and a Slide object.
-   *
-   * @type {Object[]}
-   */
-
-  var images;
-  /**
-   * Store the options.
-   *
-   * @type {Object}
-   */
-
-  var options = Splide.options;
-  /**
-   * Whether to load images sequentially or not.
-   *
-   * @type {boolean}
-   */
-
-  var isSequential = options.lazyLoad === 'sequential';
-  /**
-   * Lazyload component object.
-   *
-   * @type {Object}
-   */
-
-  var Lazyload = {
-    /**
-     * Mount only when the lazyload option is provided.
-     *
-     * @type {boolean}
-     */
-    required: options.lazyLoad,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('mounted refresh', function () {
-        init();
-        Components.Elements.each(function (Slide) {
-          each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "], [" + SRCSET_DATA_NAME + "]"), function (img) {
-            if (!img.src && !img.srcset) {
-              images.push({
-                img: img,
-                Slide: Slide
-              });
-              applyStyle(img, {
-                display: 'none'
-              });
-            }
-          });
-        });
-
-        if (isSequential) {
-          loadNext();
-        }
-      });
-
-      if (!isSequential) {
-        Splide.on("mounted refresh moved." + name, check);
+  function computeVelocity(e) {
+    if (Splide2.is(LOOP) || !hasExceeded) {
+      const base = baseEvent === lastEvent && prevBaseEvent || baseEvent;
+      const diffCoord = coordOf(lastEvent) - coordOf(base);
+      const diffTime = timeOf(e) - timeOf(base);
+      const isFlick = timeOf(e) - timeOf(lastEvent) < LOG_INTERVAL;
+      if (diffTime && isFlick) {
+        return diffCoord / diffTime;
       }
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: init
+    }
+    return 0;
+  }
+  function computeDestination(velocity) {
+    return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));
+  }
+  function computeIndex(destination) {
+    const dest = Move.toIndex(destination);
+    return isSlide ? clamp(dest, 0, Controller.getEnd()) : dest;
+  }
+  function coordOf(e, orthogonal) {
+    const prop = `page${resolve(orthogonal ? "Y" : "X")}`;
+    return (isMouse ? e : e.touches[0])[prop];
+  }
+  function timeOf(e) {
+    return e.timeStamp;
+  }
+  function constrain(diff) {
+    return diff / (hasExceeded && isSlide ? FRICTION : 1);
+  }
+  function disable(value) {
+    disabled = value;
+  }
+  return {
+    mount,
+    disable
   };
-  /**
-   * Initialize parameters.
-   */
+}
 
+const IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
+function Keyboard(Splide2, Components2, options) {
+  const { on, bind, unbind } = EventInterface(Splide2);
+  const { root } = Components2.Elements;
+  const { resolve } = Components2.Direction;
+  let target;
+  function mount() {
+    init();
+    on(EVENT_UPDATED, () => {
+      destroy();
+      init();
+    });
+  }
   function init() {
-    images = [];
-    nextIndex = 0;
-  }
-  /**
-   * Check how close each image is from the active slide and
-   * determine whether to start loading or not, according to the distance.
-   *
-   * @param {number} index - Current index.
-   */
-
-
-  function check(index) {
-    index = isNaN(index) ? Splide.index : index;
-    images = images.filter(function (image) {
-      if (image.Slide.isWithin(index, options.perPage * (options.preloadPages + 1))) {
-        load(image.img, image.Slide);
-        return false;
+    const { keyboard = "global" } = options;
+    if (keyboard) {
+      if (keyboard === "focused") {
+        target = root;
+        setAttribute(root, TAB_INDEX, 0);
+      } else {
+        target = window;
       }
-
-      return true;
-    }); // Unbind if all images are loaded.
-
-    if (!images[0]) {
-      Splide.off("moved." + name);
+      bind(target, "keydown", onKeydown);
     }
   }
-  /**
-   * Start loading an image.
-   * Creating a clone of the image element since setting src attribute directly to it
-   * often occurs 'hitch', blocking some other processes of a browser.
-   *
-   * @param {Element} img   - An image element.
-   * @param {Object}  Slide - A Slide object.
-   */
-
-
-  function load(img, Slide) {
-    addClass(Slide.slide, STATUS_CLASSES.loading);
-    var spinner = create('span', {
-      class: Splide.classes.spinner
-    });
-    append(img.parentElement, spinner);
-
-    img.onload = function () {
-      loaded(img, spinner, Slide, false);
-    };
-
-    img.onerror = function () {
-      loaded(img, spinner, Slide, true);
-    };
-
-    setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_NAME) || '');
-    setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME) || '');
+  function destroy() {
+    unbind(target, "keydown");
+    if (isHTMLElement(target)) {
+      removeAttribute(target, TAB_INDEX);
+    }
   }
-  /**
-   * Start loading a next image in images array.
-   */
-
-
-  function loadNext() {
-    if (nextIndex < images.length) {
-      var image = images[nextIndex];
-      load(image.img, image.Slide);
+  function onKeydown(e) {
+    const { key } = e;
+    const normalizedKey = includes(IE_ARROW_KEYS, key) ? `Arrow${key}` : key;
+    if (normalizedKey === resolve("ArrowLeft")) {
+      Splide2.go("<");
+    } else if (normalizedKey === resolve("ArrowRight")) {
+      Splide2.go(">");
     }
+  }
+  return {
+    mount,
+    destroy
+  };
+}
 
-    nextIndex++;
-  }
-  /**
-   * Called just after the image was loaded or loading was aborted by some error.
-   *
-   * @param {Element} img     - An image element.
-   * @param {Element} spinner - A spinner element.
-   * @param {Object}  Slide   - A Slide object.
-   * @param {boolean} error   - True if the image was loaded successfully or false on error.
-   */
-
-
-  function loaded(img, spinner, Slide, error) {
-    removeClass(Slide.slide, STATUS_CLASSES.loading);
-
-    if (!error) {
-      _remove(spinner);
-
-      applyStyle(img, {
-        display: ''
+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) {
+  const { on, off, bind, emit } = EventInterface(Splide2);
+  const isSequential = options.lazyLoad === "sequential";
+  let images = [];
+  let index = 0;
+  function mount() {
+    if (options.lazyLoad) {
+      on([EVENT_MOUNTED, EVENT_REFRESH], () => {
+        destroy();
+        init();
       });
-      Splide.emit(name + ":loaded", img).emit('resize');
+      if (!isSequential) {
+        on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED], observe);
+      }
     }
-
+  }
+  function init() {
+    Components2.Slides.forEach((_Slide) => {
+      queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => {
+        const src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
+        const srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
+        if (src !== _img.src || srcset !== _img.srcset) {
+          const _spinner = create("span", options.classes.spinner, _img.parentElement);
+          setAttribute(_spinner, ROLE, "presentation");
+          images.push({ _img, _Slide, src, srcset, _spinner });
+          display(_img, "none");
+        }
+      });
+    });
     if (isSequential) {
       loadNext();
     }
   }
-
-  return Lazyload;
-};
-/**
- * Export aria attribute names.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Attribute name for aria-current.
- *
- * @type {string}
- */
-
-
-var ARIA_CURRENRT = 'aria-current';
-/**
- * Attribute name for aria-control.
- *
- * @type {string}
- */
-
-var ARIA_CONTROLS = 'aria-controls';
-/**
- * Attribute name for aria-control.
- *
- * @type {string}
- */
-
-var ARIA_LABEL = 'aria-label';
-/**
- * Attribute name for aria-hidden.
- *
- * @type {string}
- */
-
-var ARIA_HIDDEN = 'aria-hidden';
-/**
- * Attribute name for tab-index.
- *
- * @type {string}
- */
-
-var TAB_INDEX = 'tabindex';
-/**
- * The component for controlling slides via keyboard.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Map a key to a slide control.
- *
- * @type {Object}
- */
-
-var KEY_MAP = {
-  ltr: {
-    ArrowLeft: '<',
-    ArrowRight: '>',
-    // For IE.
-    Left: '<',
-    Right: '>'
-  },
-  rtl: {
-    ArrowLeft: '>',
-    ArrowRight: '<',
-    // For IE.
-    Left: '>',
-    Right: '<'
-  },
-  ttb: {
-    ArrowUp: '<',
-    ArrowDown: '>',
-    // For IE.
-    Up: '<',
-    Down: '>'
+  function destroy() {
+    index = 0;
+    images = [];
   }
-};
-/**
- * The component for controlling slides via keyboard.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-var Keyboard = function Keyboard(Splide) {
-  /**
-   * Hold the target element.
-   *
-   * @type {Element|Document|undefined}
-   */
-  var target;
-  return {
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('mounted updated', function () {
-        var options = Splide.options;
-        var root = Splide.root;
-        var map = KEY_MAP[options.direction];
-        var keyboard = options.keyboard;
-
-        if (target) {
-          Splide.off('keydown', target);
-          removeAttribute(root, TAB_INDEX);
-        }
-
-        if (keyboard) {
-          if (keyboard === 'focused') {
-            target = root;
-            setAttribute(root, TAB_INDEX, 0);
-          } else {
-            target = document;
-          }
-
-          Splide.on('keydown', function (e) {
-            if (map[e.key]) {
-              Splide.go(map[e.key]);
-            }
-          }, target);
-        }
-      });
+  function observe() {
+    images = images.filter((data) => {
+      if (data._Slide.isWithin(Splide2.index, options.perPage * ((options.preloadPages || 1) + 1))) {
+        return load(data);
+      }
+      return true;
+    });
+    if (!images.length) {
+      off(EVENT_MOVED);
+    }
+  }
+  function load(data) {
+    const { _img } = data;
+    addClass(data._Slide.slide, CLASS_LOADING);
+    bind(_img, "load error", (e) => {
+      onLoad(data, e.type === "error");
+    });
+    ["src", "srcset"].forEach((name) => {
+      if (data[name]) {
+        setAttribute(_img, name, data[name]);
+        removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
+      }
+    });
+  }
+  function onLoad(data, error) {
+    const { _Slide } = data;
+    removeClass(_Slide.slide, CLASS_LOADING);
+    if (!error) {
+      remove(data._spinner);
+      display(data._img, "");
+      emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
+      emit(EVENT_RESIZE);
+    }
+    if (isSequential) {
+      loadNext();
+    }
+  }
+  function loadNext() {
+    if (index < images.length) {
+      load(images[index++]);
     }
+  }
+  return {
+    mount,
+    destroy
   };
-};
-/**
- * The component for enhancing accessibility.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The component for enhancing accessibility.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
-
-
-var A11y = function A11y(Splide, Components) {
-  /**
-   * Hold a i18n object.
-   *
-   * @type {Object}
-   */
-  var i18n = Splide.i18n;
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * All attributes related with A11y.
-   *
-   * @type {string[]}
-   */
-
-  var allAttributes = [ARIA_HIDDEN, TAB_INDEX, ARIA_CONTROLS, ARIA_LABEL, ARIA_CURRENRT, 'role'];
-  /**
-   * A11y component object.
-   *
-   * @type {Object}
-   */
-
-  var A11y = {
-    /**
-     * Required only when the accessibility option is true.
-     *
-     * @type {boolean}
-     */
-    required: Splide.options.accessibility,
+}
 
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Splide.on('visible', function (Slide) {
-        updateSlide(Slide.slide, true);
-      }).on('hidden', function (Slide) {
-        updateSlide(Slide.slide, false);
-      }).on('arrows:mounted', initArrows).on('arrows:updated', updateArrows).on('pagination:mounted', initPagination).on('pagination:updated', updatePagination).on('refresh', function () {
-        removeAttribute(Components.Clones.clones, allAttributes);
+function Pagination(Splide2, Components2, options) {
+  const { on, emit, bind, unbind } = EventInterface(Splide2);
+  const { Slides, Elements, Controller } = Components2;
+  const { hasFocus, getIndex } = Controller;
+  const items = [];
+  let list;
+  function mount() {
+    init();
+    on([EVENT_UPDATED, EVENT_REFRESH], init);
+    on([EVENT_MOVE, EVENT_SCROLLED], update);
+  }
+  function init() {
+    destroy();
+    if (options.pagination && Slides.isEnough()) {
+      createPagination();
+      emit(EVENT_PAGINATION_MOUNTED, { list, items }, getAt(Splide2.index));
+      update();
+    }
+  }
+  function destroy() {
+    if (list) {
+      remove(list);
+      items.forEach((item) => {
+        unbind(item.button, "click");
       });
-
-      if (Splide.options.isNavigation) {
-        Splide.on('navigation:mounted navigation:updated', initNavigation).on('active', function (Slide) {
-          updateNavigation(Slide, true);
-        }).on('inactive', function (Slide) {
-          updateNavigation(Slide, false);
-        });
-      }
-
-      initAutoplay();
-    },
-
-    /**
-     * Destroy.
-     */
-    destroy: function destroy() {
-      var Arrows = Components.Arrows;
-      var arrows = Arrows ? Arrows.arrows : {};
-      removeAttribute(Elements.slides.concat([arrows.prev, arrows.next, Elements.play, Elements.pause]), allAttributes);
+      empty(items);
+      list = null;
+    }
+  }
+  function createPagination() {
+    const { length } = Splide2;
+    const { classes, i18n, perPage } = options;
+    const parent = options.pagination === "slider" && Elements.slider || Elements.root;
+    const max = hasFocus() ? length : ceil(length / perPage);
+    list = create("ul", classes.pagination, parent);
+    for (let i = 0; i < max; i++) {
+      const li = create("li", null, list);
+      const button = create("button", { class: classes.page, type: "button" }, li);
+      const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
+      const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
+      bind(button, "click", onClick.bind(null, i));
+      setAttribute(button, ARIA_CONTROLS, controls.join(" "));
+      setAttribute(button, ARIA_LABEL, format(text, i + 1));
+      items.push({ li, button, page: i });
+    }
+  }
+  function onClick(page) {
+    Controller.go(`>${page}`, true, () => {
+      const Slide = Slides.getAt(Controller.toIndex(page));
+      Slide && Slide.slide.focus();
+    });
+  }
+  function getAt(index) {
+    return items[Controller.toPage(index)];
+  }
+  function update() {
+    const prev = getAt(getIndex(true));
+    const curr = getAt(getIndex());
+    if (prev) {
+      removeClass(prev.button, CLASS_ACTIVE);
+      removeAttribute(prev.button, ARIA_CURRENT);
+    }
+    if (curr) {
+      addClass(curr.button, CLASS_ACTIVE);
+      setAttribute(curr.button, ARIA_CURRENT, true);
     }
+    emit(EVENT_PAGINATION_UPDATED, { list, items }, prev, curr);
+  }
+  return {
+    items,
+    mount,
+    destroy,
+    getAt
   };
-  /**
-   * Update slide attributes when it gets visible or hidden.
-   *
-   * @param {Element} slide   - A slide element.
-   * @param {Boolean} visible - True when the slide gets visible, or false when hidden.
-   */
-
-  function updateSlide(slide, visible) {
-    setAttribute(slide, ARIA_HIDDEN, !visible);
+}
 
-    if (Splide.options.slideFocus) {
-      setAttribute(slide, TAB_INDEX, visible ? 0 : -1);
+const TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
+function Sync(Splide2, Components2, options) {
+  const { splides } = Splide2;
+  const { list } = Components2.Elements;
+  function mount() {
+    if (options.isNavigation) {
+      navigate();
+    } else {
+      sync();
     }
   }
-  /**
-   * Initialize arrows if they are available.
-   * Append screen reader elements and add aria-controls attribute.
-   *
-   * @param {Element} prev - Previous arrow element.
-   * @param {Element} next - Next arrow element.
-   */
-
-
-  function initArrows(prev, next) {
-    var controls = Elements.track.id;
-    setAttribute(prev, ARIA_CONTROLS, controls);
-    setAttribute(next, ARIA_CONTROLS, controls);
-  }
-  /**
-   * Update arrow attributes.
-   *
-   * @param {Element} prev      - Previous arrow element.
-   * @param {Element} next      - Next arrow element.
-   * @param {number}  prevIndex - Previous slide index or -1 when there is no precede slide.
-   * @param {number}  nextIndex - Next slide index or -1 when there is no next slide.
-   */
-
-
-  function updateArrows(prev, next, prevIndex, nextIndex) {
-    var index = Splide.index;
-    var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
-    var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
-    setAttribute(prev, ARIA_LABEL, prevLabel);
-    setAttribute(next, ARIA_LABEL, nextLabel);
+  function destroy() {
+    removeAttribute(list, ALL_ATTRIBUTES);
   }
-  /**
-   * Initialize pagination if it's available.
-   * Append a screen reader element and add aria-controls/label attribute to each item.
-   *
-   * @param {Object} data       - Data object containing all items.
-   * @param {Object} activeItem - An initial active item.
-   */
-
-
-  function initPagination(data, activeItem) {
-    if (activeItem) {
-      setAttribute(activeItem.button, ARIA_CURRENRT, true);
-    }
-
-    data.items.forEach(function (item) {
-      var options = Splide.options;
-      var text = options.focus === false && options.perPage > 1 ? i18n.pageX : i18n.slideX;
-      var label = sprintf(text, item.page + 1);
-      var button = item.button;
-      var controls = item.Slides.map(function (Slide) {
-        return Slide.slide.id;
+  function sync() {
+    const processed = [];
+    splides.concat(Splide2).forEach((splide, index, instances) => {
+      EventInterface(splide).on(EVENT_MOVE, (index2, prev, dest) => {
+        instances.forEach((instance) => {
+          if (instance !== splide && !includes(processed, splide)) {
+            processed.push(instance);
+            instance.go(instance.is(LOOP) ? dest : index2);
+          }
+        });
+        empty(processed);
       });
-      setAttribute(button, ARIA_CONTROLS, controls.join(' '));
-      setAttribute(button, ARIA_LABEL, label);
     });
   }
-  /**
-   * Update pagination attributes.
-   *
-   * @param {Object}  data - Data object containing all items.
-   * @param {Element} prev - A previous active element.
-   * @param {Element} curr - A current active element.
-   */
-
-
-  function updatePagination(data, prev, curr) {
-    if (prev) {
-      removeAttribute(prev.button, ARIA_CURRENRT);
+  function navigate() {
+    const { on, emit } = EventInterface(Splide2);
+    on(EVENT_CLICK, onClick);
+    on(EVENT_SLIDE_KEYDOWN, onKeydown);
+    on([EVENT_MOUNTED, EVENT_UPDATED], update);
+    setAttribute(list, ROLE, "menu");
+    emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+  }
+  function update() {
+    setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
+  }
+  function onClick(Slide) {
+    Splide2.go(Slide.index);
+  }
+  function onKeydown(Slide, e) {
+    if (includes(TRIGGER_KEYS, e.key)) {
+      onClick(Slide);
+      prevent(e);
     }
+  }
+  return {
+    mount,
+    destroy
+  };
+}
 
-    if (curr) {
-      setAttribute(curr.button, ARIA_CURRENRT, true);
+function Wheel(Splide2, Components2, options) {
+  const { bind } = EventInterface(Splide2);
+  function mount() {
+    if (options.wheel) {
+      bind(Components2.Elements.track, "wheel", onWheel, { passive: false, capture: true });
+    }
+  }
+  function onWheel(e) {
+    const { deltaY } = e;
+    if (deltaY) {
+      Splide2.go(deltaY < 0 ? "<" : ">");
+      prevent(e);
     }
   }
-  /**
-   * Initialize autoplay buttons.
-   */
+  return {
+    mount
+  };
+}
 
+var ComponentConstructors = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Options: Options,
+  Direction: Direction,
+  Elements: Elements,
+  Style: Style$1,
+  Slides: Slides,
+  Clones: Clones,
+  Layout: Layout,
+  Move: Move,
+  Controller: Controller,
+  Arrows: Arrows,
+  Autoplay: Autoplay,
+  Cover: Cover,
+  Scroll: Scroll,
+  Drag: Drag,
+  Keyboard: Keyboard,
+  LazyLoad: LazyLoad,
+  Pagination: Pagination,
+  Sync: Sync,
+  Wheel: Wheel
+});
 
-  function initAutoplay() {
-    ['play', 'pause'].forEach(function (name) {
-      var elm = Elements[name];
+const I18N = {
+  prev: "Previous slide",
+  next: "Next slide",
+  first: "Go to first slide",
+  last: "Go to last slide",
+  slideX: "Go to slide %s",
+  pageX: "Go to page %s",
+  play: "Start autoplay",
+  pause: "Pause autoplay"
+};
 
-      if (elm) {
-        if (!isButton(elm)) {
-          setAttribute(elm, 'role', 'button');
-        }
+const DEFAULTS = {
+  type: "slide",
+  speed: 400,
+  waitForTransition: true,
+  perPage: 1,
+  arrows: true,
+  pagination: true,
+  interval: 5e3,
+  pauseOnHover: true,
+  pauseOnFocus: true,
+  resetProgress: true,
+  easing: "cubic-bezier(.42,.65,.27,.99)",
+  drag: true,
+  direction: "ltr",
+  slideFocus: true,
+  trimSpace: true,
+  focusableNodes: "a, button, textarea, input, select, iframe",
+  classes: CLASSES,
+  i18n: I18N
+};
 
-        setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
-        setAttribute(elm, ARIA_LABEL, i18n[name]);
-      }
+function Fade(Splide2, Components2, options) {
+  const { on } = EventInterface(Splide2);
+  const { ruleBy } = Components2.Style;
+  function mount() {
+    on([EVENT_MOUNTED, EVENT_REFRESH], () => {
+      nextTick(() => {
+        Components2.Slides.forEach((Slide) => {
+          ruleBy(Slide.slide, "transition", `opacity ${options.speed}ms ${options.easing}`);
+        });
+      });
     });
   }
-  /**
-   * Initialize navigation slider.
-   * Add button role, aria-label, aria-controls to slide elements and append screen reader text to them.
-   *
-   * @param {Splide} main - A main Splide instance.
-   */
-
-
-  function initNavigation(main) {
-    Elements.each(function (Slide) {
-      var slide = Slide.slide;
-      var realIndex = Slide.realIndex;
-
-      if (!isButton(slide)) {
-        setAttribute(slide, 'role', 'button');
-      }
-
-      var slideIndex = realIndex > -1 ? realIndex : Slide.index;
-      var label = sprintf(i18n.slideX, slideIndex + 1);
-      var mainSlide = main.Components.Elements.getSlide(slideIndex);
-      setAttribute(slide, ARIA_LABEL, label);
+  function start(index, done) {
+    const { track } = Components2.Elements;
+    ruleBy(track, "height", unit(rect(track).height));
+    nextTick(() => {
+      done();
+      ruleBy(track, "height", "");
+    });
+  }
+  return {
+    mount,
+    start,
+    cancel: noop
+  };
+}
 
-      if (mainSlide) {
-        setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
+function Slide(Splide2, Components2, options) {
+  const { bind } = EventInterface(Splide2);
+  const { Move, Controller } = Components2;
+  const { list } = Components2.Elements;
+  let endCallback;
+  function mount() {
+    bind(list, "transitionend", (e) => {
+      if (e.target === list && endCallback) {
+        cancel();
+        endCallback();
       }
     });
   }
-  /**
-   * Update navigation attributes.
-   *
-   * @param {Object}  Slide  - A target Slide object.
-   * @param {boolean} active - True if the slide is active or false if inactive.
-   */
-
-
-  function updateNavigation(_ref6, active) {
-    var slide = _ref6.slide;
-
-    if (active) {
-      setAttribute(slide, ARIA_CURRENRT, true);
+  function start(index, done) {
+    const destination = Move.toPosition(index, true);
+    const position = Move.getPosition();
+    const speed = getSpeed(index);
+    if (abs(destination - position) >= 1 && speed >= 1) {
+      apply(`transform ${speed}ms ${options.easing}`);
+      Move.translate(destination, true);
+      endCallback = done;
     } else {
-      removeAttribute(slide, ARIA_CURRENRT);
+      Move.jump(index);
+      done();
     }
   }
-  /**
-   * Check if the given element is button or not.
-   *
-   * @param {Element} elm - An element to be checked.
-   *
-   * @return {boolean} - True if the given element is button.
-   */
-
-
-  function isButton(elm) {
-    return elm.tagName === 'BUTTON';
+  function cancel() {
+    apply("");
   }
-
-  return A11y;
-};
-/**
- * The component for synchronizing a slider with another.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * The event name for sync.
- *
- * @type {string}
- */
-
-
-var SYNC_EVENT = 'move.sync';
-/**
- * The event names for click navigation.
- * @type {string}
- */
-
-var CLICK_EVENTS = 'mouseup touchend';
-/**
- * The keys for triggering the navigation button.
- *
- * @type {String[]}
- */
-
-var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
-/**
- * The component for synchronizing a slider with another.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-var Sync = function Sync(Splide) {
-  /**
-   * Keep the sibling Splide instance.
-   *
-   * @type {Splide}
-   */
-  var sibling = Splide.sibling;
-  /**
-   * Whether the sibling slider is navigation or not.
-   *
-   * @type {Splide|boolean}
-   */
-
-  var isNavigation = sibling && sibling.options.isNavigation;
-  /**
-   * Layout component object.
-   *
-   * @type {Object}
-   */
-
-  var Sync = {
-    /**
-     * Required only when the sub slider is available.
-     *
-     * @type {boolean}
-     */
-    required: !!sibling,
-
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      syncMain();
-      syncSibling();
-
-      if (isNavigation) {
-        bind();
-        Splide.on('refresh', function () {
-          setTimeout(function () {
-            bind();
-            sibling.emit('navigation:updated', Splide);
-          });
-        });
-      }
-    },
-
-    /**
-     * Called after all components are mounted.
-     */
-    mounted: function mounted() {
-      if (isNavigation) {
-        sibling.emit('navigation:mounted', Splide);
+  function getSpeed(index) {
+    const { rewindSpeed } = options;
+    if (Splide2.is(SLIDE) && rewindSpeed) {
+      const prev = Controller.getIndex(true);
+      const end = Controller.getEnd();
+      if (prev === 0 && index >= end || prev >= end && index === 0) {
+        return rewindSpeed;
       }
     }
+    return options.speed;
+  }
+  function apply(transition) {
+    Components2.Style.ruleBy(list, "transition", transition);
+  }
+  return {
+    mount,
+    start,
+    cancel
   };
-  /**
-   * Listen the primary slider event to move secondary one.
-   * Must unbind a handler at first to avoid infinite loop.
-   */
+}
 
-  function syncMain() {
-    Splide.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
-      sibling.off(SYNC_EVENT).go(sibling.is(LOOP) ? destIndex : newIndex, false);
-      syncSibling();
+const _Splide = class {
+  constructor(target, options) {
+    this.event = EventBus();
+    this.Components = {};
+    this.state = State(CREATED);
+    this.splides = [];
+    this._options = {};
+    this._Extensions = {};
+    const root = isString(target) ? query(document, target) : target;
+    assert(root, `${root} is invalid.`);
+    this.root = root;
+    merge(DEFAULTS, _Splide.defaults);
+    merge(merge(this._options, DEFAULTS), options || {});
+  }
+  mount(Extensions, Transition) {
+    const { state, Components: Components2 } = this;
+    assert(state.is([CREATED, DESTROYED]), "Already mounted!");
+    state.set(CREATED);
+    this._Components = Components2;
+    this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
+    this._Extensions = Extensions || this._Extensions;
+    const Constructors = assign({}, ComponentConstructors, this._Extensions, { Transition: this._Transition });
+    forOwn(Constructors, (Component, key) => {
+      const component = Component(this, Components2, this._options);
+      Components2[key] = component;
+      component.setup && component.setup();
     });
-  }
-  /**
-   * Listen the secondary slider event to move primary one.
-   * Must unbind a handler at first to avoid infinite loop.
-   */
-
-
-  function syncSibling() {
-    sibling.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
-      Splide.off(SYNC_EVENT).go(Splide.is(LOOP) ? destIndex : newIndex, false);
-      syncMain();
+    forOwn(Components2, (component) => {
+      component.mount && component.mount();
     });
+    this.emit(EVENT_MOUNTED);
+    addClass(this.root, CLASS_INITIALIZED);
+    state.set(IDLE);
+    this.emit(EVENT_READY);
+    return this;
   }
-  /**
-   * Listen some events on each slide.
-   */
-
-
-  function bind() {
-    sibling.Components.Elements.each(function (_ref7) {
-      var slide = _ref7.slide,
-          index = _ref7.index;
-
-      /*
-       * Listen mouseup and touchend events to handle click.
-       */
-      Splide.off(CLICK_EVENTS, slide).on(CLICK_EVENTS, function (e) {
-        // Ignore a middle or right click.
-        if (!e.button || e.button === 0) {
-          moveSibling(index);
-        }
-      }, slide);
-      /*
-       * Subscribe keyup to handle Enter and Space key.
-       * Note that Array.includes is not supported by IE.
-       */
-
-      Splide.off('keyup', slide).on('keyup', function (e) {
-        if (TRIGGER_KEYS.indexOf(e.key) > -1) {
-          e.preventDefault();
-          moveSibling(index);
-        }
-      }, slide, {
-        passive: false
+  sync(splide) {
+    this.splides.push(splide);
+    splide.splides.push(this);
+    return this;
+  }
+  go(control) {
+    this._Components.Controller.go(control);
+    return this;
+  }
+  on(events, callback) {
+    this.event.on(events, callback, null, DEFAULT_USER_EVENT_PRIORITY);
+    return this;
+  }
+  off(events) {
+    this.event.off(events);
+    return this;
+  }
+  emit(event) {
+    this.event.emit(event, ...slice(arguments, 1));
+    return this;
+  }
+  add(slides, index) {
+    this._Components.Slides.add(slides, index);
+    return this;
+  }
+  remove(matcher) {
+    this._Components.Slides.remove(matcher);
+    return this;
+  }
+  is(type) {
+    return this._options.type === type;
+  }
+  refresh() {
+    this.emit(EVENT_REFRESH);
+    return this;
+  }
+  destroy(completely = true) {
+    const { event, state } = this;
+    if (state.is(CREATED)) {
+      event.on(EVENT_READY, this.destroy.bind(this, completely), this);
+    } else {
+      forOwn(this._Components, (component) => {
+        component.destroy && component.destroy(completely);
       });
-    });
+      event.emit(EVENT_DESTROY);
+      event.destroy();
+      empty(this.splides);
+      state.set(DESTROYED);
+    }
+    return this;
   }
-  /**
-   * Move the sibling to the given index.
-   * Need to check "IDLE" status because slides can be moving by Drag component.
-   *
-   * @param {number} index - Target index.
-   */
-
-
-  function moveSibling(index) {
-    if (Splide.State.is(IDLE)) {
-      sibling.go(index);
+  get options() {
+    return this._options;
+  }
+  set options(options) {
+    const { _options } = this;
+    merge(_options, options);
+    if (!this.state.is(CREATED)) {
+      this.emit(EVENT_UPDATED, _options);
     }
   }
-
-  return Sync;
+  get length() {
+    return this._Components.Slides.getLength(true);
+  }
+  get index() {
+    return this._Components.Controller.getIndex();
+  }
 };
-/**
- * The component for updating options according to a current window width.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Interval time for throttle.
- *
- * @type {number}
- */
-
-
-var THROTTLE = 50;
-/**
- * The component for updating options according to a current window width.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
-
-var Breakpoints = function Breakpoints(Splide) {
-  /**
-   * Store breakpoints.
-   *
-   * @type {Object|boolean}
-   */
-  var breakpoints = Splide.options.breakpoints;
-  /**
-   * The check function whose frequency of call is reduced.
-   *
-   * @type {Function}
-   */
-
-  var throttledCheck = throttle(check, THROTTLE);
-  /**
-   * Keep initial options.
-   *
-   * @type {Object}
-   */
-
-  var initialOptions;
-  /**
-   * An array containing objects of point and MediaQueryList.
-   *
-   * @type {Object[]}
-   */
+let Splide = _Splide;
+Splide.defaults = {};
+Splide.STATES = STATES;
 
-  var map = [];
-  /**
-   * Hold the previous breakpoint.
-   *
-   * @type {number|undefined}
-   */
+const CLASS_RENDERED = "is-rendered";
 
-  var prevPoint;
-  /**
-   * Breakpoints component object.
-   *
-   * @type {Object}
-   */
-
-  var Breakpoints = {
-    /**
-     * Required only when the breakpoints definition is provided and browser supports matchMedia.
-     *
-     * @type {boolean}
-     */
-    required: breakpoints && matchMedia,
+const RENDERER_DEFAULT_CONFIG = {
+  listTag: "ul",
+  slideTag: "li"
+};
 
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      map = Object.keys(breakpoints).sort(function (n, m) {
-        return +n - +m;
-      }).map(function (point) {
-        return {
-          point: point,
-          mql: matchMedia("(max-width:" + point + "px)")
-        };
+class Style {
+  constructor(id, options) {
+    this.styles = {};
+    this.id = id;
+    this.options = options;
+  }
+  rule(selector, prop, value, breakpoint) {
+    breakpoint = breakpoint || "default";
+    const selectors = this.styles[breakpoint] = this.styles[breakpoint] || {};
+    const styles = selectors[selector] = selectors[selector] || {};
+    styles[prop] = value;
+  }
+  build() {
+    let css = "";
+    if (this.styles.default) {
+      css += this.buildSelectors(this.styles.default);
+    }
+    Object.keys(this.styles).sort((n, m) => this.options.mediaQuery === "min" ? +n - +m : +m - +n).forEach((breakpoint) => {
+      if (breakpoint !== "default") {
+        css += `@media screen and (max-width: ${breakpoint}px) {`;
+        css += this.buildSelectors(this.styles[breakpoint]);
+        css += `}`;
+      }
+    });
+    return css;
+  }
+  buildSelectors(selectors) {
+    let css = "";
+    forOwn(selectors, (styles, selector) => {
+      css += `#${this.id} ${selector} {`;
+      forOwn(styles, (value, prop) => {
+        if (value || value === 0) {
+          css += `${prop}: ${value};`;
+        }
       });
-      /*
-       * To keep monitoring resize event after destruction without "completely",
-       * use native addEventListener instead of Splide.on.
-       */
-
-      this.destroy(true);
-      addEventListener('resize', throttledCheck); // Keep initial options to apply them when no breakpoint matches.
-
-      initialOptions = Splide.options;
-      check();
-    },
+      css += "}";
+    });
+    return css;
+  }
+}
 
-    /**
-     * Destroy.
-     *
-     * @param {boolean} completely - Whether to destroy Splide completely.
-     */
-    destroy: function destroy(completely) {
-      if (completely) {
-        removeEventListener('resize', throttledCheck);
-      }
+class SplideRenderer {
+  constructor(contents, options, config, defaults) {
+    this.slides = [];
+    this.options = {};
+    this.breakpoints = [];
+    merge(DEFAULTS, defaults || {});
+    merge(merge(this.options, DEFAULTS), options || {});
+    this.contents = contents;
+    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);
+    assert(this.contents.length, "Provide at least 1 content.");
+    this.init();
+  }
+  static clean(splide) {
+    const { on } = EventInterface(splide);
+    const { root } = splide;
+    const clones = queryAll(root, `.${CLASS_CLONE}`);
+    on(EVENT_MOUNTED, () => {
+      remove(child(root, "style"));
+    });
+    remove(clones);
+  }
+  init() {
+    this.parseBreakpoints();
+    this.initSlides();
+    this.registerRootStyles();
+    this.registerTrackStyles();
+    this.registerSlideStyles();
+    this.registerListStyles();
+  }
+  initSlides() {
+    push(this.slides, this.contents.map((content, index) => {
+      content = isString(content) ? { html: content } : content;
+      content.styles = content.styles || {};
+      content.attrs = content.attrs || {};
+      this.cover(content);
+      const classes = `${this.options.classes.slide} ${index === 0 ? CLASS_ACTIVE : ""}`;
+      assign(content.attrs, {
+        class: `${classes} ${content.attrs.class || ""}`.trim(),
+        style: this.buildStyles(content.styles)
+      });
+      return content;
+    }));
+    if (this.isLoop()) {
+      this.generateClones(this.slides);
     }
-  };
-  /**
-   * Check the breakpoint.
-   */
-
-  function check() {
-    var point = getPoint();
-
-    if (point !== prevPoint) {
-      prevPoint = point;
-      var _State = Splide.State;
-      var options = breakpoints[point] || initialOptions;
-      var destroy = options.destroy;
-
-      if (destroy) {
-        Splide.options = initialOptions;
-        Splide.destroy(destroy === 'completely');
+  }
+  registerRootStyles() {
+    this.breakpoints.forEach(([width, options]) => {
+      this.Style.rule(" ", "max-width", unit(options.width), width);
+    });
+  }
+  registerTrackStyles() {
+    const { Style: Style2 } = this;
+    const selector = `.${CLASS_TRACK}`;
+    this.breakpoints.forEach(([width, options]) => {
+      Style2.rule(selector, this.resolve("paddingLeft"), this.cssPadding(options, false), width);
+      Style2.rule(selector, this.resolve("paddingRight"), this.cssPadding(options, true), width);
+      Style2.rule(selector, "height", this.cssTrackHeight(options), width);
+    });
+  }
+  registerListStyles() {
+    const { Style: Style2 } = this;
+    const selector = `.${CLASS_LIST}`;
+    this.breakpoints.forEach(([width, options]) => {
+      Style2.rule(selector, "transform", this.buildTranslate(options), width);
+    });
+  }
+  registerSlideStyles() {
+    const { Style: Style2 } = this;
+    const selector = `.${CLASS_SLIDE}`;
+    this.breakpoints.forEach(([width, options]) => {
+      Style2.rule(selector, "width", this.cssSlideWidth(options), width);
+      Style2.rule(selector, this.resolve("marginRight"), unit(options.gap) || "0px", width);
+      const height = this.cssSlideHeight(options);
+      if (height) {
+        Style2.rule(selector, "height", height, width);
       } else {
-        if (_State.is(DESTROYED)) {
-          Splide.mount();
-        }
-
-        Splide.options = options;
+        Style2.rule(selector, "padding-top", this.cssSlidePadding(options), width);
       }
+      Style2.rule(`${selector} > img`, "display", options.cover ? "none" : "inline", width);
+    });
+  }
+  buildTranslate(options) {
+    const { resolve, orient } = this.Direction;
+    const values = [];
+    values.push(this.cssOffsetClones(options));
+    values.push(this.cssOffsetGaps(options));
+    if (this.isCenter(options)) {
+      values.push(this.buildCssValue(orient(-50), "%"));
+      values.push(...this.cssOffsetCenter(options));
+    }
+    return values.filter(Boolean).map((value) => `translate${resolve("X")}(${value})`).join(" ");
+  }
+  cssOffsetClones(options) {
+    const { resolve, orient } = this.Direction;
+    const cloneCount = this.getCloneCount();
+    if (this.isFixedWidth(options)) {
+      const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
+      return this.buildCssValue(orient(value) * cloneCount, unit2);
+    }
+    const percent = 100 * cloneCount / options.perPage;
+    return `${orient(percent)}%`;
+  }
+  cssOffsetCenter(options) {
+    const { resolve, orient } = this.Direction;
+    if (this.isFixedWidth(options)) {
+      const { value, unit: unit2 } = this.parseCssValue(options[resolve("fixedWidth")]);
+      return [this.buildCssValue(orient(value / 2), unit2)];
+    }
+    const values = [];
+    const { perPage, gap } = options;
+    values.push(`${orient(50 / perPage)}%`);
+    if (gap) {
+      const { value, unit: unit2 } = this.parseCssValue(gap);
+      const gapOffset = (value / perPage - value) / 2;
+      values.push(this.buildCssValue(orient(gapOffset), unit2));
+    }
+    return values;
+  }
+  cssOffsetGaps(options) {
+    const cloneCount = this.getCloneCount();
+    if (cloneCount && options.gap) {
+      const { orient } = this.Direction;
+      const { value, unit: unit2 } = this.parseCssValue(options.gap);
+      if (this.isFixedWidth(options)) {
+        return this.buildCssValue(orient(value * cloneCount), unit2);
+      }
+      const { perPage } = options;
+      const gaps = cloneCount / perPage;
+      return this.buildCssValue(orient(gaps * value), unit2);
+    }
+    return "";
+  }
+  resolve(prop) {
+    return camelToKebab(this.Direction.resolve(prop));
+  }
+  cssPadding(options, right) {
+    const { padding } = options;
+    const prop = this.Direction.resolve(right ? "right" : "left", true);
+    return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
+  }
+  cssTrackHeight(options) {
+    let height = "";
+    if (this.isVertical()) {
+      height = this.cssHeight(options);
+      assert(height, '"height" is missing.');
+      height = `calc(${height} - ${this.cssPadding(options, false)} - ${this.cssPadding(options, true)})`;
+    }
+    return height;
+  }
+  cssHeight(options) {
+    return unit(options.height);
+  }
+  cssSlideWidth(options) {
+    return options.autoWidth ? "" : unit(options.fixedWidth) || (this.isVertical() ? "" : this.cssSlideSize(options));
+  }
+  cssSlideHeight(options) {
+    return unit(options.fixedHeight) || (this.isVertical() ? options.autoHeight ? "" : this.cssSlideSize(options) : this.cssHeight(options));
+  }
+  cssSlideSize(options) {
+    const gap = unit(options.gap);
+    return `calc((100%${gap && ` + ${gap}`})/${options.perPage || 1}${gap && ` - ${gap}`})`;
+  }
+  cssSlidePadding(options) {
+    const { heightRatio } = options;
+    return heightRatio ? `${heightRatio * 100}%` : "";
+  }
+  buildCssValue(value, unit2) {
+    return `${value}${unit2}`;
+  }
+  parseCssValue(value) {
+    if (isString(value)) {
+      const number = parseFloat(value) || 0;
+      const unit2 = value.replace(/\d*(\.\d*)?/, "") || "px";
+      return { value: number, unit: unit2 };
+    }
+    return { value, unit: "px" };
+  }
+  parseBreakpoints() {
+    const { breakpoints } = this.options;
+    this.breakpoints.push(["default", this.options]);
+    if (breakpoints) {
+      forOwn(breakpoints, (options, width) => {
+        this.breakpoints.push([width, merge(merge({}, this.options), options)]);
+      });
     }
   }
-  /**
-   * Return the breakpoint matching current window width.
-   * Note that Array.prototype.find is not supported by IE.
-   *
-   * @return {number|string} - A breakpoint as number or string. -1 if no point matches.
-   */
-
-
-  function getPoint() {
-    var item = map.filter(function (item) {
-      return item.mql.matches;
-    })[0];
-    return item ? item.point : -1;
+  isFixedWidth(options) {
+    return !!options[this.Direction.resolve("fixedWidth")];
   }
-
-  return Breakpoints;
-};
-/**
- * Export components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-var COMPLETE = {
-  Options: Options,
-  Breakpoints: Breakpoints,
-  Controller: Controller,
-  Elements: Elements,
-  Track: Track,
-  Clones: Clones,
-  Layout: Layout,
-  Drag: Drag,
-  Click: Click,
-  Autoplay: Autoplay,
-  Cover: Cover,
-  Arrows: Arrows,
-  Pagination: Pagination,
-  LazyLoad: LazyLoad,
-  Keyboard: Keyboard,
-  Sync: Sync,
-  A11y: A11y
-};
-/**
- * Exports the Splide class with all components.
- *
- * @since 1.0.0
- */
-
-var Splide = /*#__PURE__*/function (_Splide$) {
-  _inheritsLoose(Splide, _Splide$);
-
-  function Splide(root, options) {
-    return _Splide$.call(this, root, options, COMPLETE) || this;
+  isLoop() {
+    return this.options.type === LOOP;
   }
+  isCenter(options) {
+    if (options.focus === "center") {
+      if (this.isLoop()) {
+        return true;
+      }
+      if (this.options.type === SLIDE) {
+        return !this.options.trimSpace;
+      }
+    }
+    return false;
+  }
+  isVertical() {
+    return this.options.direction === TTB;
+  }
+  buildClasses() {
+    const { options } = this;
+    return [
+      CLASS_ROOT,
+      `${CLASS_ROOT}--${options.type}`,
+      `${CLASS_ROOT}--${options.direction}`,
+      options.drag && `${CLASS_ROOT}--draggable`,
+      options.isNavigation && `${CLASS_ROOT}--nav`,
+      CLASS_ACTIVE,
+      !this.config.hidden && CLASS_RENDERED
+    ].filter(Boolean).join(" ");
+  }
+  buildAttrs(attrs) {
+    let attr = "";
+    forOwn(attrs, (value, key) => {
+      attr += value ? ` ${camelToKebab(key)}="${value}"` : "";
+    });
+    return attr.trim();
+  }
+  buildStyles(styles) {
+    let style = "";
+    forOwn(styles, (value, key) => {
+      style += ` ${camelToKebab(key)}:${value};`;
+    });
+    return style.trim();
+  }
+  renderSlides() {
+    const { slideTag: tag } = this.config;
+    return this.slides.map((content) => {
+      return `<${tag} ${this.buildAttrs(content.attrs)}>${content.html || ""}</${tag}>`;
+    }).join("");
+  }
+  cover(content) {
+    const { styles, html = "" } = content;
+    if (this.options.cover && !this.options.lazyLoad) {
+      const src = html.match(/<img.*?src\s*=\s*(['"])(.+?)\1.*?>/);
+      if (src && src[2]) {
+        styles.background = `center/cover no-repeat url('${src[2]}')`;
+      }
+    }
+  }
+  generateClones(contents) {
+    const { classes } = this.options;
+    const count = this.getCloneCount();
+    const slides = contents.slice();
+    while (slides.length < count) {
+      push(slides, slides);
+    }
+    push(slides.slice(-count).reverse(), slides.slice(0, count)).forEach((content, index) => {
+      const attrs = assign({}, content.attrs, { class: `${content.attrs.class} ${classes.clone}` });
+      const clone = assign({}, content, { attrs });
+      index < count ? contents.unshift(clone) : contents.push(clone);
+    });
+  }
+  getCloneCount() {
+    if (this.isLoop()) {
+      const { options } = this;
+      if (options.clones) {
+        return options.clones;
+      }
+      const perPage = max(...this.breakpoints.map(([, options2]) => options2.perPage));
+      return perPage * ((options.flickMaxPages || 1) + 1);
+    }
+    return 0;
+  }
+  renderArrows() {
+    let html = "";
+    html += `<div class="${this.options.classes.arrows}">`;
+    html += this.renderArrow(true);
+    html += this.renderArrow(false);
+    html += `</div>`;
+    return html;
+  }
+  renderArrow(prev) {
+    const { classes, i18n } = this.options;
+    const attrs = {
+      class: `${classes.arrow} ${prev ? classes.prev : classes.next}`,
+      type: "button",
+      ariaLabel: prev ? i18n.prev : i18n.next
+    };
+    return `<button ${this.buildAttrs(attrs)}><svg xmlns="${XML_NAME_SPACE}" viewBox="0 0 ${SIZE} ${SIZE}" width="${SIZE}" height="${SIZE}"><path d="${this.options.arrowPath || PATH}" /></svg></button>`;
+  }
+  html() {
+    const { rootClass, listTag, arrows, beforeTrack, afterTrack, slider, beforeSlider, afterSlider } = this.config;
+    let html = "";
+    html += `<div id="${this.id}" class="${this.buildClasses()} ${rootClass || ""}">`;
+    html += `<style>${this.Style.build()}</style>`;
+    if (slider) {
+      html += beforeSlider || "";
+      html += `<div class="splide__slider">`;
+    }
+    html += beforeTrack || "";
+    if (arrows) {
+      html += this.renderArrows();
+    }
+    html += `<div class="splide__track">`;
+    html += `<${listTag} class="splide__list">`;
+    html += this.renderSlides();
+    html += `</${listTag}>`;
+    html += `</div>`;
+    html += afterTrack || "";
+    if (slider) {
+      html += `</div>`;
+      html += afterSlider || "";
+    }
+    html += `</div>`;
+    return html;
+  }
+}
 
-  return Splide;
-}(Splide$1);
-
-export { Splide, Splide as default };
+export { CLASSES, CLASS_ACTIVE, CLASS_ARROW, CLASS_ARROWS, CLASS_ARROW_NEXT, CLASS_ARROW_PREV, CLASS_AUTOPLAY, CLASS_CLONE, CLASS_CONTAINER, CLASS_INITIALIZED, CLASS_LIST, CLASS_LOADING, CLASS_NEXT, CLASS_PAGINATION, CLASS_PAGINATION_PAGE, CLASS_PAUSE, CLASS_PLAY, CLASS_PREV, CLASS_PROGRESS, CLASS_PROGRESS_BAR, CLASS_ROOT, CLASS_SLIDE, CLASS_SLIDER, CLASS_SPINNER, CLASS_TRACK, CLASS_VISIBLE, 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_HIDDEN, EVENT_INACTIVE, EVENT_LAZYLOAD_LOADED, EVENT_MOUNTED, EVENT_MOVE, EVENT_MOVED, EVENT_NAVIGATION_MOUNTED, EVENT_PAGINATION_MOUNTED, EVENT_PAGINATION_UPDATED, EVENT_READY, EVENT_REFRESH, EVENT_REPOSITIONED, EVENT_RESIZE, EVENT_RESIZED, EVENT_SCROLL, EVENT_SCROLLED, EVENT_SLIDE_KEYDOWN, EVENT_UPDATED, EVENT_VISIBLE, EventBus, EventInterface, RequestInterval, STATUS_CLASSES, Splide, SplideRenderer, State, Throttle, Splide as default };

dist/js/splide.js

@@ -1,5741 +1,2949 @@
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /*!
  * Splide.js
- * Version  : 2.4.24
+ * Version  : 3.0.0
  * License  : MIT
- * Copyright: 2020 Naotoshi Fujita
+ * Copyright: 2021 Naotoshi Fujita
  */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Splide = factory());
 })(this, function () {
   'use strict';
-  /**
-   * The function for providing an Event object simply managing events.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The function for providing an Event object simply managing events.
-   */
-
-  var Event = function Event() {
-    /**
-     * Store all event data.
-     *
-     * @type {Array}
-     */
-    var data = [];
-    var Event = {
-      /**
-       * Subscribe the given event(s).
-       *
-       * @param {string}   events  - An event name. Use space to separate multiple events.
-       *                             Also, namespace is accepted by dot, such as 'resize.{namespace}'.
-       * @param {function} handler - A callback function.
-       * @param {Element}  elm     - Optional. Native event will be listened to when this arg is provided.
-       * @param {Object}   options - Optional. Options for addEventListener.
-       */
-      on: function on(events, handler, elm, options) {
-        if (elm === void 0) {
-          elm = null;
-        }
 
-        if (options === void 0) {
-          options = {};
-        }
+  var PROJECT_CODE = "splide";
+  var DATA_ATTRIBUTE = "data-" + PROJECT_CODE;
+  var CREATED = 1;
+  var MOUNTED = 2;
+  var IDLE = 3;
+  var MOVING = 4;
+  var DESTROYED = 5;
+  var STATES = {
+    CREATED: CREATED,
+    MOUNTED: MOUNTED,
+    IDLE: IDLE,
+    MOVING: MOVING,
+    DESTROYED: DESTROYED
+  };
+  var DEFAULT_EVENT_PRIORITY = 10;
+  var DEFAULT_USER_EVENT_PRIORITY = 20;
 
-        events.split(' ').forEach(function (event) {
-          if (elm) {
-            elm.addEventListener(event, handler, options);
-          }
+  function empty(array) {
+    array.length = 0;
+  }
 
-          data.push({
-            event: event,
-            handler: handler,
-            elm: elm,
-            options: options
-          });
-        });
-      },
+  function isObject(subject) {
+    return !isNull(subject) && typeof subject === "object";
+  }
 
-      /**
-       * Unsubscribe the given event(s).
-       *
-       * @param {string}  events - A event name or names split by space.
-       * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
-       */
-      off: function off(events, elm) {
-        if (elm === void 0) {
-          elm = null;
-        }
+  function isArray(subject) {
+    return Array.isArray(subject);
+  }
 
-        events.split(' ').forEach(function (event) {
-          data = data.filter(function (item) {
-            if (item && item.event === event && item.elm === elm) {
-              unsubscribe(item);
-              return false;
-            }
+  function isFunction(subject) {
+    return typeof subject === "function";
+  }
 
-            return true;
-          });
-        });
-      },
+  function isString(subject) {
+    return typeof subject === "string";
+  }
 
-      /**
-       * Emit an event.
-       * This method is only for custom events.
-       *
-       * @param {string}  event - An event name.
-       * @param {*}       args  - Any number of arguments passed to handlers.
-       */
-      emit: function emit(event) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
+  function isUndefined(subject) {
+    return typeof subject === "undefined";
+  }
 
-        data.forEach(function (item) {
-          if (!item.elm && item.event.split('.')[0] === event) {
-            item.handler.apply(item, args);
-          }
-        });
-      },
+  function isNull(subject) {
+    return subject === null;
+  }
 
-      /**
-       * Clear event data.
-       */
-      destroy: function destroy() {
-        data.forEach(unsubscribe);
-        data = [];
-      }
-    };
-    /**
-     * Remove the registered event listener.
-     *
-     * @param {Object} item - An object containing event data.
-     */
-
-    function unsubscribe(item) {
-      if (item.elm) {
-        item.elm.removeEventListener(item.event, item.handler, item.options);
-      }
-    }
+  function isHTMLElement(subject) {
+    return subject instanceof HTMLElement;
+  }
 
-    return Event;
-  };
-  /**
-   * The function providing a super simple state system.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The function providing a super simple state system.
-   *
-   * @param {string|number} initialState - Provide the initial state value.
-   */
-
-
-  var State = function State(initialState) {
-    /**
-     * Store the current state.
-     *
-     * @type {string|number}
-     */
-    var curr = initialState;
-    return {
-      /**
-       * Change state.
-       *
-       * @param {string|number} state - A new state.
-       */
-      set: function set(state) {
-        curr = state;
-      },
+  function toArray(value) {
+    return isArray(value) ? value : [value];
+  }
 
-      /**
-       * Verify if the current state is given one or not.
-       *
-       * @param {string|number} state - A state name to be verified.
-       *
-       * @return {boolean} - True if the current state is the given one.
-       */
-      is: function is(state) {
-        return state === curr;
-      }
-    };
-  };
-  /**
-   * Some utility functions related with Object, supporting IE.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-
-  var keys = Object.keys;
-  /**
-   * Iterate an object like Array.forEach.
-   * IE doesn't support forEach of HTMLCollection.
-   *
-   * @param {Object}    obj       - An object.
-   * @param {function}  callback  - A function handling each value. Arguments are value, property and index.
-   */
-
-  function each(obj, callback) {
-    keys(obj).some(function (key, index) {
-      return callback(obj[key], key, index);
-    });
+  function forEach(values, iteratee) {
+    toArray(values).forEach(iteratee);
   }
-  /**
-   * Return values of the given object as an array.
-   * IE doesn't support Object.values.
-   *
-   * @param {Object} obj - An object.
-   *
-   * @return {Array} - An array containing all values of the given object.
-   */
-
-
-  function values(obj) {
-    return keys(obj).map(function (key) {
-      return obj[key];
-    });
+
+  function includes(array, value) {
+    return array.indexOf(value) > -1;
+  }
+
+  function push(array, items) {
+    array.push.apply(array, toArray(items));
+    return array;
   }
-  /**
-   * Check if the given subject is object or not.
-   *
-   * @param {*} subject - A subject to be verified.
-   *
-   * @return {boolean} - True if object, false otherwise.
-   */
 
+  var arrayProto = Array.prototype;
 
-  function isObject(subject) {
-    return typeof subject === 'object';
+  function slice(arrayLike, start, end) {
+    return arrayProto.slice.call(arrayLike, start, end);
   }
-  /**
-   * Merge two objects deeply.
-   *
-   * @param {Object} to   - An object where "from" is merged.
-   * @param {Object} from - An object merged to "to".
-   *
-   * @return {Object} - A merged object.
-   */
-
-
-  function merge(_ref, from) {
-    var to = _extends({}, _ref);
-
-    each(from, function (value, key) {
-      if (isObject(value)) {
-        if (!isObject(to[key])) {
-          to[key] = {};
+
+  function find(arrayLike, predicate) {
+    return slice(arrayLike).filter(predicate)[0];
+  }
+
+  function toggleClass(elm, classes, add) {
+    if (elm) {
+      forEach(classes, function (name) {
+        if (name) {
+          elm.classList[add ? "add" : "remove"](name);
         }
+      });
+    }
+  }
 
-        to[key] = merge(to[key], value);
-      } else {
-        to[key] = value;
-      }
-    });
-    return to;
+  function addClass(elm, classes) {
+    toggleClass(elm, isString(classes) ? classes.split(" ") : classes, true);
   }
-  /**
-   * Assign all properties "from" to "to" object.
-   *
-   * @param {Object} to   - An object where properties are assigned.
-   * @param {Object} from - An object whose properties are assigned to "to".
-   *
-   * @return {Object} - An assigned object.
-   */
-
-
-  function assign(to, from) {
-    keys(from).forEach(function (key) {
-      if (!to[key]) {
-        Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
+
+  function append(parent, children) {
+    forEach(children, parent.appendChild.bind(parent));
+  }
+
+  function before(nodes, ref) {
+    forEach(nodes, function (node) {
+      var parent = ref.parentNode;
+
+      if (parent) {
+        parent.insertBefore(node, ref);
       }
     });
-    return to;
   }
-  /**
-   * A package of some miscellaneous utility functions.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Convert the given value to array.
-   *
-   * @param {*} value - Any value.
-   *
-   * @return {*[]} - Array containing the given value.
-   */
 
-
-  function toArray(value) {
-    return Array.isArray(value) ? value : [value];
+  function matches(elm, selector) {
+    return (elm["msMatchesSelector"] || elm.matches).call(elm, selector);
   }
-  /**
-   * Check if the given value is between min and max.
-   * Min will be returned when the value is less than min or max will do when greater than max.
-   *
-   * @param {number} value - A number to be checked.
-   * @param {number} m1    - Minimum or maximum number.
-   * @param {number} m2    - Maximum or minimum number.
-   *
-   * @return {number} - A value itself, min or max.
-   */
-
-
-  function between(value, m1, m2) {
-    return Math.min(Math.max(value, m1 > m2 ? m2 : m1), m1 > m2 ? m1 : m2);
+
+  function children(parent, selector) {
+    return parent ? slice(parent.children).filter(function (child) {
+      return matches(child, selector);
+    }) : [];
   }
-  /**
-   * The sprintf method with minimum functionality.
-   *
-   * @param {string}       format       - The string format.
-   * @param {string|Array} replacements - Replacements accepting multiple arguments.
-   *
-   * @returns {string} - Converted string.
-   */
-
-
-  function sprintf(format, replacements) {
-    var i = 0;
-    return format.replace(/%s/g, function () {
-      return toArray(replacements)[i++];
-    });
+
+  function child(parent, selector) {
+    return selector ? children(parent, selector)[0] : parent.firstElementChild;
   }
-  /**
-   * Append px unit to the given subject if necessary.
-   *
-   * @param {number|string} value - A value that may not include an unit.
-   *
-   * @return {string} - If the value is string, return itself.
-   *                    If number, do value + "px". An empty string, otherwise.
-   */
 
+  function forOwn(object, iteratee) {
+    if (object) {
+      var keys = Object.keys(object);
 
-  function unit(value) {
-    var type = typeof value;
+      for (var i = 0; i < keys.length; i++) {
+        var key = keys[i];
 
-    if (type === 'number' && value > 0) {
-      return parseFloat(value) + 'px';
+        if (key !== "__proto__") {
+          if (iteratee(object[key], key) === false) {
+            break;
+          }
+        }
+      }
     }
 
-    return type === 'string' ? value : '';
+    return object;
   }
-  /**
-   * Pad start with 0.
-   *
-   * @param {number} number - A number to be filled with 0.
-   *
-   * @return {string|number} - Padded number.
-   */
 
+  function assign(object) {
+    slice(arguments, 1).forEach(function (source) {
+      forOwn(source, function (value, key) {
+        object[key] = source[key];
+      });
+    });
+    return object;
+  }
 
-  function pad(number) {
-    return number < 10 ? '0' + number : number;
+  function merge(object, source) {
+    forOwn(source, function (value, key) {
+      if (isArray(value)) {
+        object[key] = value.slice();
+      } else if (isObject(value)) {
+        object[key] = merge(isObject(object[key]) ? object[key] : {}, value);
+      } else {
+        object[key] = value;
+      }
+    });
+    return object;
   }
-  /**
-   * Convert the given value to pixel.
-   *
-   * @param {Element}       root  - Root element where a dummy div is appended.
-   * @param {string|number} value - CSS value to be converted, such as 10rem.
-   *
-   * @return {number} - Pixel.
-   */
-
-
-  function toPixel(root, value) {
-    if (typeof value === 'string') {
-      var div = create('div', {});
-      applyStyle(div, {
-        position: 'absolute',
-        width: value
-      });
-      append(root, div);
-      value = div.clientWidth;
 
-      _remove(div);
+  function removeAttribute(elm, attrs) {
+    if (elm) {
+      forEach(attrs, function (attr) {
+        elm.removeAttribute(attr);
+      });
     }
-
-    return +value || 0;
-  }
-  /**
-   * Some utility functions related with DOM.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Find the first element matching the given selector.
-   * Be aware that all selectors after a space are ignored.
-   *
-   * @param {Element|Node}  elm       - An ancestor element.
-   * @param {string}        selector  - DOMString.
-   *
-   * @return {Element|null} - A found element or null.
-   */
-
-
-  function find(elm, selector) {
-    return elm ? elm.querySelector(selector.split(' ')[0]) : null;
   }
-  /**
-   * Find a first child having the given tag or class name.
-   *
-   * @param {Element} parent         - A parent element.
-   * @param {string}  tagOrClassName - A tag or class name.
-   *
-   * @return {Element|undefined} - A found element on success or undefined on failure.
-   */
-
-
-  function child(parent, tagOrClassName) {
-    return children(parent, tagOrClassName)[0];
-  }
-  /**
-   * Return chile elements that matches the provided tag or class name.
-   *
-   * @param {Element} parent         - A parent element.
-   * @param {string}  tagOrClassName - A tag or class name.
-   *
-   * @return {Element[]} - Found elements.
-   */
-
-
-  function children(parent, tagOrClassName) {
-    if (parent) {
-      return values(parent.children).filter(function (child) {
-        return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName === tagOrClassName;
+
+  function setAttribute(elm, attrs, value) {
+    if (isObject(attrs)) {
+      forOwn(attrs, function (value2, name) {
+        setAttribute(elm, name, value2);
       });
+    } else {
+      isNull(value) ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));
     }
-
-    return [];
   }
-  /**
-   * Create an element with some optional attributes.
-   *
-   * @param {string} tag   - A tag name.
-   * @param {Object} attrs - An object any attribute pairs of name and value.
-   *
-   * @return {Element} - A created element.
-   */
 
-
-  function create(tag, attrs) {
+  function create(tag, attrs, parent) {
     var elm = document.createElement(tag);
-    each(attrs, function (value, key) {
-      return setAttribute(elm, key, value);
-    });
+
+    if (attrs) {
+      isString(attrs) ? addClass(elm, attrs) : setAttribute(elm, attrs);
+    }
+
+    parent && append(parent, elm);
     return elm;
   }
-  /**
-   * Convert HTML string to DOM node.
-   *
-   * @param {string} html - HTML string.
-   *
-   * @return {Node} - A created node.
-   */
-
-
-  function domify(html) {
-    var div = create('div', {});
-    div.innerHTML = html;
-    return div.firstChild;
-  }
-  /**
-   * Remove a given element from a DOM tree.
-   *
-   * @param {Element|Element[]} elms - Element(s) to be removed.
-   */
-
-
-  function _remove(elms) {
-    toArray(elms).forEach(function (elm) {
-      if (elm) {
-        var parent = elm.parentElement;
-        parent && parent.removeChild(elm);
+
+  function style(elm, styles) {
+    if (isString(styles)) {
+      return getComputedStyle(elm)[styles];
+    }
+
+    forOwn(styles, function (value, key) {
+      if (!isNull(value)) {
+        elm.style[key] = "" + value;
       }
     });
   }
-  /**
-   * Append a child to a given element.
-   *
-   * @param {Element} parent - A parent element.
-   * @param {Element} child  - An element to be appended.
-   */
 
+  function display(elm, display2) {
+    style(elm, {
+      display: display2
+    });
+  }
 
-  function append(parent, child) {
-    if (parent) {
-      parent.appendChild(child);
-    }
+  function getAttribute(elm, attr) {
+    return elm.getAttribute(attr);
   }
-  /**
-   * Insert an element before the reference element.
-   *
-   * @param {Element|Node} ref - A reference element.
-   * @param {Element}      elm - An element to be inserted.
-   */
 
+  function hasClass(elm, className) {
+    return elm && elm.classList.contains(className);
+  }
 
-  function before(elm, ref) {
-    if (elm && ref) {
-      var parent = ref.parentElement;
-      parent && parent.insertBefore(elm, ref);
-    }
+  function rect(target) {
+    return target.getBoundingClientRect();
   }
-  /**
-   * Apply styles to the given element.
-   *
-   * @param {Element} elm     - An element where styles are applied.
-   * @param {Object}  styles  - Object containing styles.
-   */
 
+  function remove(nodes) {
+    forEach(nodes, function (node) {
+      if (node && node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    });
+  }
 
-  function applyStyle(elm, styles) {
-    if (elm) {
-      each(styles, function (value, prop) {
-        if (value !== null) {
-          elm.style[prop] = value;
-        }
-      });
+  function measure(parent, value) {
+    if (isString(value)) {
+      var div = create("div", {
+        style: "width: " + value + "; position: absolute;"
+      }, parent);
+      value = rect(div).width;
+      remove(div);
     }
+
+    return value;
   }
-  /**
-   * Add or remove classes to/from the element.
-   * This function is for internal usage.
-   *
-   * @param {Element}         elm     - An element where classes are added.
-   * @param {string|string[]} classes - Class names being added.
-   * @param {boolean}         remove  - Whether to remove or add classes.
-   */
 
+  function parseHtml(html) {
+    return child(new DOMParser().parseFromString(html, "text/html").body);
+  }
 
-  function addOrRemoveClasses(elm, classes, remove) {
-    if (elm) {
-      toArray(classes).forEach(function (name) {
-        if (name) {
-          elm.classList[remove ? 'remove' : 'add'](name);
-        }
-      });
+  function prevent(e, stopPropagation) {
+    e.preventDefault();
+
+    if (stopPropagation) {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
     }
   }
-  /**
-   * Add classes to the element.
-   *
-   * @param {Element}          elm     - An element where classes are added.
-   * @param {string|string[]}  classes - Class names being added.
-   */
 
-
-  function addClass(elm, classes) {
-    addOrRemoveClasses(elm, classes, false);
+  function query(parent, selector) {
+    return parent && parent.querySelector(selector);
   }
-  /**
-   * Remove a class from the element.
-   *
-   * @param {Element}         elm     - An element where classes are removed.
-   * @param {string|string[]} classes - A class name being removed.
-   */
 
+  function queryAll(parent, selector) {
+    return slice(parent.querySelectorAll(selector));
+  }
 
   function removeClass(elm, classes) {
-    addOrRemoveClasses(elm, classes, true);
+    toggleClass(elm, classes, false);
   }
-  /**
-   * Verify if the provided element has the class or not.
-   *
-   * @param {Element} elm       - An element.
-   * @param {string}  className - A class name.
-   *
-   * @return {boolean} - True if the element has the class or false if not.
-   */
-
 
-  function hasClass(elm, className) {
-    return !!elm && elm.classList.contains(className);
+  function unit(value) {
+    return isString(value) ? value : value ? value + "px" : "";
   }
-  /**
-   * Set attribute to the given element.
-   *
-   * @param {Element}                 elm   - An element where an attribute is assigned.
-   * @param {string}                  name  - Attribute name.
-   * @param {string|number|boolean}   value - Attribute value.
-   */
 
+  function assert(condition, message) {
+    if (message === void 0) {
+      message = "";
+    }
 
-  function setAttribute(elm, name, value) {
-    if (elm) {
-      elm.setAttribute(name, value);
+    if (!condition) {
+      throw new Error("[" + PROJECT_CODE + "] " + message);
     }
   }
-  /**
-   * Get attribute from the given element.
-   *
-   * @param {Element} elm  - An element where an attribute is assigned.
-   * @param {string}  name - Attribute name.
-   *
-   * @return {string} - The value of the given attribute if available. An empty string if not.
-   */
-
-
-  function getAttribute(elm, name) {
-    return elm ? elm.getAttribute(name) : '';
+
+  function nextTick(callback) {
+    setTimeout(callback);
   }
-  /**
-   * Remove attribute from the given element.
-   *
-   * @param {Element|Element[]} elms  - An element where an attribute is removed.
-   * @param {string|string[]}      names - Attribute name.
-   */
-
-
-  function removeAttribute(elms, names) {
-    toArray(names).forEach(function (name) {
-      toArray(elms).forEach(function (elm) {
-        return elm && elm.removeAttribute(name);
-      });
-    });
+
+  var noop = function noop() {};
+
+  function raf(func) {
+    return requestAnimationFrame(func);
   }
-  /**
-   * Return the Rect object of the provided object.
-   *
-   * @param {Element} elm - An element.
-   *
-   * @return {ClientRect|DOMRect} - A rect object.
-   */
 
+  var min = Math.min,
+      max = Math.max,
+      floor = Math.floor,
+      ceil = Math.ceil,
+      abs = Math.abs;
 
-  function getRect(elm) {
-    return elm.getBoundingClientRect();
+  function approximatelyEqual(x, y, epsilon) {
+    return abs(x - y) < epsilon;
   }
-  /**
-   * Trigger the given callback after all images contained by the element are loaded.
-   *
-   * @param {Element}  elm      - Element that may contain images.
-   * @param {Function} callback - Callback function fired right after all images are loaded.
-   */
-
-
-  function loaded(elm, callback) {
-    var images = elm.querySelectorAll('img');
-    var length = images.length;
-
-    if (length) {
-      var count = 0;
-      each(images, function (img) {
-        img.onload = img.onerror = function () {
-          if (++count === length) {
-            callback();
-          }
-        };
-      });
-    } else {
-      // Trigger the callback immediately if there is no image.
-      callback();
-    }
+
+  function between(number, minOrMax, maxOrMin, exclusive) {
+    var minimum = min(minOrMax, maxOrMin);
+    var maximum = max(minOrMax, maxOrMin);
+    return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum;
   }
-  /**
-   * Export slider types.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Normal slider.
-   *
-   * @type {string}
-   */
-
-
-  var SLIDE = 'slide';
-  /**
-   * Loop after the last slide and before the first one.
-   *
-   * @type {string}
-   */
-
-  var LOOP = 'loop';
-  /**
-   * The track doesn't move.
-   *
-   * @type {string}
-   */
-
-  var FADE = 'fade';
-  /**
-   * The component for general slide effect transition.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for general slide effect transition.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Slide$1 = function Slide$1(Splide, Components) {
-    /**
-     * Hold the list element.
-     *
-     * @type {Element}
-     */
-    var list;
-    /**
-     * Hold the onEnd callback function.
-     *
-     * @type {function}
-     */
 
-    var endCallback;
-    return {
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        list = Components.Elements.list;
-        Splide.on('transitionend', function (e) {
-          if (e.target === list && endCallback) {
-            endCallback();
-          }
-        }, list);
-      },
+  function clamp(number, x, y) {
+    var minimum = min(x, y);
+    var maximum = max(x, y);
+    return min(max(minimum, number), maximum);
+  }
 
-      /**
-       * Start transition.
-       *
-       * @param {number}   destIndex - Destination slide index that might be clone's.
-       * @param {number}   newIndex  - New index.
-       * @param {number}   prevIndex - Previous index.
-       * @param {Object}   coord     - Destination coordinates.
-       * @param {function} done      - Callback function must be invoked when transition is completed.
-       */
-      start: function start(destIndex, newIndex, prevIndex, coord, done) {
-        var options = Splide.options;
-        var edgeIndex = Components.Controller.edgeIndex;
-        var speed = options.speed;
-        endCallback = done;
+  function sign(x) {
+    return +(x > 0) - +(x < 0);
+  }
 
-        if (Splide.is(SLIDE)) {
-          if (prevIndex === 0 && newIndex >= edgeIndex || prevIndex >= edgeIndex && newIndex === 0) {
-            speed = options.rewindSpeed || speed;
-          }
-        }
+  function format(string, replacements) {
+    forEach(replacements, function (replacement) {
+      string = string.replace("%s", "" + replacement);
+    });
+    return string;
+  }
 
-        applyStyle(list, {
-          transition: "transform " + speed + "ms " + options.easing,
-          transform: "translate(" + coord.x + "px," + coord.y + "px)"
-        });
+  function pad(number) {
+    return number < 10 ? "0" + number : "" + number;
+  }
+
+  var ids = {};
+
+  function uniqueId(prefix) {
+    return "" + prefix + pad(ids[prefix] = (ids[prefix] || 0) + 1);
+  }
+
+  function EventBus() {
+    var handlers = {};
+
+    function on(events, callback, key, priority) {
+      if (priority === void 0) {
+        priority = DEFAULT_EVENT_PRIORITY;
       }
-    };
-  };
-  /**
-   * The component for fade transition.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for fade transition.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var Fade = function Fade(Splide, Components) {
-    var Fade = {
-      /**
-       * Called when the component is mounted.
-       * Apply transition style to the first slide.
-       */
-      mount: function mount() {
-        apply(Splide.index);
-      },
 
-      /**
-       * Start transition.
-       *
-       * @param {number}    destIndex - Destination slide index that might be clone's.
-       * @param {number}    newIndex  - New index.
-       * @param {number}    prevIndex - Previous index.
-       * @param {Object}    coord     - Destination coordinates.
-       * @param {function}  done      - Callback function must be invoked when transition is completed.
-       */
-      start: function start(destIndex, newIndex, prevIndex, coord, done) {
-        var track = Components.Elements.track;
-        applyStyle(track, {
-          height: unit(track.clientHeight)
-        });
-        apply(newIndex);
-        setTimeout(function () {
-          done();
-          applyStyle(track, {
-            height: ''
-          });
+      forEachEvent(events, function (event, namespace) {
+        handlers[event] = handlers[event] || [];
+        push(handlers[event], {
+          _event: event,
+          _callback: callback,
+          _namespace: namespace,
+          _priority: priority,
+          _key: key
+        }).sort(function (handler1, handler2) {
+          return handler1._priority - handler2._priority;
         });
-      }
-    };
-    /**
-     * Apply transition style to the slide specified by the given index.
-     *
-     * @param {number} index - A slide index.
-     */
-
-    function apply(index) {
-      var options = Splide.options;
-      applyStyle(Components.Elements.slides[index], {
-        transition: "opacity " + options.speed + "ms " + options.easing
       });
     }
 
-    return Fade;
-  };
-  /**
-   * Provide a function for composing components.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Compose components.
-   *
-   * @param {Splide}   Splide     - Splide instance.
-   * @param {Object}   Components - Additional components.
-   * @param {function} Transition - Change component for transition.
-   *
-   * @return {Object} - An object containing all components.
-   */
-
-
-  function compose(Splide, Components, Transition) {
-    var components = {};
-    each(Components, function (Component, name) {
-      components[name] = Component(Splide, components, name.toLowerCase());
-    });
-
-    if (!Transition) {
-      Transition = Splide.is(FADE) ? Fade : Slide$1;
+    function off(events, key) {
+      forEachEvent(events, function (event, namespace) {
+        var eventHandlers = handlers[event];
+        handlers[event] = eventHandlers && eventHandlers.filter(function (handler) {
+          return handler._key ? handler._key !== key : handler._namespace !== namespace;
+        });
+      });
     }
 
-    components.Transition = Transition(Splide, components);
-    return components;
-  }
-  /**
-   * Utility functions for outputting logs.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Prefix of an error massage.
-   *
-   * @type {string}
-   */
-
-
-  var MESSAGE_PREFIX = '[SPLIDE]';
-  /**
-   * Display an error message on the browser console.
-   *
-   * @param {string} message - An error message.
-   */
-
-  function error(message) {
-    console.error(MESSAGE_PREFIX + " " + message);
-  }
-  /**
-   * Check existence of the given object and throw an error if it doesn't.
-   *
-   * @throws {Error}
-   *
-   * @param {*}      subject - A subject to be confirmed.
-   * @param {string} message - An error message.
-   */
+    function offBy(key) {
+      forOwn(handlers, function (eventHandlers, event) {
+        off(event, key);
+      });
+    }
 
+    function emit(event) {
+      var _arguments = arguments;
+      (handlers[event] || []).forEach(function (handler) {
+        handler._callback.apply(handler, slice(_arguments, 1));
+      });
+    }
 
-  function exist(subject, message) {
-    if (!subject) {
-      throw new Error(message);
+    function destroy() {
+      handlers = {};
     }
-  }
-  /**
-   * Export class names.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * A root class name.
-   *
-   * @type {string}
-   */
-
-
-  var ROOT = 'splide';
-  /**
-   * The definition table of all classes for elements.
-   * They might be modified by options.
-   *
-   * @type {Object}
-   */
-
-  var ELEMENT_CLASSES = {
-    root: ROOT,
-    slider: ROOT + "__slider",
-    track: ROOT + "__track",
-    list: ROOT + "__list",
-    slide: ROOT + "__slide",
-    container: ROOT + "__slide__container",
-    arrows: ROOT + "__arrows",
-    arrow: ROOT + "__arrow",
-    prev: ROOT + "__arrow--prev",
-    next: ROOT + "__arrow--next",
-    pagination: ROOT + "__pagination",
-    page: ROOT + "__pagination__page",
-    clone: ROOT + "__slide--clone",
-    progress: ROOT + "__progress",
-    bar: ROOT + "__progress__bar",
-    autoplay: ROOT + "__autoplay",
-    play: ROOT + "__play",
-    pause: ROOT + "__pause",
-    spinner: ROOT + "__spinner",
-    sr: ROOT + "__sr"
-  };
-  /**
-   * Definitions of status classes.
-   *
-   * @type {Object}
-   */
-
-  var STATUS_CLASSES = {
-    active: 'is-active',
-    visible: 'is-visible',
-    loading: 'is-loading'
-  };
-  /**
-   * Export i18n texts as object.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Texts for i18n.
-   *
-   * @type {Object}
-   */
 
-  var I18N = {
-    prev: 'Previous slide',
-    next: 'Next slide',
-    first: 'Go to first slide',
-    last: 'Go to last slide',
-    slideX: 'Go to slide %s',
-    pageX: 'Go to page %s',
-    play: 'Start autoplay',
-    pause: 'Pause autoplay'
-  };
-  /**
-   * Export default options.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
+    function forEachEvent(events, iteratee) {
+      toArray(events).join(" ").split(" ").forEach(function (eventNS) {
+        var fragments = eventNS.split(".");
+        iteratee(fragments[0], fragments[1]);
+      });
+    }
 
-  var DEFAULTS = {
-    /**
-     * Determine a slider type.
-     * - 'slide': Regular slider.
-     * - 'loop' : Carousel slider.
-     * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
-     *
-     * @type {string}
-     */
-    type: 'slide',
-
-    /**
-     * Whether to rewind a slider before the first slide or after the last one.
-     * In "loop" mode, this option is ignored.
-     *
-     * @type {boolean}
-     */
-    rewind: false,
-
-    /**
-     * Transition speed in milliseconds.
-     *
-     * @type {number}
-     */
-    speed: 400,
+    return {
+      on: on,
+      off: off,
+      offBy: offBy,
+      emit: emit,
+      destroy: destroy
+    };
+  }
 
-    /**
-     * Transition speed on rewind in milliseconds.
-     *
-     * @type {number}
-     */
-    rewindSpeed: 0,
-
-    /**
-     * Whether to prevent any actions while a slider is transitioning.
-     * If false, navigation, drag and swipe work while the slider is running.
-     * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
-     *
-     * @type {boolean}
-     */
-    waitForTransition: true,
+  var EVENT_MOUNTED = "mounted";
+  var EVENT_READY = "ready";
+  var EVENT_MOVE = "move";
+  var EVENT_MOVED = "moved";
+  var EVENT_CLICK = "click";
+  var EVENT_ACTIVE = "active";
+  var EVENT_INACTIVE = "inactive";
+  var EVENT_VISIBLE = "visible";
+  var EVENT_HIDDEN = "hidden";
+  var EVENT_SLIDE_KEYDOWN = "slide:keydown";
+  var EVENT_REFRESH = "refresh";
+  var EVENT_UPDATED = "updated";
+  var EVENT_RESIZE = "resize";
+  var EVENT_RESIZED = "resized";
+  var EVENT_REPOSITIONED = "repositioned";
+  var EVENT_DRAG = "drag";
+  var EVENT_DRAGGING = "dragging";
+  var EVENT_DRAGGED = "dragged";
+  var EVENT_SCROLL = "scroll";
+  var EVENT_SCROLLED = "scrolled";
+  var EVENT_DESTROY = "destroy";
+  var EVENT_ARROWS_MOUNTED = "arrows:mounted";
+  var EVENT_ARROWS_UPDATED = "arrows:updated";
+  var EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+  var EVENT_PAGINATION_UPDATED = "pagination:updated";
+  var EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+  var EVENT_AUTOPLAY_PLAY = "autoplay:play";
+  var EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+  var EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+  var EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+
+  function EventInterface(Splide2) {
+    var event = Splide2.event;
+    var key = {};
+    var listeners = [];
+
+    function on(events, callback, priority) {
+      event.on(events, callback, key, priority);
+    }
+
+    function off(events) {
+      event.off(events, key);
+    }
+
+    function bind(targets, events, callback, options) {
+      forEachEvent(targets, events, function (target, event2) {
+        listeners.push([target, event2, callback, options]);
+        target.addEventListener(event2, callback, options);
+      });
+    }
 
-    /**
-     * Define slider max width.
-     *
-     * @type {number}
-     */
-    width: 0,
-
-    /**
-     * Define slider height.
-     *
-     * @type {number}
-     */
-    height: 0,
-
-    /**
-     * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
-     * perPage number will be ignored when this option is falsy.
-     *
-     * @type {number|string}
-     */
-    fixedWidth: 0,
-
-    /**
-     * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
-     * heightRatio option will be ignored when this option is falsy.
-     *
-     * @type {number|string}
-     */
-    fixedHeight: 0,
-
-    /**
-     * Determine height of slides by ratio to a slider width.
-     * This will be ignored when the fixedHeight is provided.
-     *
-     * @type {number}
-     */
-    heightRatio: 0,
-
-    /**
-     * If true, slide width will be determined by the element width itself.
-     * - perPage/perMove should be 1.
-     *
-     * @type {boolean}
-     */
-    autoWidth: false,
-
-    /**
-     * If true, slide height will be determined by the element width itself.
-     * - perPage/perMove should be 1.
-     *
-     * @type {boolean}
-     */
-    autoHeight: false,
-
-    /**
-     * Determine how many slides should be displayed per page.
-     *
-     * @type {number}
-     */
-    perPage: 1,
+    function unbind(targets, events) {
+      forEachEvent(targets, events, function (target, event2) {
+        listeners = listeners.filter(function (listener) {
+          if (listener[0] === target && listener[1] === event2) {
+            target.removeEventListener(event2, listener[2], listener[3]);
+            return false;
+          }
 
-    /**
-     * Determine how many slides should be moved when a slider goes to next or perv.
-     *
-     * @type {number}
-     */
-    perMove: 0,
-
-    /**
-     * Determine manually how many clones should be generated on the left and right side.
-     * The total number of clones will be twice of this number.
-     *
-     * @type {number}
-     */
-    clones: 0,
-
-    /**
-     * Start index.
-     *
-     * @type {number}
-     */
-    start: 0,
-
-    /**
-     * Determine which slide should be focused if there are multiple slides in a page.
-     * A string "center" is acceptable for centering slides.
-     *
-     * @type {boolean|number|string}
-     */
-    focus: false,
-
-    /**
-     * Gap between slides. CSS format is allowed such as 1em.
-     *
-     * @type {number|string}
-     */
-    gap: 0,
-
-    /**
-     * Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
-     * Give a single value to set a same size for both sides or
-     * do an object for different sizes.
-     * Also, CSS format is allowed such as 1em.
-     *
-     * @example
-     * - 10: Number
-     * - '1em': CSS format.
-     * - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
-     * - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
-     *
-     * @type {number|string|Object}
-     */
-    padding: 0,
-
-    /**
-     * Whether to append arrows.
-     *
-     * @type {boolean}
-     */
-    arrows: true,
+          return true;
+        });
+      });
+    }
 
-    /**
-     * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
-     *
-     * @type {string}
-     */
-    arrowPath: '',
-
-    /**
-     * Whether to append pagination(indicator dots) or not.
-     *
-     * @type {boolean}
-     */
-    pagination: true,
+    function forEachEvent(targets, events, iteratee) {
+      forEach(targets, function (target) {
+        if (target) {
+          events.split(" ").forEach(iteratee.bind(null, target));
+        }
+      });
+    }
 
-    /**
-     * Activate autoplay.
-     *
-     * @type {boolean}
-     */
-    autoplay: false,
-
-    /**
-     * Autoplay interval in milliseconds.
-     *
-     * @type {number}
-     */
-    interval: 5000,
-
-    /**
-     * Whether to stop autoplay when a slider is hovered.
-     *
-     * @type {boolean}
-     */
-    pauseOnHover: true,
+    function destroy() {
+      listeners = listeners.filter(function (data) {
+        return unbind(data[0], data[1]);
+      });
+      event.offBy(key);
+    }
 
-    /**
-     * Whether to stop autoplay when a slider elements are focused.
-     * True is recommended for accessibility.
-     *
-     * @type {boolean}
-     */
-    pauseOnFocus: true,
+    event.on(EVENT_DESTROY, destroy, key);
+    return {
+      on: on,
+      off: off,
+      emit: event.emit,
+      bind: bind,
+      unbind: unbind,
+      destroy: destroy
+    };
+  }
 
-    /**
-     * Whether to reset progress of the autoplay timer when resumed.
-     *
-     * @type {boolean}
-     */
-    resetProgress: true,
+  function RequestInterval(interval, onInterval, onUpdate, limit) {
+    var now = Date.now;
+    var startTime;
+    var rate = 0;
+    var id;
+    var paused = true;
+    var count = 0;
 
-    /**
-     * Loading images lazily.
-     * Image src must be provided by a data-splide-lazy attribute.
-     *
-     * - false: Do nothing.
-     * - 'nearby': Only images around an active slide will be loaded.
-     * - 'sequential': All images will be sequentially loaded.
-     *
-     * @type {boolean|string}
-     */
-    lazyLoad: false,
-
-    /**
-     * This option works only when a lazyLoad option is "nearby".
-     * Determine how many pages(not slides) around an active slide should be loaded beforehand.
-     *
-     * @type {number}
-     */
-    preloadPages: 1,
-
-    /**
-     * Easing for CSS transition. For example, linear, ease or cubic-bezier().
-     *
-     * @type {string}
-     */
-    easing: 'cubic-bezier(.42,.65,.27,.99)',
-
-    /**
-     * Whether to enable keyboard shortcuts
-     * - true or 'global': Listen to keydown event of the document.
-     * - 'focused': Listen to the keydown event of the slider root element. tabindex="0" will be added to the element.
-     * - false: Disable keyboard shortcuts.
-     *
-     * @type {boolean|string}
-     */
-    keyboard: 'global',
-
-    /**
-     * Whether to allow mouse drag and touch swipe.
-     *
-     * @type {boolean}
-     */
-    drag: true,
+    function update() {
+      if (!paused) {
+        var elapsed = now() - startTime;
 
-    /**
-     * The angle threshold for drag.
-     * The slider starts moving only when the drag angle is less than this threshold.
-     *
-     * @type {number}
-     */
-    dragAngleThreshold: 30,
-
-    /**
-     * Distance threshold for determining if the action is "flick" or "swipe".
-     * When a drag distance is over this value, the action will be treated as "swipe", not "flick".
-     *
-     * @type {number}
-     */
-    swipeDistanceThreshold: 150,
-
-    /**
-     * Velocity threshold for determining if the action is "flick" or "swipe".
-     * Around 0.5 is recommended.
-     *
-     * @type {number}
-     */
-    flickVelocityThreshold: .6,
-
-    /**
-     * Determine power of flick. The larger number this is, the farther a slider runs by flick.
-     * Around 500 is recommended.
-     *
-     * @type {number}
-     */
-    flickPower: 600,
-
-    /**
-     * Limit a number of pages to move by flick.
-     *
-     * @type {number}
-     */
-    flickMaxPages: 1,
-
-    /**
-     * Slider direction.
-     * - 'ltr': Left to right.
-     * - 'rtl': Right to left.
-     * - 'ttb': Top to bottom.
-     *
-     * @type {string}
-     */
-    direction: 'ltr',
-
-    /**
-     * Set img src to background-image of its parent element.
-     * Images with various sizes can be displayed as same dimension without cropping work.
-     * fixedHeight or heightRatio is required.
-     *
-     * @type {boolean}
-     */
-    cover: false,
-
-    /**
-     * Whether to enable accessibility(aria and screen reader texts) or not.
-     *
-     * @type {boolean}
-     */
-    accessibility: true,
-
-    /**
-     * Whether to add tabindex="0" to visible slides or not.
-     *
-     * @type {boolean}
-     */
-    slideFocus: true,
+        if (elapsed >= interval) {
+          rate = 1;
+          startTime = now();
+        } else {
+          rate = elapsed / interval;
+        }
 
-    /**
-     * Determine if a slider is navigation for another.
-     * Use "sync" API to synchronize two sliders.
-     *
-     * @type {boolean}
-     */
-    isNavigation: false,
-
-    /**
-     * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
-     *
-     * @type {boolean}
-     */
-    trimSpace: true,
+        if (onUpdate) {
+          onUpdate(rate);
+        }
 
-    /**
-     * The "is-active" class is added after transition as default.
-     * If true, it will be added before move.
-     *
-     * @type {boolean}
-     */
-    updateOnMove: false,
-
-    /**
-     * Throttle duration in milliseconds for the resize event.
-     *
-     * @type {number}
-     */
-    throttle: 100,
-
-    /**
-     * Whether to destroy a slider or not.
-     *
-     * @type {boolean}
-     */
-    destroy: false,
-
-    /**
-     * Options for specific breakpoints.
-     *
-     * @example
-     * {
-     *   1000: {
-     *     perPage: 3,
-     *     gap: 20
-     *   },
-     *   600: {
-     *     perPage: 1,
-     *     gap: 5,
-     *   }
-     * }
-     *
-     * @type {boolean|Object}
-     */
-    breakpoints: false,
-
-    /**
-     * Collection of class names.
-     *
-     * @see ./classes.js
-     *
-     * @type {Object}
-     */
-    classes: ELEMENT_CLASSES,
-
-    /**
-     * Collection of i18n texts.
-     *
-     * @see ./i18n.js
-     *
-     * @type {Object}
-     */
-    i18n: I18N
-  };
-  /**
-   * Export state constants.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Splide has been just created.
-   *
-   * @type {number}
-   */
+        if (rate === 1) {
+          onInterval();
 
-  var CREATED = 1;
-  /**
-   * All components have been mounted and initialized.
-   *
-   * @type {number}
-   */
+          if (limit && ++count >= limit) {
+            return pause();
+          }
+        }
 
-  var MOUNTED = 2;
-  /**
-   * Splide is ready for transition.
-   *
-   * @type {number}
-   */
+        raf(update);
+      }
+    }
 
-  var IDLE = 3;
-  /**
-   * Splide is moving.
-   *
-   * @type {number}
-   */
+    function start(resume) {
+      !resume && cancel();
+      startTime = now() - (resume ? rate * interval : 0);
+      paused = false;
+      raf(update);
+    }
 
-  var MOVING = 4;
-  /**
-   * Splide is moving.
-   *
-   * @type {number}
-   */
+    function pause() {
+      paused = true;
+    }
 
-  var DESTROYED = 5;
-  var STATES = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    CREATED: CREATED,
-    MOUNTED: MOUNTED,
-    IDLE: IDLE,
-    MOVING: MOVING,
-    DESTROYED: DESTROYED
-  });
-  /**
-   * The main class for applying Splide to an element.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The main class for applying Splide to an element,
-   * providing some APIs to control the behavior.
-   */
-
-  var Splide$1 = /*#__PURE__*/function () {
-    /**
-     * Splide constructor.
-     *
-     * @throws {Error} When the given root element or selector is invalid.
-     *
-     * @param {Element|string}  root       - A selector for a root element or an element itself.
-     * @param {Object}          options    - Optional. Options to change default behaviour.
-     * @param {Object}          Components - Optional. Components.
-     */
-    function Splide$1(root, options, Components) {
-      if (options === void 0) {
-        options = {};
-      }
+    function rewind() {
+      startTime = now();
+      rate = 0;
 
-      if (Components === void 0) {
-        Components = {};
+      if (onUpdate) {
+        onUpdate(rate);
       }
+    }
 
-      this.root = root instanceof Element ? root : document.querySelector(root);
-      exist(this.root, 'An invalid element/selector was given.');
-      this.Components = null;
-      this.Event = Event();
-      this.State = State(CREATED);
-      this.STATES = STATES;
-      this._o = merge(DEFAULTS, options);
-      this._i = 0;
-      this._c = Components;
-      this._e = {}; // Extensions
+    function cancel() {
+      cancelAnimationFrame(id);
+      rate = 0;
+      id = 0;
+      paused = true;
+    }
 
-      this._t = null; // Transition
+    function isPaused() {
+      return paused;
     }
-    /**
-     * Compose and mount components.
-     *
-     * @param {Object}   Extensions - Optional. Additional components.
-     * @param {function} Transition - Optional. Set a custom transition component.
-     *
-     * @return {Splide|undefined} - This instance or undefined if an exception occurred.
-     */
 
+    return {
+      start: start,
+      rewind: rewind,
+      pause: pause,
+      cancel: cancel,
+      isPaused: isPaused
+    };
+  }
 
-    var _proto = Splide$1.prototype;
+  function State(initialState) {
+    var state = initialState;
 
-    _proto.mount = function mount(Extensions, Transition) {
-      var _this = this;
+    function set(value) {
+      state = value;
+    }
 
-      if (Extensions === void 0) {
-        Extensions = this._e;
-      }
+    function is(states) {
+      return includes(toArray(states), state);
+    }
 
-      if (Transition === void 0) {
-        Transition = this._t;
-      }
+    return {
+      set: set,
+      is: is
+    };
+  }
 
-      // Reset the state.
-      this.State.set(CREATED);
-      this._e = Extensions;
-      this._t = Transition;
-      this.Components = compose(this, merge(this._c, Extensions), Transition);
+  function Throttle(func, duration) {
+    var interval;
+
+    function throttled() {
+      var _arguments2 = arguments,
+          _this = this;
+
+      if (!interval) {
+        interval = RequestInterval(duration || 0, function () {
+          func.apply(_this, _arguments2);
+          interval = null;
+        }, null, 1);
+        interval.start();
+      }
+    }
+
+    return throttled;
+  }
+
+  function Options(Splide2, Components2, options) {
+    var throttledObserve = Throttle(observe);
+    var initialOptions;
+    var points;
+    var currPoint;
 
+    function setup() {
       try {
-        each(this.Components, function (component, key) {
-          var required = component.required;
+        merge(options, JSON.parse(getAttribute(Splide2.root, DATA_ATTRIBUTE)));
+      } catch (e) {
+        assert(false, e.message);
+      }
 
-          if (required === undefined || required) {
-            component.mount && component.mount();
-          } else {
-            delete _this.Components[key];
-          }
+      initialOptions = merge({}, options);
+      var breakpoints = options.breakpoints;
+
+      if (breakpoints) {
+        var isMin = options.mediaQuery === "min";
+        points = Object.keys(breakpoints).sort(function (n, m) {
+          return isMin ? +m - +n : +n - +m;
+        }).map(function (point) {
+          return [point, matchMedia("(" + (isMin ? "min" : "max") + "-width:" + point + "px)")];
         });
-      } catch (e) {
-        error(e.message);
-        return;
+        observe();
       }
+    }
 
-      var State = this.State;
-      State.set(MOUNTED);
-      each(this.Components, function (component) {
-        component.mounted && component.mounted();
-      });
-      this.emit('mounted');
-      State.set(IDLE);
-      this.emit('ready');
-      applyStyle(this.root, {
-        visibility: 'visible'
-      });
-      this.on('move drag', function () {
-        return State.set(MOVING);
-      }).on('moved dragged', function () {
-        return State.set(IDLE);
-      });
-      return this;
+    function mount() {
+      if (points) {
+        addEventListener("resize", throttledObserve);
+      }
     }
-    /**
-     * Set sync target.
-     *
-     * @param {Splide} splide - A Splide instance.
-     *
-     * @return {Splide} - This instance.
-     */
-    ;
 
-    _proto.sync = function sync(splide) {
-      this.sibling = splide;
-      return this;
+    function destroy(completely) {
+      if (completely) {
+        removeEventListener("resize", throttledObserve);
+      }
     }
-    /**
-     * Register callback fired on the given event(s).
-     *
-     * @param {string}   events  - An event name. Use space to separate multiple events.
-     *                             Also, namespace is accepted by dot, such as 'resize.{namespace}'.
-     * @param {function} handler - A callback function.
-     * @param {Element}  elm     - Optional. Native event will be listened to when this arg is provided.
-     * @param {Object}   options - Optional. Options for addEventListener.
-     *
-     * @return {Splide} - This instance.
-     */
-    ;
-
-    _proto.on = function on(events, handler, elm, options) {
-      if (elm === void 0) {
-        elm = null;
+
+    function observe() {
+      var item = find(points, function (item2) {
+        return item2[1].matches;
+      }) || [];
+
+      if (item[0] !== currPoint) {
+        onMatch(currPoint = item[0]);
       }
+    }
+
+    function onMatch(point) {
+      var newOptions = options.breakpoints[point] || initialOptions;
+
+      if (newOptions.destroy) {
+        Splide2.options = initialOptions;
+        Splide2.destroy(newOptions.destroy === "completely");
+      } else {
+        if (Splide2.state.is(DESTROYED)) {
+          destroy(true);
+          Splide2.mount();
+        }
 
-      if (options === void 0) {
-        options = {};
+        Splide2.options = newOptions;
       }
+    }
 
-      this.Event.on(events, handler, elm, options);
-      return this;
+    return {
+      setup: setup,
+      mount: mount,
+      destroy: destroy
+    };
+  }
+
+  var RTL = "rtl";
+  var TTB = "ttb";
+  var ORIENTATION_MAP = {
+    marginRight: ["marginBottom", "marginLeft"],
+    autoWidth: ["autoHeight"],
+    fixedWidth: ["fixedHeight"],
+    paddingLeft: ["paddingTop", "paddingRight"],
+    paddingRight: ["paddingBottom", "paddingLeft"],
+    width: ["height"],
+    left: ["top", "right"],
+    right: ["bottom", "left"],
+    x: ["y"],
+    X: ["Y"],
+    Y: ["X"],
+    ArrowLeft: ["ArrowUp", "ArrowRight"],
+    ArrowRight: ["ArrowDown", "ArrowLeft"]
+  };
+
+  function Direction(Splide2, Components2, options) {
+    function resolve(prop, axisOnly) {
+      var direction = options.direction;
+      var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;
+      return ORIENTATION_MAP[prop][index] || prop;
     }
-    /**
-     * Unsubscribe the given event.
-     *
-     * @param {string}  events - A event name.
-     * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
-     *
-     * @return {Splide} - This instance.
-     */
-    ;
-
-    _proto.off = function off(events, elm) {
-      if (elm === void 0) {
-        elm = null;
-      }
 
-      this.Event.off(events, elm);
-      return this;
+    function orient(value) {
+      return value * (options.direction === RTL ? 1 : -1);
     }
-    /**
-     * Emit an event.
-     *
-     * @param {string} event - An event name.
-     * @param {*}      args  - Any number of arguments passed to handlers.
-     */
-    ;
 
-    _proto.emit = function emit(event) {
-      var _this$Event;
+    return {
+      resolve: resolve,
+      orient: orient
+    };
+  }
 
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
+  var CLASS_ROOT = PROJECT_CODE;
+  var CLASS_SLIDER = PROJECT_CODE + "__slider";
+  var CLASS_TRACK = PROJECT_CODE + "__track";
+  var CLASS_LIST = PROJECT_CODE + "__list";
+  var CLASS_SLIDE = PROJECT_CODE + "__slide";
+  var CLASS_CLONE = CLASS_SLIDE + "--clone";
+  var CLASS_CONTAINER = CLASS_SLIDE + "__container";
+  var CLASS_ARROWS = PROJECT_CODE + "__arrows";
+  var CLASS_ARROW = PROJECT_CODE + "__arrow";
+  var CLASS_ARROW_PREV = CLASS_ARROW + "--prev";
+  var CLASS_ARROW_NEXT = CLASS_ARROW + "--next";
+  var CLASS_PAGINATION = PROJECT_CODE + "__pagination";
+  var CLASS_PAGINATION_PAGE = CLASS_PAGINATION + "__page";
+  var CLASS_PROGRESS = PROJECT_CODE + "__progress";
+  var CLASS_PROGRESS_BAR = CLASS_PROGRESS + "__bar";
+  var CLASS_AUTOPLAY = PROJECT_CODE + "__autoplay";
+  var CLASS_PLAY = PROJECT_CODE + "__play";
+  var CLASS_PAUSE = PROJECT_CODE + "__pause";
+  var CLASS_SPINNER = PROJECT_CODE + "__spinner";
+  var CLASS_INITIALIZED = "is-initialized";
+  var CLASS_ACTIVE = "is-active";
+  var CLASS_PREV = "is-prev";
+  var CLASS_NEXT = "is-next";
+  var CLASS_VISIBLE = "is-visible";
+  var CLASS_LOADING = "is-loading";
+  var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING];
+  var CLASSES = {
+    slide: CLASS_SLIDE,
+    clone: CLASS_CLONE,
+    arrows: CLASS_ARROWS,
+    arrow: CLASS_ARROW,
+    prev: CLASS_ARROW_PREV,
+    next: CLASS_ARROW_NEXT,
+    pagination: CLASS_PAGINATION,
+    page: CLASS_PAGINATION_PAGE,
+    spinner: CLASS_SPINNER
+  };
 
-      (_this$Event = this.Event).emit.apply(_this$Event, [event].concat(args));
+  function Elements(Splide2, Components2, options) {
+    var _EventInterface = EventInterface(Splide2),
+        on = _EventInterface.on;
 
-      return this;
+    var root = Splide2.root;
+    var elements = {};
+    var slides = [];
+    var classes;
+    var slider;
+    var track;
+    var list;
+
+    function setup() {
+      collect();
+      identify();
+      addClass(root, classes = getClasses());
     }
-    /**
-     * Go to the slide specified by the given control.
-     *
-     * @param {string|number} control - A control pattern.
-     * @param {boolean}       wait    - Optional. Whether to wait for transition.
-     */
-    ;
-
-    _proto.go = function go(control, wait) {
-      if (wait === void 0) {
-        wait = this.options.waitForTransition;
-      }
 
-      if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
-        this.Components.Controller.go(control, false);
-      }
+    function mount() {
+      on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2);
+      on(EVENT_UPDATED, update);
+    }
 
-      return this;
+    function destroy() {
+      empty(slides);
+      removeClass(root, classes);
     }
-    /**
-     * Verify whether the slider type is the given one or not.
-     *
-     * @param {string} type - A slider type.
-     *
-     * @return {boolean} - True if the slider type is the provided type or false if not.
-     */
-    ;
 
-    _proto.is = function is(type) {
-      return type === this._o.type;
-    }
-    /**
-     * Insert a slide.
-     *
-     * @param {Element|string} slide - A slide element to be added.
-     * @param {number}         index - A slide will be added at the position.
-     */
-    ;
-
-    _proto.add = function add(slide, index) {
-      if (index === void 0) {
-        index = -1;
-      }
+    function refresh() {
+      destroy();
+      setup();
+    }
 
-      this.Components.Elements.add(slide, index, this.refresh.bind(this));
-      return this;
+    function update() {
+      removeClass(root, classes);
+      addClass(root, classes = getClasses());
     }
-    /**
-     * Remove the slide designated by the index.
-     *
-     * @param {number} index - A slide index.
-     */
-    ;
 
-    _proto.remove = function remove(index) {
-      this.Components.Elements.remove(index);
-      this.refresh();
-      return this;
+    function collect() {
+      slider = child(root, "." + CLASS_SLIDER);
+      track = query(root, "." + CLASS_TRACK);
+      list = child(track, "." + CLASS_LIST);
+      assert(track && list, "A track/list element is missing.");
+      push(slides, children(list, "." + CLASS_SLIDE + ":not(." + CLASS_CLONE + ")"));
+      var autoplay = find("." + CLASS_AUTOPLAY);
+      var arrows = find("." + CLASS_ARROWS);
+      assign(elements, {
+        root: root,
+        slider: slider,
+        track: track,
+        list: list,
+        slides: slides,
+        arrows: arrows,
+        autoplay: autoplay,
+        prev: query(arrows, "." + CLASS_ARROW_PREV),
+        next: query(arrows, "." + CLASS_ARROW_NEXT),
+        bar: query(find("." + CLASS_PROGRESS), "." + CLASS_PROGRESS_BAR),
+        play: query(autoplay, "." + CLASS_PLAY),
+        pause: query(autoplay, "." + CLASS_PAUSE)
+      });
     }
-    /**
-     * Destroy all Slide objects and clones and recreate them again.
-     */
-    ;
 
-    _proto.refresh = function refresh() {
-      this.emit('refresh:before').emit('refresh').emit('resize');
-      return this;
+    function identify() {
+      var id = root.id || uniqueId(PROJECT_CODE);
+      root.id = id;
+      track.id = track.id || id + "-track";
+      list.id = list.id || id + "-list";
     }
-    /**
-     * Destroy the Splide.
-     * "Completely" boolean is mainly for breakpoints.
-     *
-     * @param {boolean} completely - Destroy completely.
-     */
-    ;
 
-    _proto.destroy = function destroy(completely) {
-      var _this2 = this;
+    function find(selector) {
+      return child(root, selector) || child(slider, selector);
+    }
 
-      if (completely === void 0) {
-        completely = true;
-      }
+    function getClasses() {
+      return [CLASS_ROOT + "--" + options.type, CLASS_ROOT + "--" + options.direction, options.drag && CLASS_ROOT + "--draggable", options.isNavigation && CLASS_ROOT + "--nav", CLASS_ACTIVE];
+    }
 
-      // Postpone destroy because it should be done after mount.
-      if (this.State.is(CREATED)) {
-        this.on('ready', function () {
-          return _this2.destroy(completely);
-        });
-        return;
-      }
+    return assign(elements, {
+      setup: setup,
+      mount: mount,
+      destroy: destroy
+    });
+  }
 
-      values(this.Components).reverse().forEach(function (component) {
-        component.destroy && component.destroy(completely);
-      });
-      this.emit('destroy', completely); // Destroy all event handlers, including ones for native events.
+  function Style() {
+    var style;
+    var sheet;
 
-      this.Event.destroy();
-      this.State.set(DESTROYED);
-      return this;
+    function mount() {
+      style = create("style", {}, document.head);
+      sheet = style.sheet;
     }
-    /**
-     * Return the current slide index.
-     *
-     * @return {number} - The current slide index.
-     // */
-    ;
 
-    _createClass(Splide$1, [{
-      key: "index",
-      get: function get() {
-        return this._i;
+    function destroy() {
+      remove(style);
+      sheet = null;
+    }
+
+    function rule(selector, prop, value) {
+      var _sheet = sheet,
+          cssRules = _sheet.cssRules;
+      var cssRule = find(cssRules, function (cssRule2) {
+        return isCSSStyleRule(cssRule2) && cssRule2.selectorText === selector;
+      }) || cssRules[sheet.insertRule(selector + "{}", 0)];
+
+      if (isCSSStyleRule(cssRule)) {
+        var style2 = cssRule.style;
+        value = "" + value;
+
+        if (style2[prop] !== value) {
+          style2[prop] = value;
+        }
       }
-      /**
-       * Set the current slide index.
-       *
-       * @param {number|string} index - A new index.
-       */
-      ,
-      set: function set(index) {
-        this._i = parseInt(index);
+    }
+
+    function ruleBy(target, prop, value) {
+      rule("#" + (isHTMLElement(target) ? target.id : target), prop, value);
+    }
+
+    function isCSSStyleRule(cssRule) {
+      return cssRule instanceof CSSStyleRule;
+    }
+
+    return {
+      mount: mount,
+      destroy: destroy,
+      rule: rule,
+      ruleBy: ruleBy
+    };
+  }
+
+  var ROLE = "role";
+  var ARIA_CONTROLS = "aria-controls";
+  var ARIA_CURRENT = "aria-current";
+  var ARIA_LABEL = "aria-label";
+  var ARIA_HIDDEN = "aria-hidden";
+  var TAB_INDEX = "tabindex";
+  var DISABLED = "disabled";
+  var ARIA_ORIENTATION = "aria-orientation";
+  var ALL_ATTRIBUTES = [ROLE, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, TAB_INDEX, DISABLED];
+  var SLIDE = "slide";
+  var LOOP = "loop";
+  var FADE = "fade";
+
+  function Slide$1(Splide2, index, slideIndex, slide) {
+    var _EventInterface2 = EventInterface(Splide2),
+        on = _EventInterface2.on,
+        emit = _EventInterface2.emit,
+        bind = _EventInterface2.bind,
+        destroyEvents = _EventInterface2.destroy;
+
+    var Components = Splide2.Components,
+        root = Splide2.root,
+        options = Splide2.options;
+    var isNavigation = options.isNavigation,
+        updateOnMove = options.updateOnMove;
+    var resolve = Components.Direction.resolve;
+    var isClone = slideIndex > -1;
+    var container = child(slide, "." + CLASS_CONTAINER);
+    var focusableNodes = options.focusableNodes && queryAll(slide, options.focusableNodes);
+    var destroyed;
+
+    function mount() {
+      var _this2 = this;
+
+      init();
+      bind(slide, "click keydown", function (e) {
+        emit(e.type === "click" ? EVENT_CLICK : EVENT_SLIDE_KEYDOWN, _this2, e);
+      });
+      on([EVENT_REPOSITIONED, EVENT_MOVED, EVENT_SCROLLED], update.bind(this));
+
+      if (updateOnMove) {
+        on(EVENT_MOVE, onMove.bind(this));
       }
-      /**
-       * Return length of slides.
-       * This is an alias of Elements.length.
-       *
-       * @return {number} - A number of slides.
-       */
+    }
 
-    }, {
-      key: "length",
-      get: function get() {
-        return this.Components.Elements.length;
+    function init() {
+      if (!isClone) {
+        slide.id = root.id + "-slide" + pad(index + 1);
       }
-      /**
-       * Return options.
-       *
-       * @return {Object} - Options object.
-       */
 
-    }, {
-      key: "options",
-      get: function get() {
-        return this._o;
+      if (isNavigation) {
+        var idx = isClone ? slideIndex : index;
+        var label = format(options.i18n.slideX, idx + 1);
+        var controls = Splide2.splides.map(function (splide) {
+          return splide.root.id;
+        }).join(" ");
+        setAttribute(slide, ARIA_LABEL, label);
+        setAttribute(slide, ARIA_CONTROLS, controls);
+        setAttribute(slide, ROLE, "menuitem");
       }
-      /**
-       * Set options with merging the given object to the current one.
-       *
-       * @param {Object} options - New options.
-       */
-      ,
-      set: function set(options) {
-        var created = this.State.is(CREATED);
+    }
 
-        if (!created) {
-          this.emit('update');
-        }
+    function destroy() {
+      destroyed = true;
+      destroyEvents();
+      removeClass(slide, STATUS_CLASSES);
+      removeAttribute(slide, ALL_ATTRIBUTES);
+    }
 
-        this._o = merge(this._o, options);
+    function onMove(next, prev, dest) {
+      if (!destroyed) {
+        update.call(this);
 
-        if (!created) {
-          this.emit('updated', this._o);
+        if (dest === index) {
+          updateActivity.call(this, true);
         }
       }
-      /**
-       * Return the class list.
-       * This is an alias of Splide.options.classList.
-       *
-       * @return {Object} - An object containing all class list.
-       */
+    }
 
-    }, {
-      key: "classes",
-      get: function get() {
-        return this._o.classes;
+    function update() {
+      if (!destroyed) {
+        var currIndex = Splide2.index;
+        updateActivity.call(this, isActive());
+        updateVisibility.call(this, isVisible());
+        toggleClass(slide, CLASS_PREV, index === currIndex - 1);
+        toggleClass(slide, CLASS_NEXT, index === currIndex + 1);
       }
-      /**
-       * Return the i18n strings.
-       * This is an alias of Splide.options.i18n.
-       *
-       * @return {Object} - An object containing all i18n strings.
-       */
+    }
 
-    }, {
-      key: "i18n",
-      get: function get() {
-        return this._o.i18n;
+    function updateActivity(active) {
+      if (active !== hasClass(slide, CLASS_ACTIVE)) {
+        toggleClass(slide, CLASS_ACTIVE, active);
+
+        if (isNavigation) {
+          setAttribute(slide, ARIA_CURRENT, active || null);
+        }
+
+        emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, this);
       }
-    }]);
+    }
 
-    return Splide$1;
-  }();
-  /**
-   * The component for initializing options.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for initializing options.
-   *
-   * @param {Splide} Splide - A Splide instance.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var Options = function Options(Splide) {
-    /**
-     * Retrieve options from the data attribute.
-     * Note that IE10 doesn't support dataset property.
-     *
-     * @type {string}
-     */
-    var options = getAttribute(Splide.root, 'data-splide');
-
-    if (options) {
-      try {
-        Splide.options = JSON.parse(options);
-      } catch (e) {
-        error(e.message);
+    function updateVisibility(visible) {
+      var ariaHidden = !visible && !isActive();
+      setAttribute(slide, ARIA_HIDDEN, ariaHidden || null);
+      setAttribute(slide, TAB_INDEX, !ariaHidden && options.slideFocus ? 0 : null);
+
+      if (focusableNodes) {
+        focusableNodes.forEach(function (node) {
+          setAttribute(node, TAB_INDEX, ariaHidden ? -1 : null);
+        });
+      }
+
+      if (visible !== hasClass(slide, CLASS_VISIBLE)) {
+        toggleClass(slide, CLASS_VISIBLE, visible);
+        emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, this);
       }
     }
 
-    return {
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        if (Splide.State.is(CREATED)) {
-          Splide.index = Splide.options.start;
-        }
+    function rule(prop, value, useContainer) {
+      var selector = "#" + slide.id + (container && useContainer ? " > ." + CLASS_CONTAINER : "");
+      Components.Style.rule(selector, prop, value);
+    }
+
+    function isActive() {
+      return Splide2.index === index;
+    }
+
+    function isVisible() {
+      if (Splide2.is(FADE)) {
+        return isActive();
       }
-    };
-  };
-  /**
-   * Export layout modes.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Enumerate slides from right to left.
-   *
-   * @type {string}
-   */
-
-
-  var RTL = 'rtl';
-  /**
-   * Enumerate slides in a col.
-   *
-   * @type {string}
-   */
-
-  var TTB = 'ttb';
-  /**
-   * The sub component for handling each slide.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Events for restoring original styles.
-   *
-   * @type {string}
-   */
-
-  var STYLE_RESTORE_EVENTS = 'update.slide';
-  /**
-   * The sub component for handling each slide.
-   *
-   * @param {Splide}  Splide    - A Splide instance.
-   * @param {number}  index     - An unique slide index.
-   * @param {number}  realIndex - Clones should pass a real slide index.
-   * @param {Element} slide     - A slide element.
-   *
-   * @return {Object} - The sub component object.
-   */
-
-  var Slide = function Slide(Splide, index, realIndex, slide) {
-    /**
-     * Whether to update "is-active" class before or after transition.
-     *
-     * @type {boolean}
-     */
-    var updateOnMove = Splide.options.updateOnMove;
-    /**
-     * Events when the slide status is updated.
-     * Append a namespace to remove listeners later.
-     *
-     * @type {string}
-     */
-
-    var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resized.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
-    /**
-     * Slide sub component object.
-     *
-     * @type {Object}
-     */
-
-    var Slide = {
-      /**
-       * Slide element.
-       *
-       * @type {Element}
-       */
-      slide: slide,
 
-      /**
-       * Slide index.
-       *
-       * @type {number}
-       */
-      index: index,
+      var trackRect = rect(Components.Elements.track);
+      var slideRect = rect(slide);
+      var left = resolve("left");
+      var right = resolve("right");
+      return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);
+    }
 
-      /**
-       * Real index for clones.
-       *
-       * @type {number}
-       */
-      realIndex: realIndex,
-
-      /**
-       * Container element if available.
-       *
-       * @type {Element|undefined}
-       */
-      container: child(slide, Splide.classes.container),
-
-      /**
-       * Whether this is a cloned slide or not.
-       *
-       * @type {boolean}
-       */
-      isClone: realIndex > -1,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        var _this3 = this;
-
-        if (!this.isClone) {
-          slide.id = Splide.root.id + "-slide" + pad(index + 1);
-        }
+    function isWithin(from, distance) {
+      var diff = abs(from - index);
 
-        Splide.on(STATUS_UPDATE_EVENTS, function () {
-          return _this3.update();
-        }).on(STYLE_RESTORE_EVENTS, restoreStyles).on('click', function () {
-          return Splide.emit('click', _this3);
-        }, slide);
-        /*
-         * Add "is-active" class to a clone element temporarily
-         * and it will be removed on "moved" event.
-         */
-
-        if (updateOnMove) {
-          Splide.on('move.slide', function (newIndex) {
-            if (newIndex === realIndex) {
-              _update(true, false);
-            }
-          });
-        } // Make sure the slide is shown.
+      if (!Splide2.is(SLIDE) && !isClone) {
+        diff = min(diff, Splide2.length - diff);
+      }
 
+      return diff <= distance;
+    }
 
-        applyStyle(slide, {
-          display: ''
-        }); // Hold the original styles.
+    return {
+      index: index,
+      slideIndex: slideIndex,
+      slide: slide,
+      container: container,
+      isClone: isClone,
+      mount: mount,
+      destroy: destroy,
+      rule: rule,
+      isWithin: isWithin
+    };
+  }
 
-        this.styles = getAttribute(slide, 'style') || '';
-      },
+  function Slides(Splide2, Components2, options) {
+    var _EventInterface3 = EventInterface(Splide2),
+        on = _EventInterface3.on,
+        emit = _EventInterface3.emit,
+        bind = _EventInterface3.bind;
 
-      /**
-       * Destroy.
-       */
-      destroy: function destroy() {
-        Splide.off(STATUS_UPDATE_EVENTS).off(STYLE_RESTORE_EVENTS).off('click', slide);
-        removeClass(slide, values(STATUS_CLASSES));
-        restoreStyles();
-        removeAttribute(this.container, 'style');
-      },
+    var _Components2$Elements = Components2.Elements,
+        slides = _Components2$Elements.slides,
+        list = _Components2$Elements.list;
+    var Slides2 = [];
 
-      /**
-       * Update active and visible status.
-       */
-      update: function update() {
-        _update(this.isActive(), false);
+    function mount() {
+      init();
+      on(EVENT_REFRESH, refresh);
+    }
 
-        _update(this.isVisible(), true);
-      },
+    function init() {
+      slides.forEach(function (slide, index) {
+        register(slide, index, -1);
+      });
+    }
 
-      /**
-       * Check whether this slide is active or not.
-       *
-       * @return {boolean} - True if the slide is active or false if not.
-       */
-      isActive: function isActive() {
-        return Splide.index === index;
-      },
+    function destroy() {
+      forEach$1(function (Slide2) {
+        Slide2.destroy();
+      });
+      empty(Slides2);
+    }
 
-      /**
-       * Check whether this slide is visible in the viewport or not.
-       *
-       * @return {boolean} - True if the slide is visible or false if not.
-       */
-      isVisible: function isVisible() {
-        var active = this.isActive();
+    function refresh() {
+      destroy();
+      init();
+    }
 
-        if (Splide.is(FADE) || active) {
-          return active;
-        }
+    function register(slide, index, slideIndex) {
+      var object = Slide$1(Splide2, index, slideIndex, slide);
+      object.mount();
+      Slides2.push(object);
+    }
 
-        var ceil = Math.ceil;
-        var trackRect = getRect(Splide.Components.Elements.track);
-        var slideRect = getRect(slide);
+    function get(excludeClones) {
+      return excludeClones ? filter(function (Slide2) {
+        return !Slide2.isClone;
+      }) : Slides2;
+    }
 
-        if (Splide.options.direction === TTB) {
-          return trackRect.top <= slideRect.top && slideRect.bottom <= ceil(trackRect.bottom);
-        }
+    function getIn(page) {
+      var Controller = Components2.Controller;
+      var index = Controller.toIndex(page);
+      var max = Controller.hasFocus() ? 1 : options.perPage;
+      return filter(function (Slide2) {
+        return between(Slide2.index, index, index + max - 1);
+      });
+    }
 
-        return trackRect.left <= slideRect.left && slideRect.right <= ceil(trackRect.right);
-      },
+    function getAt(index) {
+      return filter(index)[0];
+    }
 
-      /**
-       * Calculate how far this slide is from another slide and
-       * return true if the distance is within the given number.
-       *
-       * @param {number} from   - Index of a target slide.
-       * @param {number} within - True if the slide is within this number.
-       *
-       * @return {boolean} - True if the slide is within the number or false otherwise.
-       */
-      isWithin: function isWithin(from, within) {
-        var diff = Math.abs(from - index);
-
-        if (!Splide.is(SLIDE) && !this.isClone) {
-          diff = Math.min(diff, Splide.length - diff);
+    function add(items, index) {
+      forEach(items, function (slide) {
+        if (isString(slide)) {
+          slide = parseHtml(slide);
         }
 
-        return diff < within;
-      }
-    };
-    /**
-     * Update classes for activity or visibility.
-     *
-     * @param {boolean} active        - Is active/visible or not.
-     * @param {boolean} forVisibility - Toggle classes for activity or visibility.
-     */
-
-    function _update(active, forVisibility) {
-      var type = forVisibility ? 'visible' : 'active';
-      var className = STATUS_CLASSES[type];
-
-      if (active) {
-        addClass(slide, className);
-        Splide.emit("" + type, Slide);
-      } else {
-        if (hasClass(slide, className)) {
-          removeClass(slide, className);
-          Splide.emit("" + (forVisibility ? 'hidden' : 'inactive'), Slide);
+        if (isHTMLElement(slide)) {
+          var ref = slides[index];
+          ref ? before(slide, ref) : append(list, slide);
+          addClass(slide, options.classes.slide);
+          observeImages(slide, emit.bind(null, EVENT_RESIZE));
         }
-      }
+      });
+      emit(EVENT_REFRESH);
     }
-    /**
-     * Restore the original styles.
-     */
 
+    function remove$1(matcher) {
+      remove(filter(matcher).map(function (Slide2) {
+        return Slide2.slide;
+      }));
+      emit(EVENT_REFRESH);
+    }
 
-    function restoreStyles() {
-      setAttribute(slide, 'style', Slide.styles);
+    function forEach$1(iteratee, excludeClones) {
+      get(excludeClones).forEach(iteratee);
     }
 
-    return Slide;
-  };
-  /**
-   * The component for main elements.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The property name for UID stored in a window object.
-   *
-   * @type {string}
-   */
-
-
-  var UID_NAME = 'uid';
-  /**
-   * The component for main elements.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Elements = function Elements(Splide, Components) {
-    /**
-     * Hold the root element.
-     *
-     * @type {Element}
-     */
-    var root = Splide.root;
-    /**
-     * Hold the class list.
-     *
-     * @type {Object}
-     */
-
-    var classes = Splide.classes;
-    /**
-     * Store Slide objects.
-     *
-     * @type {Array}
-     */
-
-    var Slides = [];
-    /*
-     * Assign unique ID to the root element if it doesn't have the one.
-     * Note that IE doesn't support padStart() to fill the uid by 0.
-     */
-
-    if (!root.id) {
-      window.splide = window.splide || {};
-      var uid = window.splide[UID_NAME] || 0;
-      window.splide[UID_NAME] = ++uid;
-      root.id = "splide" + pad(uid);
-    }
-    /**
-     * Elements component object.
-     *
-     * @type {Object}
-     */
-
-
-    var Elements = {
-      /**
-       * Called when the component is mounted.
-       * Collect main elements and store them as member properties.
-       */
-      mount: function mount() {
-        var _this4 = this;
-
-        this.init();
-        Splide.on('refresh', function () {
-          _this4.destroy();
-
-          _this4.init();
-        }).on('updated', function () {
-          removeClass(root, getClasses());
-          addClass(root, getClasses());
-        });
-      },
+    function filter(matcher) {
+      return Slides2.filter(isFunction(matcher) ? matcher : function (Slide2) {
+        return isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index);
+      });
+    }
 
-      /**
-       * Destroy.
-       */
-      destroy: function destroy() {
-        Slides.forEach(function (Slide) {
-          Slide.destroy();
-        });
-        Slides = [];
-        removeClass(root, getClasses());
-      },
+    function rule(prop, value, useContainer) {
+      forEach$1(function (Slide2) {
+        Slide2.rule(prop, value, useContainer);
+      });
+    }
 
-      /**
-       * Initialization.
-       */
-      init: function init() {
-        var _this5 = this;
+    function observeImages(elm, callback) {
+      var images = queryAll(elm, "img");
+      var length = images.length;
 
-        collect();
-        addClass(root, getClasses());
-        this.slides.forEach(function (slide, index) {
-          _this5.register(slide, index, -1);
+      if (length) {
+        images.forEach(function (img) {
+          bind(img, "load error", function () {
+            if (! --length) {
+              callback();
+            }
+          });
         });
-      },
+      } else {
+        callback();
+      }
+    }
 
-      /**
-       * Register a slide to create a Slide object and handle its behavior.
-       *
-       * @param {Element} slide     - A slide element.
-       * @param {number}  index     - A unique index. This can be negative.
-       * @param {number}  realIndex - A real index for clones. Set -1 for real slides.
-       */
-      register: function register(slide, index, realIndex) {
-        var SlideObject = Slide(Splide, index, realIndex, slide);
-        SlideObject.mount();
-        Slides.push(SlideObject);
-      },
+    function getLength(excludeClones) {
+      return excludeClones ? slides.length : Slides2.length;
+    }
 
-      /**
-       * Return the Slide object designated by the index.
-       * Note that "find" is not supported by IE.
-       *
-       * @return {Object|undefined} - A Slide object if available. Undefined if not.
-       */
-      getSlide: function getSlide(index) {
-        return Slides.filter(function (Slide) {
-          return Slide.index === index;
-        })[0];
-      },
+    function isEnough() {
+      return Slides2.length > options.perPage;
+    }
 
-      /**
-       * Return all Slide objects.
-       *
-       * @param {boolean} includeClones - Whether to include cloned slides or not.
-       *
-       * @return {Object[]} - Slide objects.
-       */
-      getSlides: function getSlides(includeClones) {
-        return includeClones ? Slides : Slides.filter(function (Slide) {
-          return !Slide.isClone;
-        });
-      },
+    return {
+      mount: mount,
+      destroy: destroy,
+      register: register,
+      get: get,
+      getIn: getIn,
+      getAt: getAt,
+      add: add,
+      remove: remove$1,
+      forEach: forEach$1,
+      filter: filter,
+      rule: rule,
+      getLength: getLength,
+      isEnough: isEnough
+    };
+  }
 
-      /**
-       * Return Slide objects belonging to the given page.
-       *
-       * @param {number} page - A page number.
-       *
-       * @return {Object[]} - An array containing Slide objects.
-       */
-      getSlidesByPage: function getSlidesByPage(page) {
-        var idx = Components.Controller.toIndex(page);
-        var options = Splide.options;
-        var max = options.focus !== false ? 1 : options.perPage;
-        return Slides.filter(function (_ref2) {
-          var index = _ref2.index;
-          return idx <= index && index < idx + max;
-        });
-      },
+  function Clones(Splide2, Components2, options) {
+    var _EventInterface4 = EventInterface(Splide2),
+        on = _EventInterface4.on,
+        emit = _EventInterface4.emit;
 
-      /**
-       * Insert a slide to a slider.
-       * Need to refresh Splide after adding a slide.
-       *
-       * @param {Node|string} slide    - A slide element to be added.
-       * @param {number}      index    - A slide will be added at the position.
-       * @param {Function}    callback - Called right after the slide is added to the DOM tree.
-       */
-      add: function add(slide, index, callback) {
-        if (typeof slide === 'string') {
-          slide = domify(slide);
-        }
+    var Elements = Components2.Elements,
+        Slides = Components2.Slides;
+    var resolve = Components2.Direction.resolve;
+    var clones = [];
+    var cloneCount;
 
-        if (slide instanceof Element) {
-          var ref = this.slides[index]; // This will be removed in mount() of a Slide component.
+    function mount() {
+      init();
+      on(EVENT_REFRESH, refresh);
+      on([EVENT_UPDATED, EVENT_RESIZE], observe);
+    }
 
-          applyStyle(slide, {
-            display: 'none'
-          });
+    function init() {
+      if (cloneCount = computeCloneCount()) {
+        generate(cloneCount);
+      }
+    }
 
-          if (ref) {
-            before(slide, ref);
-            this.slides.splice(index, 0, slide);
-          } else {
-            append(this.list, slide);
-            this.slides.push(slide);
-          }
+    function destroy() {
+      remove(clones);
+      empty(clones);
+    }
 
-          loaded(slide, function () {
-            callback && callback(slide);
-          });
+    function refresh() {
+      destroy();
+      init();
+    }
+
+    function observe() {
+      if (cloneCount !== computeCloneCount()) {
+        emit(EVENT_REFRESH);
+      }
+    }
+
+    function generate(count) {
+      var slides = Slides.get().slice();
+      var length = slides.length;
+
+      if (length) {
+        while (slides.length < count) {
+          push(slides, slides);
         }
-      },
 
-      /**
-       * Remove a slide from a slider.
-       * Need to refresh Splide after removing a slide.
-       *
-       * @param index - Slide index.
-       */
-      remove: function remove(index) {
-        _remove(this.slides.splice(index, 1)[0]);
-      },
+        push(slides.slice(-count), slides.slice(0, count)).forEach(function (Slide, index) {
+          var isHead = index < count;
+          var clone = cloneDeep(Slide.slide, index);
+          isHead ? before(clone, slides[0].slide) : append(Elements.list, clone);
+          push(clones, clone);
+          Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index);
+        });
+      }
+    }
 
-      /**
-       * Trigger the provided callback for each Slide object.
-       *
-       * @param {Function} callback - A callback function. The first argument will be the Slide object.
-       */
-      each: function each(callback) {
-        Slides.forEach(callback);
-      },
+    function cloneDeep(elm, index) {
+      var clone = elm.cloneNode(true);
+      addClass(clone, options.classes.clone);
+      clone.id = Splide2.root.id + "-clone" + pad(index + 1);
+      return clone;
+    }
 
-      /**
-       * Return slides length without clones.
-       *
-       * @return {number} - Slide length.
-       */
-      get length() {
-        return this.slides.length;
-      },
+    function computeCloneCount() {
+      var clones2 = options.clones;
 
-      /**
-       * Return "SlideObjects" length including clones.
-       *
-       * @return {number} - Slide length including clones.
-       */
-      get total() {
-        return Slides.length;
+      if (!Splide2.is(LOOP)) {
+        clones2 = 0;
+      } else if (!clones2) {
+        var fixedSize = measure(Elements.list, options[resolve("fixedWidth")]);
+        var fixedCount = fixedSize && ceil(rect(Elements.track)[resolve("width")] / fixedSize);
+        var baseCount = fixedCount || options[resolve("autoWidth")] && Splide2.length || options.perPage;
+        clones2 = baseCount * (options.drag ? (options.flickMaxPages || 1) + 1 : 2);
       }
 
+      return clones2;
+    }
+
+    return {
+      mount: mount,
+      destroy: destroy
     };
-    /**
-     * Collect elements.
-     */
+  }
 
-    function collect() {
-      Elements.slider = child(root, classes.slider);
-      Elements.track = find(root, "." + classes.track);
-      Elements.list = child(Elements.track, classes.list);
-      exist(Elements.track && Elements.list, 'Track or list was not found.');
-      Elements.slides = children(Elements.list, classes.slide);
-      var arrows = findParts(classes.arrows);
-      Elements.arrows = {
-        prev: find(arrows, "." + classes.prev),
-        next: find(arrows, "." + classes.next)
-      };
-      var autoplay = findParts(classes.autoplay);
-      Elements.bar = find(findParts(classes.progress), "." + classes.bar);
-      Elements.play = find(autoplay, "." + classes.play);
-      Elements.pause = find(autoplay, "." + classes.pause);
-      Elements.track.id = Elements.track.id || root.id + "-track";
-      Elements.list.id = Elements.list.id || root.id + "-list";
-    }
-    /**
-     * Return class names for the root element.
-     */
+  function Layout(Splide2, Components2, options) {
+    var _EventInterface5 = EventInterface(Splide2),
+        on = _EventInterface5.on,
+        bind = _EventInterface5.bind,
+        emit = _EventInterface5.emit;
 
+    var Slides = Components2.Slides;
+    var ruleBy = Components2.Style.ruleBy;
+    var resolve = Components2.Direction.resolve;
+    var _Components2$Elements2 = Components2.Elements,
+        track = _Components2$Elements2.track,
+        list = _Components2$Elements2.list;
+    var getAt = Slides.getAt;
+    var vertical;
 
-    function getClasses() {
-      var rootClass = classes.root;
-      var options = Splide.options;
-      return [rootClass + "--" + options.type, rootClass + "--" + options.direction, options.drag ? rootClass + "--draggable" : '', options.isNavigation ? rootClass + "--nav" : '', STATUS_CLASSES.active];
+    function mount() {
+      init();
+      bind(window, "resize load", Throttle(emit.bind(this, EVENT_RESIZE)));
+      on([EVENT_UPDATED, EVENT_REFRESH], init);
+      on(EVENT_RESIZE, resize);
     }
-    /**
-     * Find parts only from children of the root or track.
-     *
-     * @return {Element} - A found element or undefined.
-     */
 
+    function init() {
+      vertical = options.direction === TTB;
+      ruleBy(Splide2.root, "maxWidth", unit(options.width));
+      ruleBy(track, resolve("paddingLeft"), cssPadding(false));
+      ruleBy(track, resolve("paddingRight"), cssPadding(true));
+      Slides.rule(resolve("marginRight"), unit(options.gap));
+      Slides.rule("width", cssSlideWidth());
+      setSlidesHeight();
+      resize();
+    }
 
-    function findParts(className) {
-      return child(root, className) || child(Elements.slider, className);
+    function resize() {
+      ruleBy(track, "height", cssTrackHeight());
+      options.heightRatio && setSlidesHeight();
+      emit(EVENT_RESIZED);
     }
 
-    return Elements;
-  };
-  /**
-   * The component for controlling the track.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-
-  var floor = Math.floor;
-  /**
-   * The component for controlling the track.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Controller = function Controller(Splide, Components) {
-    /**
-     * Store current options.
-     *
-     * @type {Object}
-     */
-    var options;
-    /**
-     * True if the slide is LOOP mode.
-     *
-     * @type {boolean}
-     */
-
-    var isLoop;
-    /**
-     * Controller component object.
-     *
-     * @type {Object}
-     */
-
-    var Controller = {
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        options = Splide.options;
-        isLoop = Splide.is(LOOP);
-        bind();
-      },
+    function setSlidesHeight() {
+      Slides.rule("height", cssSlideHeight(), true);
+    }
 
-      /**
-       * Make track run by the given control.
-       * - "+{i}" : Increment the slide index by i.
-       * - "-{i}" : Decrement the slide index by i.
-       * - "{i}"  : Go to the slide whose index is i.
-       * - ">"    : Go to next page.
-       * - "<"    : Go to prev page.
-       * - ">{i}" : Go to page i.
-       *
-       * @param {string|number} control  - A control pattern.
-       * @param {boolean}       silently - Go to the destination without event emission.
-       */
-      go: function go(control, silently) {
-        var destIndex = this.trim(this.parse(control));
-        Components.Track.go(destIndex, this.rewind(destIndex), silently);
-      },
+    function cssPadding(right) {
+      var padding = options.padding;
+      var prop = resolve(right ? "right" : "left", true);
+      return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || "0px";
+    }
 
-      /**
-       * Parse the given control and return the destination index for the track.
-       *
-       * @param {string} control - A control target pattern.
-       *
-       * @return {number} - A parsed target.
-       */
-      parse: function parse(control) {
-        var index = Splide.index;
-        var matches = String(control).match(/([+\-<>]+)(\d+)?/);
-        var indicator = matches ? matches[1] : '';
-        var number = matches ? parseInt(matches[2]) : 0;
-
-        switch (indicator) {
-          case '+':
-            index += number || 1;
-            break;
+    function cssTrackHeight() {
+      var height = "";
 
-          case '-':
-            index -= number || 1;
-            break;
+      if (vertical) {
+        height = cssHeight();
+        assert(height, "height or heightRatio is missing.");
+        height = "calc(" + height + " - " + cssPadding(false) + " - " + cssPadding(true) + ")";
+      }
 
-          case '>':
-          case '<':
-            index = parsePage(number, index, indicator === '<');
-            break;
+      return height;
+    }
 
-          default:
-            index = parseInt(control);
-        }
+    function cssHeight() {
+      return unit(options.height || rect(list).width * options.heightRatio);
+    }
 
-        return index;
-      },
+    function cssSlideWidth() {
+      return options.autoWidth ? "" : unit(options.fixedWidth) || (vertical ? "" : cssSlideSize());
+    }
 
-      /**
-       * Compute index from the given page number.
-       *
-       * @param {number} page - Page number.
-       *
-       * @return {number} - A computed page number.
-       */
-      toIndex: function toIndex(page) {
-        if (hasFocus()) {
-          return page;
-        }
+    function cssSlideHeight() {
+      return unit(options.fixedHeight) || (vertical ? options.autoHeight ? "" : cssSlideSize() : cssHeight());
+    }
 
-        var length = Splide.length;
-        var perPage = options.perPage;
-        var index = page * perPage;
-        index = index - (this.pageLength * perPage - length) * floor(index / length); // Adjustment for the last page.
+    function cssSlideSize() {
+      var gap = unit(options.gap);
+      return "calc((100%" + (gap && " + " + gap) + ")/" + (options.perPage || 1) + (gap && " - " + gap) + ")";
+    }
 
-        if (length - perPage <= index && index < length) {
-          index = length - perPage;
-        }
+    function listSize() {
+      return rect(list)[resolve("width")];
+    }
 
-        return index;
-      },
+    function slideSize(index, withoutGap) {
+      var Slide = getAt(index || 0);
+      return Slide ? rect(Slide.slide)[resolve("width")] + (withoutGap ? 0 : getGap()) : 0;
+    }
 
-      /**
-       * Compute page number from the given slide index.
-       *
-       * @param {number} index - Slide index.
-       *
-       * @return {number} - A computed page number.
-       */
-      toPage: function toPage(index) {
-        if (hasFocus()) {
-          return index;
-        }
+    function totalSize(index, withoutGap) {
+      var Slide = getAt(index);
 
-        var length = Splide.length;
-        var perPage = options.perPage; // Make the last "perPage" number of slides belong to the last page.
+      if (Slide) {
+        var right = rect(Slide.slide)[resolve("right")];
+        var left = rect(list)[resolve("left")];
+        return abs(right - left) + (withoutGap ? 0 : getGap());
+      }
 
-        if (length - perPage <= index && index < length) {
-          return floor((length - 1) / perPage);
-        }
+      return 0;
+    }
 
-        return floor(index / perPage);
-      },
+    function sliderSize() {
+      return totalSize(Splide2.length - 1, true) - totalSize(-1, true);
+    }
 
-      /**
-       * Trim the given index according to the current mode.
-       * Index being returned could be less than 0 or greater than the length in Loop mode.
-       *
-       * @param {number} index - An index being trimmed.
-       *
-       * @return {number} - A trimmed index.
-       */
-      trim: function trim(index) {
-        if (!isLoop) {
-          index = options.rewind ? this.rewind(index) : between(index, 0, this.edgeIndex);
-        }
+    function getGap() {
+      var Slide = getAt(0);
+      return Slide && parseFloat(style(Slide.slide, resolve("marginRight"))) || 0;
+    }
 
-        return index;
-      },
+    function getPadding(right) {
+      return parseFloat(style(track, resolve("padding" + (right ? "Right" : "Left"), true))) || 0;
+    }
 
-      /**
-       * Rewind the given index if it's out of range.
-       *
-       * @param {number} index - An index.
-       *
-       * @return {number} - A rewound index.
-       */
-      rewind: function rewind(index) {
-        var edge = this.edgeIndex;
+    return {
+      mount: mount,
+      listSize: listSize,
+      slideSize: slideSize,
+      sliderSize: sliderSize,
+      totalSize: totalSize,
+      getPadding: getPadding
+    };
+  }
 
-        if (isLoop) {
-          while (index > edge) {
-            index -= edge + 1;
-          }
+  function Move(Splide2, Components2, options) {
+    var _EventInterface6 = EventInterface(Splide2),
+        on = _EventInterface6.on,
+        emit = _EventInterface6.emit;
+
+    var _Components2$Layout = Components2.Layout,
+        slideSize = _Components2$Layout.slideSize,
+        getPadding = _Components2$Layout.getPadding,
+        totalSize = _Components2$Layout.totalSize,
+        listSize = _Components2$Layout.listSize,
+        sliderSize = _Components2$Layout.sliderSize;
+    var _Components2$Directio = Components2.Direction,
+        resolve = _Components2$Directio.resolve,
+        orient = _Components2$Directio.orient;
+    var _Components2$Elements3 = Components2.Elements,
+        list = _Components2$Elements3.list,
+        track = _Components2$Elements3.track;
+    var waiting;
+
+    function mount() {
+      if (!Splide2.is(FADE)) {
+        on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition);
+      } else {
+        emit(EVENT_REPOSITIONED);
+      }
+    }
 
-          while (index < 0) {
-            index += edge + 1;
-          }
-        } else {
-          if (index > edge) {
-            index = 0;
-          } else if (index < 0) {
-            index = edge;
-          }
-        }
+    function reposition() {
+      Components2.Scroll.cancel();
+      jump(Splide2.index);
+      emit(EVENT_REPOSITIONED);
+    }
 
-        return index;
-      },
+    function move(dest, index, prev, callback) {
+      if (!isBusy()) {
+        var set = Splide2.state.set;
+        var position = getPosition();
+        var looping = dest !== index;
+        waiting = looping || options.waitForTransition;
+        set(MOVING);
+        emit(EVENT_MOVE, index, prev, dest);
+        Components2.Transition.start(dest, function () {
+          looping && jump(index);
+          waiting = false;
+          set(IDLE);
+          emit(EVENT_MOVED, index, prev, dest);
 
-      /**
-       * Check if the direction is "rtl" or not.
-       *
-       * @return {boolean} - True if "rtl" or false if not.
-       */
-      isRtl: function isRtl() {
-        return options.direction === RTL;
-      },
+          if (options.trimSpace === "move" && dest !== prev && position === getPosition()) {
+            Components2.Controller.go(dest > prev ? ">" : "<", false, callback);
+          } else {
+            callback && callback();
+          }
+        });
+      }
+    }
 
-      /**
-       * Return the page length.
-       *
-       * @return {number} - Max page number.
-       */
-      get pageLength() {
-        var length = Splide.length;
-        return hasFocus() ? length : Math.ceil(length / options.perPage);
-      },
+    function jump(index) {
+      translate(toPosition(index, true));
+    }
 
-      /**
-       * Return the edge index.
-       *
-       * @return {number} - Edge index.
-       */
-      get edgeIndex() {
-        var length = Splide.length;
+    function translate(position, preventLoop) {
+      Components2.Style.ruleBy(list, "transform", "translate" + resolve("X") + "(" + (preventLoop ? position : loop(position)) + "px)");
+    }
 
-        if (!length) {
-          return 0;
-        }
+    function loop(position) {
+      if (!waiting && Splide2.is(LOOP)) {
+        var diff = orient(position - getPosition());
+        var exceededMin = exceededLimit(false, position) && diff < 0;
+        var exceededMax = exceededLimit(true, position) && diff > 0;
 
-        if (hasFocus() || options.isNavigation || isLoop) {
-          return length - 1;
+        if (exceededMin || exceededMax) {
+          var excess = position - getLimit(exceededMax);
+          var size = sliderSize();
+          position -= sign(excess) * size * ceil(abs(excess) / size);
         }
+      }
 
-        return length - options.perPage;
-      },
-
-      /**
-       * Return the index of the previous slide.
-       *
-       * @return {number} - The index of the previous slide if available. -1 otherwise.
-       */
-      get prevIndex() {
-        var prev = Splide.index - 1;
+      return position;
+    }
 
-        if (isLoop || options.rewind) {
-          prev = this.rewind(prev);
-        }
+    function cancel() {
+      waiting = false;
+      Components2.Transition.cancel();
+      translate(getPosition());
+    }
 
-        return prev > -1 ? prev : -1;
-      },
+    function toIndex(position) {
+      var Slides = Components2.Slides.get();
+      var index = 0;
+      var minDistance = Infinity;
 
-      /**
-       * Return the index of the next slide.
-       *
-       * @return {number} - The index of the next slide if available. -1 otherwise.
-       */
-      get nextIndex() {
-        var next = Splide.index + 1;
+      for (var i = 0; i < Slides.length; i++) {
+        var slideIndex = Slides[i].index;
+        var distance = abs(toPosition(slideIndex, true) - position);
 
-        if (isLoop || options.rewind) {
-          next = this.rewind(next);
+        if (distance < minDistance) {
+          minDistance = distance;
+          index = slideIndex;
+        } else {
+          break;
         }
-
-        return Splide.index < next && next <= this.edgeIndex || next === 0 ? next : -1;
       }
 
-    };
-    /**
-     * Listen to some events.
-     */
-
-    function bind() {
-      Splide.on('move', function (newIndex) {
-        Splide.index = newIndex;
-      }).on('updated refresh', function (newOptions) {
-        options = newOptions || options;
-        Splide.index = between(Splide.index, 0, Controller.edgeIndex);
-      });
+      return index;
     }
-    /**
-     * Verify if the focus option is available or not.
-     *
-     * @return {boolean} - True if a slider has the focus option.
-     */
 
+    function toPosition(index, trimming) {
+      var position = orient(totalSize(index - 1) - offset(index));
+      return trimming ? trim(position) : position;
+    }
 
-    function hasFocus() {
-      return options.focus !== false;
-    }
-    /**
-     * Return the next or previous page index computed by the page number and current index.
-     *
-     * @param {number}  number - Specify the page number.
-     * @param {number}  index  - Current index.
-     * @param {boolean} prev   - Prev or next.
-     *
-     * @return {number} - Slide index.
-     */
-
-
-    function parsePage(number, index, prev) {
-      if (number > -1) {
-        return Controller.toIndex(number);
+    function getPosition() {
+      var left = resolve("left");
+      return rect(list)[left] - rect(track)[left] + orient(getPadding(false));
+    }
+
+    function trim(position) {
+      if (options.trimSpace && Splide2.is(SLIDE)) {
+        position = clamp(position, 0, orient(sliderSize() - listSize()));
       }
 
-      var perMove = options.perMove;
-      var sign = prev ? -1 : 1;
+      return position;
+    }
 
-      if (perMove) {
-        return index + perMove * sign;
-      }
+    function offset(index) {
+      var focus = options.focus;
+      return focus === "center" ? (listSize() - slideSize(index, true)) / 2 : +focus * slideSize(index) || 0;
+    }
 
-      return Controller.toIndex(Controller.toPage(index) + sign);
+    function getLimit(max) {
+      return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace);
     }
 
-    return Controller;
-  };
-  /**
-   * The component for moving list in the track.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-
-  var abs$1 = Math.abs;
-  /**
-   * The component for moving list in the track.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Track = function Track(Splide, Components) {
-    /**
-     * Hold the Layout component.
-     *
-     * @type {Object}
-     */
-    var Layout;
-    /**
-     * Hold the Layout component.
-     *
-     * @type {Object}
-     */
-
-    var Elements;
-    /**
-     * Store the list element.
-     *
-     * @type {Element}
-     */
+    function isBusy() {
+      return !!waiting;
+    }
 
-    var list;
-    /**
-     * Whether the current direction is vertical or not.
-     *
-     * @type {boolean}
-     */
-
-    var isVertical = Splide.options.direction === TTB;
-    /**
-     * Whether the slider type is FADE or not.
-     *
-     * @type {boolean}
-     */
-
-    var isFade = Splide.is(FADE);
-    /**
-     * Whether the slider direction is RTL or not.
-     *
-     * @type {boolean}
-     */
-
-    var isRTL = Splide.options.direction === RTL;
-    /**
-     * This will be true while transitioning from the last index to the first one.
-     *
-     * @type {boolean}
-     */
-
-    var isLoopPending = false;
-    /**
-     * Sign for the direction. Only RTL mode uses the positive sign.
-     *
-     * @type {number}
-     */
-
-    var sign = isRTL ? 1 : -1;
-    /**
-     * Track component object.
-     *
-     * @type {Object}
-     */
-
-    var Track = {
-      /**
-       * Make public the sign defined locally.
-       *
-       * @type {number}
-       */
-      sign: sign,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        Elements = Components.Elements;
-        Layout = Components.Layout;
-        list = Elements.list;
-      },
+    function exceededLimit(max, position) {
+      position = isUndefined(position) ? getPosition() : position;
+      var exceededMin = max !== true && orient(position) < orient(getLimit(false));
+      var exceededMax = max !== false && orient(position) > orient(getLimit(true));
+      return exceededMin || exceededMax;
+    }
 
-      /**
-       * Called after the component is mounted.
-       * The resize event must be registered after the Layout's one is done.
-       */
-      mounted: function mounted() {
-        var _this6 = this;
-
-        if (!isFade) {
-          this.jump(0);
-          Splide.on('mounted resize updated', function () {
-            _this6.jump(Splide.index);
-          });
-        }
-      },
+    return {
+      mount: mount,
+      move: move,
+      jump: jump,
+      translate: translate,
+      cancel: cancel,
+      toIndex: toIndex,
+      toPosition: toPosition,
+      getPosition: getPosition,
+      getLimit: getLimit,
+      isBusy: isBusy,
+      exceededLimit: exceededLimit
+    };
+  }
 
-      /**
-       * Go to the given destination index.
-       * After arriving there, the track is jump to the new index without animation, mainly for loop mode.
-       *
-       * @param {number}  destIndex - A destination index.
-       *                              This can be negative or greater than slides length for reaching clones.
-       * @param {number}  newIndex  - An actual new index. They are always same in Slide and Rewind mode.
-       * @param {boolean} silently  - If true, suppress emitting events.
-       */
-      go: function go(destIndex, newIndex, silently) {
-        var newPosition = getTrimmedPosition(destIndex);
-        var prevIndex = Splide.index; // Prevent any actions while transitioning from the last index to the first one for jump.
-
-        if (Splide.State.is(MOVING) && isLoopPending) {
-          return;
-        }
+  function Controller(Splide2, Components2, options) {
+    var _EventInterface7 = EventInterface(Splide2),
+        on = _EventInterface7.on;
+
+    var Move = Components2.Move;
+    var getPosition = Move.getPosition,
+        getLimit = Move.getLimit;
+    var _Components2$Slides = Components2.Slides,
+        isEnough = _Components2$Slides.isEnough,
+        getLength = _Components2$Slides.getLength;
+    var isLoop = Splide2.is(LOOP);
+    var currIndex = options.start || 0;
+    var prevIndex = currIndex;
+    var slideCount;
+    var perMove;
+    var perPage;
+
+    function mount() {
+      init();
+      on([EVENT_UPDATED, EVENT_REFRESH], init, DEFAULT_EVENT_PRIORITY - 1);
+      on(EVENT_SCROLLED, reindex, 0);
+    }
 
-        isLoopPending = destIndex !== newIndex;
+    function init() {
+      slideCount = getLength(true);
+      perMove = options.perMove;
+      perPage = options.perPage;
+      currIndex = clamp(currIndex, 0, slideCount - 1);
+    }
 
-        if (!silently) {
-          Splide.emit('move', newIndex, prevIndex, destIndex);
-        }
+    function reindex() {
+      setIndex(Move.toIndex(getPosition()));
+    }
 
-        if (Math.abs(newPosition - this.position) >= 1 || isFade) {
-          Components.Transition.start(destIndex, newIndex, prevIndex, this.toCoord(newPosition), function () {
-            onTransitionEnd(destIndex, newIndex, prevIndex, silently);
-          });
-        } else {
-          if (destIndex !== prevIndex && Splide.options.trimSpace === 'move') {
-            Components.Controller.go(destIndex + destIndex - prevIndex, silently);
-          } else {
-            onTransitionEnd(destIndex, newIndex, prevIndex, silently);
-          }
-        }
-      },
+    function go(control, allowSameIndex, callback) {
+      var dest = parse(control);
+      var index = loop(dest);
 
-      /**
-       * Move the track to the specified index.
-       *
-       * @param {number} index - A destination index where the track jumps.
-       */
-      jump: function jump(index) {
-        this.translate(getTrimmedPosition(index));
-      },
+      if (index > -1 && !Move.isBusy() && (allowSameIndex || index !== currIndex)) {
+        setIndex(index);
+        Move.move(dest, index, prevIndex, callback);
+      }
+    }
 
-      /**
-       * Set the list position by CSS translate property.
-       *
-       * @param {number} position - A new position value.
-       */
-      translate: function translate(position) {
-        applyStyle(list, {
-          transform: "translate" + (isVertical ? 'Y' : 'X') + "(" + position + "px)"
-        });
-      },
+    function parse(control) {
+      var index = currIndex;
 
-      /**
-       * Cancel the transition and set the list position.
-       * Also, loop the slider if necessary.
-       */
-      cancel: function cancel() {
-        if (Splide.is(LOOP)) {
-          this.shift();
+      if (isString(control)) {
+        var _ref = control.match(/([+\-<>])(\d+)?/) || [],
+            indicator = _ref[1],
+            number = _ref[2];
+
+        if (indicator === "+" || indicator === "-") {
+          index = computeDestIndex(currIndex + +("" + indicator + (+number || 1)), currIndex, true);
+        } else if (indicator === ">") {
+          index = number ? toIndex(+number) : getNext(true);
+        } else if (indicator === "<") {
+          index = getPrev(true);
+        }
+      } else {
+        if (isLoop) {
+          index = clamp(control, -perPage, slideCount + perPage - 1);
         } else {
-          // Ensure the current position.
-          this.translate(this.position);
+          index = clamp(control, 0, getEnd());
         }
+      }
 
-        applyStyle(list, {
-          transition: ''
-        });
-      },
+      return index;
+    }
 
-      /**
-       * Shift the slider if it exceeds borders on the edge.
-       */
-      shift: function shift() {
-        var position = abs$1(this.position);
-        var left = abs$1(this.toPosition(0));
-        var right = abs$1(this.toPosition(Splide.length));
-        var innerSize = right - left;
-
-        if (position < left) {
-          position += innerSize;
-        } else if (position > right) {
-          position -= innerSize;
-        }
+    function getNext(destination) {
+      return getAdjacent(false, destination);
+    }
 
-        this.translate(sign * position);
-      },
+    function getPrev(destination) {
+      return getAdjacent(true, destination);
+    }
 
-      /**
-       * Trim redundant spaces on the left or right edge if necessary.
-       *
-       * @param {number} position - Position value to be trimmed.
-       *
-       * @return {number} - Trimmed position.
-       */
-      trim: function trim(position) {
-        if (!Splide.options.trimSpace || Splide.is(LOOP)) {
-          return position;
+    function getAdjacent(prev, destination) {
+      var number = perMove || hasFocus() ? 1 : perPage;
+      var dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex);
+
+      if (dest === -1 && Splide2.is(SLIDE)) {
+        if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {
+          return prev ? 0 : getEnd();
         }
+      }
 
-        var edge = sign * (Layout.totalSize() - Layout.size - Layout.gap);
-        return between(position, edge, 0);
-      },
+      return destination ? dest : loop(dest);
+    }
 
-      /**
-       * Calculate the closest slide index from the given position.
-       *
-       * @param {number} position - A position converted to an slide index.
-       *
-       * @return {number} - The closest slide index.
-       */
-      toIndex: function toIndex(position) {
-        var _this7 = this;
-
-        var index = 0;
-        var minDistance = Infinity;
-        Elements.getSlides(true).forEach(function (Slide) {
-          var slideIndex = Slide.index;
-          var distance = abs$1(_this7.toPosition(slideIndex) - position);
-
-          if (distance < minDistance) {
-            minDistance = distance;
-            index = slideIndex;
+    function computeDestIndex(dest, from, incremental) {
+      if (isEnough()) {
+        var end = getEnd();
+
+        if (dest < 0 || dest > end) {
+          if (between(0, dest, from, true) || between(end, from, dest, true)) {
+            dest = toIndex(toPage(dest));
+          } else {
+            if (isLoop) {
+              dest = perMove ? dest : dest < 0 ? -(slideCount % perPage || perPage) : slideCount;
+            } else if (options.rewind) {
+              dest = dest < 0 ? end : 0;
+            } else {
+              dest = -1;
+            }
           }
-        });
-        return index;
-      },
+        } else {
+          if (!isLoop && !incremental && dest !== from) {
+            dest = perMove ? dest : toIndex(toPage(from) + (dest < from ? -1 : 1));
+          }
+        }
+      } else {
+        dest = -1;
+      }
 
-      /**
-       * Return coordinates object by the given position.
-       *
-       * @param {number} position - A position value.
-       *
-       * @return {Object} - A coordinates object.
-       */
-      toCoord: function toCoord(position) {
-        return {
-          x: isVertical ? 0 : position,
-          y: isVertical ? position : 0
-        };
-      },
+      return dest;
+    }
 
-      /**
-       * Calculate the track position by a slide index.
-       *
-       * @param {number} index - Slide index.
-       *
-       * @return {Object} - Calculated position.
-       */
-      toPosition: function toPosition(index) {
-        var position = Layout.totalSize(index) - Layout.slideSize(index) - Layout.gap;
-        return sign * (position + this.offset(index));
-      },
+    function getEnd() {
+      var end = slideCount - perPage;
 
-      /**
-       * Return the current offset value, considering direction.
-       *
-       * @return {number} - Offset amount.
-       */
-      offset: function offset(index) {
-        var focus = Splide.options.focus;
-        var slideSize = Layout.slideSize(index);
-
-        if (focus === 'center') {
-          return -(Layout.size - slideSize) / 2;
-        }
+      if (hasFocus() || isLoop && perMove) {
+        end = slideCount - 1;
+      }
 
-        return -(parseInt(focus) || 0) * (slideSize + Layout.gap);
-      },
+      return max(end, 0);
+    }
 
-      /**
-       * Return the current position.
-       * This returns the correct position even while transitioning by CSS.
-       *
-       * @return {number} - Current position.
-       */
-      get position() {
-        var prop = isVertical ? 'top' : isRTL ? 'right' : 'left';
-        return getRect(list)[prop] - (getRect(Elements.track)[prop] - Layout.padding[prop] * sign);
+    function loop(index) {
+      if (isLoop) {
+        return isEnough() ? index % slideCount + (index < 0 ? slideCount : 0) : -1;
       }
 
-    };
-    /**
-     * Called whenever slides arrive at a destination.
-     *
-     * @param {number}  destIndex - A destination index.
-     * @param {number}  newIndex  - A new index.
-     * @param {number}  prevIndex - A previous index.
-     * @param {boolean} silently  - If true, suppress emitting events.
-     */
-
-    function onTransitionEnd(destIndex, newIndex, prevIndex, silently) {
-      applyStyle(list, {
-        transition: ''
-      });
-      isLoopPending = false;
+      return index;
+    }
+
+    function toIndex(page) {
+      return clamp(hasFocus() ? page : perPage * page, 0, getEnd());
+    }
 
-      if (!isFade) {
-        Track.jump(newIndex);
+    function toPage(index) {
+      if (!hasFocus()) {
+        index = between(index, slideCount - perPage, slideCount - 1) ? slideCount - 1 : index;
+        index = floor(index / perPage);
       }
 
-      if (!silently) {
-        Splide.emit('moved', newIndex, prevIndex, destIndex);
+      return index;
+    }
+
+    function setIndex(index) {
+      if (index !== currIndex) {
+        prevIndex = currIndex;
+        currIndex = index;
       }
     }
-    /**
-     * Convert index to the trimmed position.
-     *
-     * @return {number} - Trimmed position.
-     */
 
+    function getIndex(prev) {
+      return prev ? prevIndex : currIndex;
+    }
 
-    function getTrimmedPosition(index) {
-      return Track.trim(Track.toPosition(index));
+    function hasFocus() {
+      return !isUndefined(options.focus) || options.isNavigation;
     }
 
-    return Track;
-  };
-  /**
-   * The component for cloning some slides for "loop" mode of the track.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for cloning some slides for "loop" mode of the track.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var Clones = function Clones(Splide, Components) {
-    /**
-     * Store information of all clones.
-     *
-     * @type {Array}
-     */
-    var clones = [];
-    /**
-     * Store the current clone count on one side.
-     *
-     * @type {number}
-     */
-
-    var cloneCount = 0;
-    /**
-     * Keep Elements component.
-     *
-     * @type {Object}
-     */
-
-    var Elements = Components.Elements;
-    /**
-     * Clones component object.
-     *
-     * @type {Object}
-     */
-
-    var Clones = {
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        var _this8 = this;
-
-        if (Splide.is(LOOP)) {
-          init();
-          Splide.on('refresh:before', function () {
-            _this8.destroy();
-          }).on('refresh', init).on('resize', function () {
-            if (cloneCount !== getCloneCount()) {
-              // Destroy before refresh not to collect clones by the Elements component.
-              _this8.destroy();
-
-              Splide.refresh();
-            }
-          });
-        }
-      },
+    return {
+      mount: mount,
+      go: go,
+      getNext: getNext,
+      getPrev: getPrev,
+      getEnd: getEnd,
+      setIndex: setIndex,
+      getIndex: getIndex,
+      toIndex: toIndex,
+      toPage: toPage,
+      hasFocus: hasFocus
+    };
+  }
 
-      /**
-       * Destroy.
-       */
-      destroy: function destroy() {
-        _remove(clones);
+  var XML_NAME_SPACE = "http://www.w3.org/2000/svg";
+  var 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";
+  var SIZE = 40;
 
-        clones = [];
-      },
+  function Arrows(Splide2, Components2, options) {
+    var _EventInterface8 = EventInterface(Splide2),
+        on = _EventInterface8.on,
+        bind = _EventInterface8.bind,
+        emit = _EventInterface8.emit;
+
+    var classes = options.classes,
+        i18n = options.i18n;
+    var Elements = Components2.Elements,
+        Controller = Components2.Controller;
+    var wrapper = Elements.arrows;
+    var prev = Elements.prev;
+    var next = Elements.next;
+    var created;
+    var arrows = {};
 
-      /**
-       * Return all clones.
-       *
-       * @return {Element[]} - Cloned elements.
-       */
-      get clones() {
-        return clones;
-      },
+    function mount() {
+      init();
+      on(EVENT_UPDATED, init);
+    }
 
-      /**
-       * Return clone length.
-       *
-       * @return {number} - A length of clones.
-       */
-      get length() {
-        return clones.length;
+    function init() {
+      if (options.arrows) {
+        if (!prev || !next) {
+          createArrows();
+        }
       }
 
-    };
-    /**
-     * Initialization.
-     */
+      if (prev && next) {
+        if (!arrows.prev) {
+          var id = Elements.track.id;
+          setAttribute(prev, ARIA_CONTROLS, id);
+          setAttribute(next, ARIA_CONTROLS, id);
+          arrows.prev = prev;
+          arrows.next = next;
+          listen();
+          emit(EVENT_ARROWS_MOUNTED, prev, next);
+        } else {
+          display(wrapper, options.arrows === false ? "none" : "");
+        }
+      }
+    }
 
-    function init() {
-      Clones.destroy();
-      cloneCount = getCloneCount();
-      generateClones(cloneCount);
+    function destroy() {
+      if (created) {
+        remove(wrapper);
+      } else {
+        removeAttribute(prev, ALL_ATTRIBUTES);
+        removeAttribute(next, ALL_ATTRIBUTES);
+      }
     }
-    /**
-     * Generate and append/prepend clones.
-     *
-     * @param {number} count - The half number of clones.
-     */
 
+    function listen() {
+      var go = Controller.go;
+      on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update);
+      bind(next, "click", function () {
+        go(">", true);
+      });
+      bind(prev, "click", function () {
+        go("<", true);
+      });
+    }
 
-    function generateClones(count) {
-      var length = Elements.length,
-          register = Elements.register;
+    function createArrows() {
+      wrapper = create("div", classes.arrows);
+      prev = createArrow(true);
+      next = createArrow(false);
+      created = true;
+      append(wrapper, [prev, next]);
+      before(wrapper, child(options.arrows === "slider" && Elements.slider || Splide2.root));
+    }
 
-      if (length) {
-        var slides = Elements.slides;
+    function createArrow(prev2) {
+      var arrow = "<button class=\"" + classes.arrow + " " + (prev2 ? classes.prev : classes.next) + "\" type=\"button\"><svg xmlns=\"" + XML_NAME_SPACE + "\" viewBox=\"0 0 " + SIZE + " " + SIZE + "\" width=\"" + SIZE + "\" height=\"" + SIZE + "\"><path d=\"" + (options.arrowPath || PATH) + "\" />";
+      return parseHtml(arrow);
+    }
 
-        while (slides.length < count) {
-          slides = slides.concat(slides);
-        } // Clones after the last element.
-
-
-        slides.slice(0, count).forEach(function (elm, index) {
-          var clone = cloneDeeply(elm);
-          append(Elements.list, clone);
-          clones.push(clone);
-          register(clone, index + length, index % length);
-        }); // Clones before the first element.
-
-        slides.slice(-count).forEach(function (elm, index) {
-          var clone = cloneDeeply(elm);
-          before(clone, slides[0]);
-          clones.push(clone);
-          register(clone, index - count, (length + index - count % length) % length);
-        });
-      }
+    function update() {
+      var index = Splide2.index;
+      var prevIndex = Controller.getPrev();
+      var nextIndex = Controller.getNext();
+      var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
+      var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
+      prev.disabled = prevIndex < 0;
+      next.disabled = nextIndex < 0;
+      setAttribute(prev, ARIA_LABEL, prevLabel);
+      setAttribute(next, ARIA_LABEL, nextLabel);
+      emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex);
     }
-    /**
-     * Return half count of clones to be generated.
-     * Clone count is determined by:
-     * - "clones" value in the options.
-     * - Number of slides that can be placed in a view in "fixed" mode.
-     * - Max pages a flick action can move.
-     * - Whether the slide length is enough for perPage.
-     *
-     * @return {number} - Count for clones.
-     */
 
+    return {
+      arrows: arrows,
+      mount: mount,
+      destroy: destroy
+    };
+  }
 
-    function getCloneCount() {
-      var options = Splide.options;
+  function Autoplay(Splide2, Components2, options) {
+    var _EventInterface9 = EventInterface(Splide2),
+        on = _EventInterface9.on,
+        bind = _EventInterface9.bind,
+        emit = _EventInterface9.emit;
 
-      if (options.clones) {
-        return options.clones;
-      } // Use the slide length in autoWidth mode because the number cannot be calculated.
+    var Elements = Components2.Elements;
+    var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, ">"), update);
+    var isPaused = interval.isPaused;
+    var hovered;
+    var focused;
+    var paused;
 
+    function mount() {
+      var autoplay = options.autoplay;
 
-      var baseCount = options.autoWidth || options.autoHeight ? Elements.length : options.perPage;
-      var dimension = options.direction === TTB ? 'Height' : 'Width';
-      var fixedSize = toPixel(Splide.root, options["fixed" + dimension]);
+      if (autoplay) {
+        initButton(true);
+        initButton(false);
+        listen();
 
-      if (fixedSize) {
-        // Roughly calculate the count. This needs not to be strict.
-        baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
+        if (autoplay !== "pause") {
+          play();
+        }
       }
-
-      return baseCount * (options.drag ? options.flickMaxPages + 1 : 1);
     }
-    /**
-     * Clone deeply the given element.
-     *
-     * @param {Element} elm - An element being duplicated.
-     *
-     * @return {Node} - A cloned node(element).
-     */
 
+    function initButton(forPause) {
+      var prop = forPause ? "pause" : "play";
+      var button = Elements[prop];
 
-    function cloneDeeply(elm) {
-      var clone = elm.cloneNode(true);
-      addClass(clone, Splide.classes.clone); // ID should not be duplicated.
-
-      removeAttribute(clone, 'id');
-      return clone;
+      if (button) {
+        setAttribute(button, ARIA_CONTROLS, Elements.track.id);
+        setAttribute(button, ARIA_LABEL, options.i18n[prop]);
+        bind(button, "click", forPause ? pause : play);
+      }
     }
 
-    return Clones;
-  };
-  /**
-   * The resolver component for horizontal layout.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The resolver component for horizontal layout.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The resolver object.
-   */
-
-
-  var Horizontal = function Horizontal(Splide, Components) {
-    /**
-     * Keep the Elements component.
-     *
-     * @type {string}
-     */
-    var Elements = Components.Elements;
-    /**
-     * Keep the root element.
-     *
-     * @type {Element}
-     */
-
-    var root = Splide.root;
-    /**
-     * Keep the track element.
-     *
-     * @type {Element}
-     */
-
-    var track;
-    /**
-     * Keep the latest options.
-     *
-     * @type {Element}
-     */
-
-    var options = Splide.options;
-    return {
-      /**
-       * Margin property name.
-       *
-       * @type {string}
-       */
-      margin: 'margin' + (options.direction === RTL ? 'Left' : 'Right'),
-
-      /**
-       * Always 0 because the height will be determined by inner contents.
-       *
-       * @type {number}
-       */
-      height: 0,
-
-      /**
-       * Initialization.
-       */
-      init: function init() {
-        this.resize();
-      },
+    function listen() {
+      var root = Elements.root;
 
-      /**
-       * Resize gap and padding.
-       * This must be called on init.
-       */
-      resize: function resize() {
-        options = Splide.options;
-        track = Elements.track;
-        this.gap = toPixel(root, options.gap);
-        var padding = options.padding;
-        var left = toPixel(root, padding.left || padding);
-        var right = toPixel(root, padding.right || padding);
-        this.padding = {
-          left: left,
-          right: right
-        };
-        applyStyle(track, {
-          paddingLeft: unit(left),
-          paddingRight: unit(right)
+      if (options.pauseOnHover) {
+        bind(root, "mouseenter mouseleave", function (e) {
+          hovered = e.type === "mouseenter";
+          autoToggle();
         });
-      },
+      }
 
-      /**
-       * Return total width from the left of the list to the right of the slide specified by the provided index.
-       *
-       * @param {number} index - Optional. A slide index. If undefined, total width of the slider will be returned.
-       *
-       * @return {number} - Total width to the right side of the specified slide, or 0 for an invalid index.
-       */
-      totalWidth: function totalWidth(index) {
-        if (index === void 0) {
-          index = Splide.length - 1;
-        }
+      if (options.pauseOnFocus) {
+        bind(root, "focusin focusout", function (e) {
+          focused = e.type === "focusin";
+          autoToggle();
+        });
+      }
 
-        var Slide = Elements.getSlide(index);
-        var width = 0;
+      on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);
+    }
 
-        if (Slide) {
-          var slideRect = getRect(Slide.slide);
-          var listRect = getRect(Elements.list);
+    function play() {
+      if (isPaused() && Components2.Slides.isEnough()) {
+        interval.start(!options.resetProgress);
+        focused = hovered = paused = false;
+        emit(EVENT_AUTOPLAY_PLAY);
+      }
+    }
 
-          if (options.direction === RTL) {
-            width = listRect.right - slideRect.left;
-          } else {
-            width = slideRect.right - listRect.left;
-          }
+    function pause(manual) {
+      if (manual === void 0) {
+        manual = true;
+      }
 
-          width += this.gap;
-        }
+      if (!isPaused()) {
+        interval.pause();
+        emit(EVENT_AUTOPLAY_PAUSE);
+      }
 
-        return width;
-      },
+      paused = manual;
+    }
 
-      /**
-       * Return the slide width in px.
-       *
-       * @param {number} index - Slide index.
-       *
-       * @return {number} - The slide width.
-       */
-      slideWidth: function slideWidth(index) {
-        if (options.autoWidth) {
-          var _Slide = Elements.getSlide(index);
-
-          return _Slide ? _Slide.slide.offsetWidth : 0;
+    function autoToggle() {
+      if (!paused) {
+        if (!hovered && !focused) {
+          play();
+        } else {
+          pause(false);
         }
+      }
+    }
 
-        var width = options.fixedWidth || (this.width + this.gap) / options.perPage - this.gap;
-        return toPixel(root, width);
-      },
-
-      /**
-       * Return the slide height in px.
-       *
-       * @return {number} - The slide height.
-       */
-      slideHeight: function slideHeight() {
-        var height = options.height || options.fixedHeight || this.width * options.heightRatio;
-        return toPixel(root, height);
-      },
+    function update(rate) {
+      var bar = Elements.bar;
 
-      /**
-       * Return slider width without padding.
-       *
-       * @return {number} - Current slider width.
-       */
-      get width() {
-        return track.clientWidth - this.padding.left - this.padding.right;
+      if (bar) {
+        style(bar, {
+          width: rate * 100 + "%"
+        });
       }
 
-    };
-  };
-  /**
-   * The resolver component for vertical layout.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The resolver component for vertical layout.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The resolver object.
-   */
-
-
-  var Vertical = function Vertical(Splide, Components) {
-    /**
-     * Keep the Elements component.
-     *
-     * @type {string}
-     */
-    var Elements = Components.Elements;
-    /**
-     * Keep the root element.
-     *
-     * @type {Element}
-     */
-
-    var root = Splide.root;
-    /**
-     * Keep the track element.
-     *
-     * @type {Element}
-     */
-
-    var track;
-    /**
-     * Keep the latest options.
-     *
-     * @type {Element}
-     */
+      emit(EVENT_AUTOPLAY_PLAYING, rate);
+    }
 
-    var options;
     return {
-      /**
-       * Margin property name.
-       *
-       * @type {string}
-       */
-      margin: 'marginBottom',
-
-      /**
-       * Initialization.
-       */
-      init: function init() {
-        this.resize();
-      },
+      mount: mount,
+      destroy: interval.cancel,
+      play: play,
+      pause: pause,
+      isPaused: isPaused
+    };
+  }
+
+  function Cover(Splide2, Components2, options) {
+    var _EventInterface10 = EventInterface(Splide2),
+        on = _EventInterface10.on;
 
-      /**
-       * Resize gap and padding.
-       * This must be called on init.
-       */
-      resize: function resize() {
-        options = Splide.options;
-        track = Elements.track;
-        this.gap = toPixel(root, options.gap);
-        var padding = options.padding;
-        var top = toPixel(root, padding.top || padding);
-        var bottom = toPixel(root, padding.bottom || padding);
-        this.padding = {
-          top: top,
-          bottom: bottom
-        };
-        applyStyle(track, {
-          paddingTop: unit(top),
-          paddingBottom: unit(bottom)
+    function mount() {
+      if (options.cover) {
+        on(EVENT_LAZYLOAD_LOADED, function (img, Slide) {
+          toggle(true, img, Slide);
         });
-      },
+        on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true));
+      }
+    }
 
-      /**
-       * Return total height from the top of the list to the bottom of the slide specified by the provided index.
-       *
-       * @param {number} index - Optional. A slide index. If undefined, total height of the slider will be returned.
-       *
-       * @return {number} - Total height to the bottom of the specified slide, or 0 for an invalid index.
-       */
-      totalHeight: function totalHeight(index) {
-        if (index === void 0) {
-          index = Splide.length - 1;
-        }
+    function destroy() {
+      apply(false);
+    }
 
-        var Slide = Elements.getSlide(index);
+    function apply(cover) {
+      Components2.Slides.forEach(function (Slide) {
+        var img = child(Slide.container || Slide.slide, "img");
 
-        if (Slide) {
-          return getRect(Slide.slide).bottom - getRect(Elements.list).top + this.gap;
+        if (img && img.src) {
+          toggle(cover, img, Slide);
         }
+      });
+    }
 
-        return 0;
-      },
+    function toggle(cover, img, Slide) {
+      Slide.rule("background", cover ? "center/cover no-repeat url(\"" + img.src + "\")" : "", true);
+      display(img, cover ? "none" : "");
+    }
 
-      /**
-       * Return the slide width in px.
-       *
-       * @return {number} - The slide width.
-       */
-      slideWidth: function slideWidth() {
-        return toPixel(root, options.fixedWidth || this.width);
-      },
+    return {
+      mount: mount,
+      destroy: destroy
+    };
+  }
 
-      /**
-       * Return the slide height in px.
-       *
-       * @param {number} index - Slide index.
-       *
-       * @return {number} - The slide height.
-       */
-      slideHeight: function slideHeight(index) {
-        if (options.autoHeight) {
-          var _Slide2 = Elements.getSlide(index);
-
-          return _Slide2 ? _Slide2.slide.offsetHeight : 0;
-        }
+  var BOUNCE_DIFF_THRESHOLD = 10;
+  var BOUNCE_DURATION = 600;
+  var FRICTION_FACTOR = 0.6;
+  var BASE_VELOCITY = 1.5;
+  var MIN_DURATION = 800;
+
+  function Scroll(Splide2, Components2, options) {
+    var _EventInterface11 = EventInterface(Splide2),
+        on = _EventInterface11.on,
+        emit = _EventInterface11.emit;
+
+    var Move = Components2.Move;
+    var getPosition = Move.getPosition,
+        getLimit = Move.getLimit,
+        exceededLimit = Move.exceededLimit;
+    var interval;
 
-        var height = options.fixedHeight || (this.height + this.gap) / options.perPage - this.gap;
-        return toPixel(root, height);
-      },
+    function mount() {
+      on(EVENT_MOVE, clear);
+      on([EVENT_UPDATED, EVENT_REFRESH], cancel);
+    }
 
-      /**
-       * Return slider width without padding.
-       *
-       * @return {number} - Current slider width.
-       */
-      get width() {
-        return track.clientWidth;
-      },
+    function scroll(destination, duration, suppressConstraint) {
+      var start = getPosition();
+      var friction = 1;
+      duration = duration || computeDuration(abs(destination - start));
+      clear();
+      interval = RequestInterval(duration, onScrolled, function (rate) {
+        var position = getPosition();
+        var target = start + (destination - start) * easing(rate);
+        var diff = (target - getPosition()) * friction;
+        Move.translate(position + diff);
 
-      /**
-       * Return slide height without padding.
-       *
-       * @return {number} - Slider height.
-       */
-      get height() {
-        var height = options.height || this.width * options.heightRatio;
-        exist(height, '"height" or "heightRatio" is missing.');
-        return toPixel(root, height) - this.padding.top - this.padding.bottom;
-      }
+        if (Splide2.is(SLIDE) && !suppressConstraint && exceededLimit()) {
+          friction *= FRICTION_FACTOR;
 
-    };
-  };
-  /**
-   * A package of utility functions related with time.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Simple throttle function that controls how often the given function is executed.
-   *
-   * @param {function} func - A function to be throttled.
-   * @param {number}   wait - Time in millisecond for interval of execution.
-   *
-   * @return {Function} - A debounced function.
-   */
-
-
-  function throttle(func, wait) {
-    var timeout; // Declare function by the "function" keyword to prevent "this" from being inherited.
-
-    return function () {
-      if (!timeout) {
-        timeout = setTimeout(function () {
-          func();
-          timeout = null;
-        }, wait);
-      }
-    };
-  }
-  /**
-   * Custom setInterval function that provides progress rate as callback.
-   *
-   * @param {function} callback - A callback function fired every time the interval time passes.
-   * @param {number}   interval - Interval duration in milliseconds.
-   * @param {function} progress - A callback function fired whenever the progress goes.
-   *
-   * @return {Object} - An object containing play() and pause() functions.
-   */
-
-
-  function createInterval(callback, interval, progress) {
-    var _window = window,
-        requestAnimationFrame = _window.requestAnimationFrame;
-    var start,
-        elapse,
-        rate,
-        _pause = true;
-
-    var step = function step(timestamp) {
-      if (!_pause) {
-        if (!start) {
-          start = timestamp;
-
-          if (rate && rate < 1) {
-            start -= rate * interval;
+          if (abs(diff) < BOUNCE_DIFF_THRESHOLD) {
+            bounce(exceededLimit(false));
           }
         }
+      }, 1);
+      emit(EVENT_SCROLL);
+      interval.start();
+    }
 
-        elapse = timestamp - start;
-        rate = elapse / interval;
+    function bounce(backwards) {
+      scroll(getLimit(!backwards), BOUNCE_DURATION, true);
+    }
 
-        if (elapse >= interval) {
-          start = 0;
-          rate = 1;
-          callback();
-        }
+    function onScrolled() {
+      emit(EVENT_SCROLLED);
+    }
 
-        if (progress) {
-          progress(rate);
-        }
+    function computeDuration(distance) {
+      return max(distance / BASE_VELOCITY, MIN_DURATION);
+    }
 
-        requestAnimationFrame(step);
+    function clear() {
+      if (interval) {
+        interval.cancel();
       }
-    };
+    }
 
-    return {
-      pause: function pause() {
-        _pause = true;
-        start = 0;
-      },
-      play: function play(reset) {
-        start = 0;
+    function cancel() {
+      if (interval && !interval.isPaused()) {
+        clear();
+        onScrolled();
+      }
+    }
 
-        if (reset) {
-          rate = 0;
-        }
+    function easing(t) {
+      var easingFunc = options.easingFunc;
+      return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4);
+    }
 
-        if (_pause) {
-          _pause = false;
-          requestAnimationFrame(step);
-        }
-      }
+    return {
+      mount: mount,
+      destroy: clear,
+      scroll: scroll,
+      cancel: cancel
     };
   }
-  /**
-   * The component for handing slide layouts and their sizes.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for handing slide layouts and their sizes.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var Layout = function Layout(Splide, Components) {
-    /**
-     * Keep the Elements component.
-     *
-     * @type {string}
-     */
-    var Elements = Components.Elements;
-    /**
-     * Whether the slider is vertical or not.
-     *
-     * @type {boolean}
-     */
-
-    var isVertical = Splide.options.direction === TTB;
-    /**
-     * Layout component object.
-     *
-     * @type {Object}
-     */
-
-    var Layout = assign({
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        bind();
-        init(); // The word "size" means width for a horizontal slider and height for a vertical slider.
-
-        this.totalSize = isVertical ? this.totalHeight : this.totalWidth;
-        this.slideSize = isVertical ? this.slideHeight : this.slideWidth;
-      },
-
-      /**
-       * Destroy the component.
-       */
-      destroy: function destroy() {
-        removeAttribute([Elements.list, Elements.track], 'style');
-      },
-
-      /**
-       * Return the slider height on the vertical mode or width on the horizontal mode.
-       *
-       * @return {number}
-       */
-      get size() {
-        return isVertical ? this.height : this.width;
-      }
 
-    }, isVertical ? Vertical(Splide, Components) : Horizontal(Splide, Components));
-    /**
-     * Init slider styles according to options.
-     */
+  var FRICTION = 5;
+  var LOG_INTERVAL = 50;
+  var POINTER_DOWN_EVENTS = "touchstart mousedown";
+  var POINTER_MOVE_EVENTS = "touchmove mousemove";
+  var POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+
+  function Drag(Splide2, Components2, options) {
+    var _EventInterface12 = EventInterface(Splide2),
+        on = _EventInterface12.on,
+        emit = _EventInterface12.emit,
+        bind = _EventInterface12.bind,
+        unbind = _EventInterface12.unbind;
+
+    var Move = Components2.Move,
+        Scroll = Components2.Scroll,
+        Controller = Components2.Controller;
+    var track = Components2.Elements.track;
+    var _Components2$Directio2 = Components2.Direction,
+        resolve = _Components2$Directio2.resolve,
+        orient = _Components2$Directio2.orient;
+    var getPosition = Move.getPosition,
+        exceededLimit = Move.exceededLimit;
+    var isSlide = Splide2.is(SLIDE);
+    var isFade = Splide2.is(FADE);
+    var basePosition;
+    var baseEvent;
+    var prevBaseEvent;
+    var lastEvent;
+    var isFree;
+    var isDragging;
+    var isMouse;
+    var hasExceeded = false;
+    var clickPrevented;
+    var disabled;
+    var target;
 
-    function init() {
-      Layout.init();
-      applyStyle(Splide.root, {
-        maxWidth: unit(Splide.options.width)
+    function mount() {
+      bind(track, POINTER_DOWN_EVENTS, onPointerDown, {
+        passive: false,
+        capture: true
       });
-      Elements.each(function (Slide) {
-        Slide.slide.style[Layout.margin] = unit(Layout.gap);
+      bind(track, "click", onClick, {
+        capture: true
       });
-      resize();
-    }
-    /**
-     * Listen the resize native event with throttle.
-     * Initialize when the component is mounted or options are updated.
-     */
-
-
-    function bind() {
-      Splide.on('resize load', throttle(function () {
-        Splide.emit('resize');
-      }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
+      on([EVENT_MOUNTED, EVENT_UPDATED], init);
     }
-    /**
-     * Resize the track and slide elements.
-     */
 
-
-    function resize() {
-      var options = Splide.options;
-      Layout.resize();
-      applyStyle(Elements.track, {
-        height: unit(Layout.height)
-      });
-      var slideHeight = options.autoHeight ? null : unit(Layout.slideHeight());
-      Elements.each(function (Slide) {
-        applyStyle(Slide.container, {
-          height: slideHeight
-        });
-        applyStyle(Slide.slide, {
-          width: options.autoWidth ? null : unit(Layout.slideWidth(Slide.index)),
-          height: Slide.container ? null : slideHeight
-        });
-      });
-      Splide.emit('resized');
-    }
-
-    return Layout;
-  };
-  /**
-   * The component for supporting mouse drag and swipe.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-
-  var abs = Math.abs;
-  /**
-   * If the absolute velocity is greater thant this value,
-   * a slider always goes to a different slide after drag, not allowed to stay on a current slide.
-   */
-
-  var MIN_VELOCITY = 0.1;
-  /**
-   * Adjust how much the track can be pulled on the first or last page.
-   * The larger number this is, the farther the track moves.
-   * This should be around 5 - 9.
-   *
-   * @type {number}
-   */
-
-  var FRICTION_REDUCER = 7;
-  /**
-   * The component supporting mouse drag and swipe.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Drag = function Drag(Splide, Components) {
-    /**
-     * Store the Move component.
-     *
-     * @type {Object}
-     */
-    var Track = Components.Track;
-    /**
-     * Store the Controller component.
-     *
-     * @type {Object}
-     */
-
-    var Controller = Components.Controller;
-    /**
-     * Coordinate of the track on starting drag.
-     *
-     * @type {Object}
-     */
-
-    var startCoord;
-    /**
-     * Analyzed info on starting drag.
-     *
-     * @type {Object|null}
-     */
-
-    var startInfo;
-    /**
-     * Analyzed info being updated while dragging/swiping.
-     *
-     * @type {Object}
-     */
-
-    var currentInfo;
-    /**
-     * Determine whether slides are being dragged or not.
-     *
-     * @type {boolean}
-     */
-
-    var isDragging;
-    /**
-     * Whether the slider direction is vertical or not.
-     *
-     * @type {boolean}
-     */
-
-    var isVertical = Splide.options.direction === TTB;
-    /**
-     * Axis for the direction.
-     *
-     * @type {string}
-     */
-
-    var axis = isVertical ? 'y' : 'x';
-    /**
-     * Drag component object.
-     *
-     * @type {Object}
-     */
-
-    var Drag = {
-      /**
-       * Whether dragging is disabled or not.
-       *
-       * @type {boolean}
-       */
-      disabled: false,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        var _this9 = this;
-
-        var Elements = Components.Elements;
-        var track = Elements.track;
-        Splide.on('touchstart mousedown', start, track).on('touchmove mousemove', move, track, {
-          passive: false
-        }).on('touchend touchcancel mouseleave mouseup dragend', end, track).on('mounted refresh', function () {
-          // Prevent dragging an image or anchor itself.
-          each(Elements.list.querySelectorAll('img, a'), function (elm) {
-            Splide.off('dragstart', elm).on('dragstart', function (e) {
-              e.preventDefault();
-            }, elm, {
-              passive: false
-            });
-          });
-        }).on('mounted updated', function () {
-          _this9.disabled = !Splide.options.drag;
-        });
-      }
-    };
-    /**
-     * Called when the track starts to be dragged.
-     *
-     * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-     */
-
-    function start(e) {
-      if (!Drag.disabled && !isDragging) {
-        // These prams are used to evaluate whether the slider should start moving.
-        init(e);
+    function init() {
+      var drag = options.drag;
+      disable(!drag);
+      isFree = drag === "free";
+    }
+
+    function onPointerDown(e) {
+      if (!disabled) {
+        isMouse = e.type === "mousedown";
+
+        if (!isMouse || !e.button) {
+          if (!Move.isBusy()) {
+            target = isMouse ? window : track;
+            prevBaseEvent = null;
+            lastEvent = null;
+            clickPrevented = false;
+            bind(target, POINTER_MOVE_EVENTS, onPointerMove);
+            bind(target, POINTER_UP_EVENTS, onPointerUp);
+            Move.cancel();
+            Scroll.cancel();
+            save(e);
+          } else {
+            prevent(e, true);
+          }
+        }
       }
     }
-    /**
-     * Initialize parameters.
-     *
-     * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-     */
-
-
-    function init(e) {
-      startCoord = Track.toCoord(Track.position);
-      startInfo = analyze(e, {});
-      currentInfo = startInfo;
-    }
-    /**
-     * Called while the track being dragged.
-     *
-     * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-     */
 
+    function onPointerMove(e) {
+      if (!lastEvent) {
+        clickPrevented = true;
+        emit(EVENT_DRAG);
+      }
 
-    function move(e) {
-      if (startInfo) {
-        currentInfo = analyze(e, startInfo);
+      lastEvent = e;
 
+      if (e.cancelable) {
         if (isDragging) {
-          if (e.cancelable) {
-            e.preventDefault();
+          var expired = timeOf(e) - timeOf(baseEvent) > LOG_INTERVAL;
+          var exceeded = hasExceeded !== (hasExceeded = exceededLimit());
+
+          if (expired || exceeded) {
+            save(e);
           }
 
-          if (!Splide.is(FADE)) {
-            var position = startCoord[axis] + currentInfo.offset[axis];
-            Track.translate(resist(position));
+          if (!isFade) {
+            Move.translate(basePosition + constrain(coordOf(e) - coordOf(baseEvent)));
           }
+
+          emit(EVENT_DRAGGING);
+          prevent(e);
         } else {
-          if (shouldMove(currentInfo)) {
-            Splide.emit('drag', startInfo);
-            isDragging = true;
-            Track.cancel(); // These params are actual drag data.
+          var threshold = options.dragMinThreshold || 15;
+          isDragging = isMouse || abs(coordOf(e) - coordOf(baseEvent)) > threshold;
 
-            init(e);
+          if (isSliderDirection()) {
+            prevent(e);
           }
         }
       }
     }
-    /**
-     * Determine whether to start moving the track or not by drag angle.
-     *
-     * @param {Object} info - An information object.
-     *
-     * @return {boolean} - True if the track should be moved or false if not.
-     */
 
+    function onPointerUp(e) {
+      unbind(target, POINTER_MOVE_EVENTS + " " + POINTER_UP_EVENTS);
 
-    function shouldMove(_ref3) {
-      var offset = _ref3.offset;
+      if (lastEvent) {
+        if (isDragging || e.cancelable && isSliderDirection()) {
+          var velocity = computeVelocity(e);
+          var destination = computeDestination(velocity);
 
-      if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
-        return false;
-      }
+          if (isFree) {
+            Scroll.scroll(destination);
+          } else if (isFade) {
+            Controller.go(Splide2.index + orient(sign(velocity)));
+          } else {
+            Controller.go(computeIndex(destination), true);
+          }
 
-      var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
+          prevent(e);
+        }
 
-      if (isVertical) {
-        angle = 90 - angle;
+        emit(EVENT_DRAGGED);
       }
 
-      return angle < Splide.options.dragAngleThreshold;
+      isDragging = false;
     }
-    /**
-     * Resist dragging the track on the first/last page because there is no more.
-     *
-     * @param {number} position - A position being applied to the track.
-     *
-     * @return {Object} - Adjusted position.
-     */
-
 
-    function resist(position) {
-      if (Splide.is(SLIDE)) {
-        var sign = Track.sign;
+    function save(e) {
+      prevBaseEvent = baseEvent;
+      baseEvent = e;
+      basePosition = getPosition();
+    }
 
-        var _start = sign * Track.trim(Track.toPosition(0));
+    function onClick(e) {
+      if (!disabled && clickPrevented) {
+        prevent(e, true);
+      }
+    }
 
-        var _end = sign * Track.trim(Track.toPosition(Controller.edgeIndex));
+    function isSliderDirection() {
+      var diffX = abs(coordOf(lastEvent) - coordOf(baseEvent));
+      var diffY = abs(coordOf(lastEvent, true) - coordOf(baseEvent, true));
+      return diffX > diffY;
+    }
 
-        position *= sign;
+    function computeVelocity(e) {
+      if (Splide2.is(LOOP) || !hasExceeded) {
+        var base = baseEvent === lastEvent && prevBaseEvent || baseEvent;
+        var diffCoord = coordOf(lastEvent) - coordOf(base);
+        var diffTime = timeOf(e) - timeOf(base);
+        var isFlick = timeOf(e) - timeOf(lastEvent) < LOG_INTERVAL;
 
-        if (position < _start) {
-          position = _start - FRICTION_REDUCER * Math.log(_start - position);
-        } else if (position > _end) {
-          position = _end + FRICTION_REDUCER * Math.log(position - _end);
+        if (diffTime && isFlick) {
+          return diffCoord / diffTime;
         }
-
-        position *= sign;
       }
 
-      return position;
+      return 0;
     }
-    /**
-     * Called when dragging ends.
-     */
 
+    function computeDestination(velocity) {
+      return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));
+    }
 
-    function end() {
-      startInfo = null;
+    function computeIndex(destination) {
+      var dest = Move.toIndex(destination);
+      return isSlide ? clamp(dest, 0, Controller.getEnd()) : dest;
+    }
 
-      if (isDragging) {
-        Splide.emit('dragged', currentInfo);
-        go(currentInfo);
-        isDragging = false;
-      }
+    function coordOf(e, orthogonal) {
+      var prop = "page" + resolve(orthogonal ? "Y" : "X");
+      return (isMouse ? e : e.touches[0])[prop];
     }
-    /**
-     * Go to the slide determined by the analyzed data.
-     *
-     * @param {Object} info - An info object.
-     */
 
+    function timeOf(e) {
+      return e.timeStamp;
+    }
 
-    function go(info) {
-      var velocity = info.velocity[axis];
-      var absV = abs(velocity);
+    function constrain(diff) {
+      return diff / (hasExceeded && isSlide ? FRICTION : 1);
+    }
 
-      if (absV > 0) {
-        var options = Splide.options;
-        var index = Splide.index;
-        var sign = velocity < 0 ? -1 : 1;
-        var destIndex = index;
+    function disable(value) {
+      disabled = value;
+    }
 
-        if (!Splide.is(FADE)) {
-          var destination = Track.position;
+    return {
+      mount: mount,
+      disable: disable
+    };
+  }
 
-          if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
-            destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
-          }
+  var IE_ARROW_KEYS = ["Left", "Right", "Up", "Down"];
 
-          destIndex = Track.toIndex(destination);
-        }
-        /*
-         * Do not allow the track to go to a previous position if there is enough velocity.
-         * Always use the adjacent index for the fade mode.
-         */
+  function Keyboard(Splide2, Components2, options) {
+    var _EventInterface13 = EventInterface(Splide2),
+        on = _EventInterface13.on,
+        bind = _EventInterface13.bind,
+        unbind = _EventInterface13.unbind;
 
+    var root = Components2.Elements.root;
+    var resolve = Components2.Direction.resolve;
+    var target;
 
-        if (destIndex === index && absV > MIN_VELOCITY) {
-          destIndex = index + sign * Track.sign;
-        }
+    function mount() {
+      init();
+      on(EVENT_UPDATED, function () {
+        destroy();
+        init();
+      });
+    }
+
+    function init() {
+      var _options$keyboard = options.keyboard,
+          keyboard = _options$keyboard === void 0 ? "global" : _options$keyboard;
 
-        if (Splide.is(SLIDE)) {
-          destIndex = between(destIndex, 0, Controller.edgeIndex);
+      if (keyboard) {
+        if (keyboard === "focused") {
+          target = root;
+          setAttribute(root, TAB_INDEX, 0);
+        } else {
+          target = window;
         }
 
-        Controller.go(destIndex, options.isNavigation);
+        bind(target, "keydown", onKeydown);
       }
     }
-    /**
-     * Analyze the given event object and return important information for handling swipe behavior.
-     *
-     * @param {Event}   e          - Touch or Mouse event object.
-     * @param {Object}  startInfo  - Information analyzed on start for calculating difference from the current one.
-     *
-     * @return {Object} - An object containing analyzed information, such as offset, velocity, etc.
-     */
-
-
-    function analyze(e, startInfo) {
-      var timeStamp = e.timeStamp,
-          touches = e.touches;
-
-      var _ref4 = touches ? touches[0] : e,
-          clientX = _ref4.clientX,
-          clientY = _ref4.clientY;
-
-      var _ref5 = startInfo.to || {},
-          _ref5$x = _ref5.x,
-          fromX = _ref5$x === void 0 ? clientX : _ref5$x,
-          _ref5$y = _ref5.y,
-          fromY = _ref5$y === void 0 ? clientY : _ref5$y;
-
-      var startTime = startInfo.time || 0;
-      var offset = {
-        x: clientX - fromX,
-        y: clientY - fromY
-      };
-      var duration = timeStamp - startTime;
-      var velocity = {
-        x: offset.x / duration,
-        y: offset.y / duration
-      };
-      return {
-        to: {
-          x: clientX,
-          y: clientY
-        },
-        offset: offset,
-        time: timeStamp,
-        velocity: velocity
-      };
-    }
-
-    return Drag;
-  };
-  /**
-   * The component for handling a click event.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for handling a click event.
-   * Click should be disabled during drag/swipe.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var Click = function Click(Splide, Components) {
-    /**
-     * Whether click is disabled or not.
-     *
-     * @type {boolean}
-     */
-    var disabled = false;
-    /**
-     * Click component object.
-     *
-     * @type {Object}
-     */
-
-    var Click = {
-      /**
-       * Mount only when the drag is activated and the slide type is not "fade".
-       *
-       * @type {boolean}
-       */
-      required: Splide.options.drag,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        Splide.on('click', onClick, Components.Elements.track, {
-          capture: true
-        }).on('drag', function () {
-          disabled = true;
-        }).on('dragged', function () {
-          // Make sure the flag is released after the click event is fired.
-          setTimeout(function () {
-            disabled = false;
-          });
-        });
-      }
-    };
-    /**
-     * Called when a track element is clicked.
-     *
-     * @param {Event} e - A click event.
-     */
 
-    function onClick(e) {
-      if (disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
+    function destroy() {
+      unbind(target, "keydown");
+
+      if (isHTMLElement(target)) {
+        removeAttribute(target, TAB_INDEX);
       }
     }
 
-    return Click;
-  };
-  /**
-   * The component for playing slides automatically.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Set of pause flags.
-   */
-
-
-  var PAUSE_FLAGS = {
-    HOVER: 1,
-    FOCUS: 2,
-    MANUAL: 3
-  };
-  /**
-   * The component for playing slides automatically.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   * @param {string} name       - A component name as a lowercase string.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Autoplay = function Autoplay(Splide, Components, name) {
-    /**
-     * Store pause flags.
-     *
-     * @type {Array}
-     */
-    var flags = [];
-    /**
-     * Store an interval object.
-     *
-     * @type {Object};
-     */
+    function onKeydown(e) {
+      var key = e.key;
+      var normalizedKey = includes(IE_ARROW_KEYS, key) ? "Arrow" + key : key;
 
-    var interval;
-    /**
-     * Keep the Elements component.
-     *
-     * @type {string}
-     */
-
-    var Elements = Components.Elements;
-    /**
-     * Autoplay component object.
-     *
-     * @type {Object}
-     */
-
-    var Autoplay = {
-      /**
-       * Required only when the autoplay option is true.
-       *
-       * @type {boolean}
-       */
-      required: Splide.options.autoplay,
-
-      /**
-       * Called when the component is mounted.
-       * Note that autoplay starts only if there are slides over perPage number.
-       */
-      mount: function mount() {
-        var options = Splide.options;
-
-        if (Elements.slides.length > options.perPage) {
-          interval = createInterval(function () {
-            Splide.go('>');
-          }, options.interval, function (rate) {
-            Splide.emit(name + ":playing", rate);
-
-            if (Elements.bar) {
-              applyStyle(Elements.bar, {
-                width: rate * 100 + "%"
-              });
-            }
-          });
-          bind();
-          this.play();
-        }
-      },
+      if (normalizedKey === resolve("ArrowLeft")) {
+        Splide2.go("<");
+      } else if (normalizedKey === resolve("ArrowRight")) {
+        Splide2.go(">");
+      }
+    }
 
-      /**
-       * Start autoplay.
-       *
-       * @param {number} flag - A pause flag to be removed.
-       */
-      play: function play(flag) {
-        if (flag === void 0) {
-          flag = 0;
-        }
+    return {
+      mount: mount,
+      destroy: destroy
+    };
+  }
 
-        flags = flags.filter(function (f) {
-          return f !== flag;
+  var SRC_DATA_ATTRIBUTE = DATA_ATTRIBUTE + "-lazy";
+  var SRCSET_DATA_ATTRIBUTE = SRC_DATA_ATTRIBUTE + "-srcset";
+  var IMAGE_SELECTOR = "[" + SRC_DATA_ATTRIBUTE + "], [" + SRCSET_DATA_ATTRIBUTE + "]";
+
+  function LazyLoad(Splide2, Components2, options) {
+    var _EventInterface14 = EventInterface(Splide2),
+        on = _EventInterface14.on,
+        off = _EventInterface14.off,
+        bind = _EventInterface14.bind,
+        emit = _EventInterface14.emit;
+
+    var isSequential = options.lazyLoad === "sequential";
+    var images = [];
+    var index = 0;
+
+    function mount() {
+      if (options.lazyLoad) {
+        on([EVENT_MOUNTED, EVENT_REFRESH], function () {
+          destroy();
+          init();
         });
 
-        if (!flags.length) {
-          Splide.emit(name + ":play");
-          interval.play(Splide.options.resetProgress);
-        }
-      },
-
-      /**
-       * Pause autoplay.
-       * Note that Array.includes is not supported by IE.
-       *
-       * @param {number} flag - A pause flag to be added.
-       */
-      pause: function pause(flag) {
-        if (flag === void 0) {
-          flag = 0;
-        }
-
-        interval.pause();
-
-        if (flags.indexOf(flag) === -1) {
-          flags.push(flag);
-        }
-
-        if (flags.length === 1) {
-          Splide.emit(name + ":pause");
+        if (!isSequential) {
+          on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED], observe);
         }
       }
-    };
-    /**
-     * Listen some events.
-     */
+    }
 
-    function bind() {
-      var options = Splide.options;
-      var sibling = Splide.sibling;
-      var elms = [Splide.root, sibling ? sibling.root : null];
+    function init() {
+      Components2.Slides.forEach(function (_Slide) {
+        queryAll(_Slide.slide, IMAGE_SELECTOR).forEach(function (_img) {
+          var src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
+          var srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
+
+          if (src !== _img.src || srcset !== _img.srcset) {
+            var _spinner = create("span", options.classes.spinner, _img.parentElement);
+
+            setAttribute(_spinner, ROLE, "presentation");
+            images.push({
+              _img: _img,
+              _Slide: _Slide,
+              src: src,
+              srcset: srcset,
+              _spinner: _spinner
+            });
+            display(_img, "none");
+          }
+        });
+      });
 
-      if (options.pauseOnHover) {
-        switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
-        switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
+      if (isSequential) {
+        loadNext();
       }
+    }
 
-      if (options.pauseOnFocus) {
-        switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
-        switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
-      }
+    function destroy() {
+      index = 0;
+      images = [];
+    }
 
-      if (Elements.play) {
-        Splide.on('click', function () {
-          // Need to be removed a focus flag at first.
-          Autoplay.play(PAUSE_FLAGS.FOCUS);
-          Autoplay.play(PAUSE_FLAGS.MANUAL);
-        }, Elements.play);
-      }
+    function observe() {
+      images = images.filter(function (data) {
+        if (data._Slide.isWithin(Splide2.index, options.perPage * ((options.preloadPages || 1) + 1))) {
+          return load(data);
+        }
 
-      if (Elements.pause) {
-        switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, false);
+        return true;
+      });
+
+      if (!images.length) {
+        off(EVENT_MOVED);
       }
+    }
 
-      Splide.on('move refresh', function () {
-        Autoplay.play();
-      }) // Rewind the timer.
-      .on('destroy', function () {
-        Autoplay.pause();
+    function load(data) {
+      var _img = data._img;
+      addClass(data._Slide.slide, CLASS_LOADING);
+      bind(_img, "load error", function (e) {
+        onLoad(data, e.type === "error");
       });
-    }
-    /**
-     * Play or pause on the given event.
-     *
-     * @param {Element[]} elms  - Elements.
-     * @param {string}    event - An event name or names.
-     * @param {number}    flag  - A pause flag defined on the top.
-     * @param {boolean}   play  - Determine whether to play or pause.
-     */
-
-
-    function switchOn(elms, event, flag, play) {
-      elms.forEach(function (elm) {
-        Splide.on(event, function () {
-          Autoplay[play ? 'play' : 'pause'](flag);
-        }, elm);
+      ["src", "srcset"].forEach(function (name) {
+        if (data[name]) {
+          setAttribute(_img, name, data[name]);
+          removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
+        }
       });
     }
 
-    return Autoplay;
-  };
-  /**
-   * The component for change an img element to background image of its wrapper.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for change an img element to background image of its wrapper.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var Cover = function Cover(Splide, Components) {
-    /**
-     * Hold options.
-     *
-     * @type {Object}
-     */
-    var options = Splide.options;
-    /**
-     * Cover component object.
-     *
-     * @type {Object}
-     */
-
-    var Cover = {
-      /**
-       * Required only when "cover" option is true.
-       *
-       * @type {boolean}
-       */
-      required: options.cover,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        Splide.on('lazyload:loaded', function (img) {
-          cover(img, false);
-        });
-        Splide.on('mounted updated refresh', function () {
-          return apply(false);
-        });
-      },
+    function onLoad(data, error) {
+      var _Slide = data._Slide;
+      removeClass(_Slide.slide, CLASS_LOADING);
 
-      /**
-       * Destroy.
-       */
-      destroy: function destroy() {
-        apply(true);
+      if (!error) {
+        remove(data._spinner);
+        display(data._img, "");
+        emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
+        emit(EVENT_RESIZE);
       }
-    };
-    /**
-     * Apply "cover" to all slides.
-     *
-     * @param {boolean} uncover - If true, "cover" will be clear.
-     */
 
-    function apply(uncover) {
-      Components.Elements.each(function (Slide) {
-        var img = child(Slide.slide, 'IMG') || child(Slide.container, 'IMG');
-
-        if (img && img.src) {
-          cover(img, uncover);
-        }
-      });
+      if (isSequential) {
+        loadNext();
+      }
     }
-    /**
-     * Set background image of the parent element, using source of the given image element.
-     *
-     * @param {Element} img     - An image element.
-     * @param {boolean} uncover - Reset "cover".
-     */
 
-
-    function cover(img, uncover) {
-      applyStyle(img.parentElement, {
-        background: uncover ? '' : "center/cover no-repeat url(\"" + img.src + "\")"
-      });
-      applyStyle(img, {
-        display: uncover ? '' : 'none'
-      });
+    function loadNext() {
+      if (index < images.length) {
+        load(images[index++]);
+      }
     }
 
-    return Cover;
-  };
-  /**
-   * Export vector path for an arrow.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Namespace definition for SVG element.
-   *
-   * @type {string}
-   */
-
-
-  var XML_NAME_SPACE = 'http://www.w3.org/2000/svg';
-  /**
-   * The arrow vector path.
-   *
-   * @type {number}
-   */
-
-  var 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';
-  /**
-   * SVG width and height.
-   *
-   * @type {number}
-   */
-
-  var SIZE = 40;
-  /**
-   * The component for appending prev/next arrows.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for appending prev/next arrows.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   * @param {string} name       - A component name as a lowercase string.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Arrows = function Arrows(Splide, Components, name) {
-    /**
-     * Previous arrow element.
-     *
-     * @type {Element|undefined}
-     */
-    var prev;
-    /**
-     * Next arrow element.
-     *
-     * @type {Element|undefined}
-     */
-
-    var next;
-    /**
-     * Store the class list.
-     *
-     * @type {Object}
-     */
-
-    var classes = Splide.classes;
-    /**
-     * Hold the root element.
-     *
-     * @type {Element}
-     */
-
-    var root = Splide.root;
-    /**
-     * Whether arrows are created programmatically or not.
-     *
-     * @type {boolean}
-     */
-
-    var created;
-    /**
-     * Hold the Elements component.
-     *
-     * @type {Object}
-     */
-
-    var Elements = Components.Elements;
-    /**
-     * Arrows component object.
-     *
-     * @type {Object}
-     */
-
-    var Arrows = {
-      /**
-       * Required when the arrows option is true.
-       *
-       * @type {boolean}
-       */
-      required: Splide.options.arrows,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        // Attempt to get arrows from HTML source.
-        prev = Elements.arrows.prev;
-        next = Elements.arrows.next; // If arrows were not found in HTML, let's generate them.
-
-        if ((!prev || !next) && Splide.options.arrows) {
-          prev = createArrow(true);
-          next = createArrow(false);
-          created = true;
-          appendArrows();
-        }
-
-        if (prev && next) {
-          bind();
-        }
+    return {
+      mount: mount,
+      destroy: destroy
+    };
+  }
 
-        this.arrows = {
-          prev: prev,
-          next: next
-        };
-      },
+  function Pagination(Splide2, Components2, options) {
+    var _EventInterface15 = EventInterface(Splide2),
+        on = _EventInterface15.on,
+        emit = _EventInterface15.emit,
+        bind = _EventInterface15.bind,
+        unbind = _EventInterface15.unbind;
+
+    var Slides = Components2.Slides,
+        Elements = Components2.Elements,
+        Controller = Components2.Controller;
+    var hasFocus = Controller.hasFocus,
+        getIndex = Controller.getIndex;
+    var items = [];
+    var list;
 
-      /**
-       * Called after all components are mounted.
-       */
-      mounted: function mounted() {
-        Splide.emit(name + ":mounted", prev, next);
-      },
+    function mount() {
+      init();
+      on([EVENT_UPDATED, EVENT_REFRESH], init);
+      on([EVENT_MOVE, EVENT_SCROLLED], update);
+    }
 
-      /**
-       * Destroy.
-       */
-      destroy: function destroy() {
-        removeAttribute([prev, next], 'disabled');
+    function init() {
+      destroy();
 
-        if (created) {
-          _remove(prev.parentElement);
-        }
+      if (options.pagination && Slides.isEnough()) {
+        createPagination();
+        emit(EVENT_PAGINATION_MOUNTED, {
+          list: list,
+          items: items
+        }, getAt(Splide2.index));
+        update();
       }
-    };
-    /**
-     * Listen to native and custom events.
-     */
-
-    function bind() {
-      Splide.on('click', function () {
-        Splide.go('<');
-      }, prev).on('click', function () {
-        Splide.go('>');
-      }, next).on('mounted move updated refresh', updateDisabled);
-    }
-    /**
-     * Update a disabled attribute.
-     */
-
-
-    function updateDisabled() {
-      var _Components$Controlle = Components.Controller,
-          prevIndex = _Components$Controlle.prevIndex,
-          nextIndex = _Components$Controlle.nextIndex;
-      var isEnough = Splide.length > Splide.options.perPage || Splide.is(LOOP);
-      prev.disabled = prevIndex < 0 || !isEnough;
-      next.disabled = nextIndex < 0 || !isEnough;
-      Splide.emit(name + ":updated", prev, next, prevIndex, nextIndex);
-    }
-    /**
-     * Create a wrapper element and append arrows.
-     */
-
-
-    function appendArrows() {
-      var wrapper = create('div', {
-        class: classes.arrows
-      });
-      append(wrapper, prev);
-      append(wrapper, next);
-      var slider = Elements.slider;
-      var parent = Splide.options.arrows === 'slider' && slider ? slider : root;
-      before(wrapper, parent.firstElementChild);
     }
-    /**
-     * Create an arrow element.
-     *
-     * @param {boolean} prev - Determine to create a prev arrow or next arrow.
-     *
-     * @return {Element} - A created arrow element.
-     */
 
-
-    function createArrow(prev) {
-      var arrow = "<button class=\"" + classes.arrow + " " + (prev ? classes.prev : classes.next) + "\" type=\"button\">" + ("<svg xmlns=\"" + XML_NAME_SPACE + "\"\tviewBox=\"0 0 " + SIZE + " " + SIZE + "\"\twidth=\"" + SIZE + "\"\theight=\"" + SIZE + "\">") + ("<path d=\"" + (Splide.options.arrowPath || PATH) + "\" />");
-      return domify(arrow);
+    function destroy() {
+      if (list) {
+        remove(list);
+        items.forEach(function (item) {
+          unbind(item.button, "click");
+        });
+        empty(items);
+        list = null;
+      }
     }
 
-    return Arrows;
-  };
-  /**
-   * The component for handling pagination
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The event name for updating some attributes of pagination nodes.
-   *
-   * @type {string}
-   */
-
-
-  var ATTRIBUTES_UPDATE_EVENT = 'move.page';
-  /**
-   * The event name for recreating pagination.
-   *
-   * @type {string}
-   */
-
-  var UPDATE_EVENT = 'updated.page refresh.page';
-  /**
-   * The component for handling pagination
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   * @param {string} name       - A component name as a lowercase string.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Pagination = function Pagination(Splide, Components, name) {
-    /**
-     * Store all data for pagination.
-     * - list: A list element.
-     * - items: An array that contains objects(li, button, index, page).
-     *
-     * @type {Object}
-     */
-    var data = {};
-    /**
-     * Hold the Elements component.
-     *
-     * @type {Object}
-     */
-
-    var Elements = Components.Elements;
-    /**
-     * Pagination component object.
-     *
-     * @type {Object}
-     */
-
-    var Pagination = {
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        var pagination = Splide.options.pagination;
-
-        if (pagination) {
-          data = createPagination();
-          var slider = Elements.slider;
-          var parent = pagination === 'slider' && slider ? slider : Splide.root;
-          append(parent, data.list);
-          Splide.on(ATTRIBUTES_UPDATE_EVENT, updateAttributes);
-        }
-
-        Splide.off(UPDATE_EVENT).on(UPDATE_EVENT, function () {
-          Pagination.destroy();
-
-          if (Splide.options.pagination) {
-            Pagination.mount();
-            Pagination.mounted();
-          }
+    function createPagination() {
+      var length = Splide2.length;
+      var classes = options.classes,
+          i18n = options.i18n,
+          perPage = options.perPage;
+      var parent = options.pagination === "slider" && Elements.slider || Elements.root;
+      var max = hasFocus() ? length : ceil(length / perPage);
+      list = create("ul", classes.pagination, parent);
+
+      for (var i = 0; i < max; i++) {
+        var li = create("li", null, list);
+        var button = create("button", {
+          class: classes.page,
+          type: "button"
+        }, li);
+        var controls = Slides.getIn(i).map(function (Slide) {
+          return Slide.slide.id;
         });
-      },
-
-      /**
-       * Called after all components are mounted.
-       */
-      mounted: function mounted() {
-        if (Splide.options.pagination) {
-          var index = Splide.index;
-          Splide.emit(name + ":mounted", data, this.getItem(index));
-          updateAttributes(index, -1);
-        }
-      },
-
-      /**
-       * Destroy the pagination.
-       * Be aware that node.remove() is not supported by IE.
-       */
-      destroy: function destroy() {
-        _remove(data.list);
-
-        if (data.items) {
-          data.items.forEach(function (item) {
-            Splide.off('click', item.button);
-          });
-        } // Do not remove UPDATE_EVENT to recreate pagination if needed.
-
-
-        Splide.off(ATTRIBUTES_UPDATE_EVENT);
-        data = {};
-      },
+        var text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
+        bind(button, "click", onClick.bind(null, i));
+        setAttribute(button, ARIA_CONTROLS, controls.join(" "));
+        setAttribute(button, ARIA_LABEL, format(text, i + 1));
+        items.push({
+          li: li,
+          button: button,
+          page: i
+        });
+      }
+    }
 
-      /**
-       * Return an item by index.
-       *
-       * @param {number} index - A slide index.
-       *
-       * @return {Object|undefined} - An item object on success or undefined on failure.
-       */
-      getItem: function getItem(index) {
-        return data.items[Components.Controller.toPage(index)];
-      },
+    function onClick(page) {
+      Controller.go(">" + page, true, function () {
+        var Slide = Slides.getAt(Controller.toIndex(page));
+        Slide && Slide.slide.focus();
+      });
+    }
 
-      /**
-       * Return object containing pagination data.
-       *
-       * @return {Object} - Pagination data including list and items.
-       */
-      get data() {
-        return data;
-      }
+    function getAt(index) {
+      return items[Controller.toPage(index)];
+    }
 
-    };
-    /**
-     * Update attributes.
-     *
-     * @param {number} index     - Active index.
-     * @param {number} prevIndex - Prev index.
-     */
-
-    function updateAttributes(index, prevIndex) {
-      var prev = Pagination.getItem(prevIndex);
-      var curr = Pagination.getItem(index);
-      var active = STATUS_CLASSES.active;
+    function update() {
+      var prev = getAt(getIndex(true));
+      var curr = getAt(getIndex());
 
       if (prev) {
-        removeClass(prev.button, active);
+        removeClass(prev.button, CLASS_ACTIVE);
+        removeAttribute(prev.button, ARIA_CURRENT);
       }
 
       if (curr) {
-        addClass(curr.button, active);
+        addClass(curr.button, CLASS_ACTIVE);
+        setAttribute(curr.button, ARIA_CURRENT, true);
       }
 
-      Splide.emit(name + ":updated", data, prev, curr);
-    }
-    /**
-     * Create a wrapper and button elements.
-     *
-     * @return {Object} - An object contains all data.
-     */
-
-
-    function createPagination() {
-      var options = Splide.options;
-      var classes = Splide.classes;
-      var list = create('ul', {
-        class: classes.pagination
-      });
-      var items = Elements.getSlides(false).filter(function (Slide) {
-        return options.focus !== false || Slide.index % options.perPage === 0;
-      }).map(function (Slide, page) {
-        var li = create('li', {});
-        var button = create('button', {
-          class: classes.page,
-          type: 'button'
-        });
-        append(li, button);
-        append(list, li);
-        Splide.on('click', function () {
-          Splide.go(">" + page);
-        }, button);
-        return {
-          li: li,
-          button: button,
-          page: page,
-          Slides: Elements.getSlidesByPage(page)
-        };
-      });
-      return {
+      emit(EVENT_PAGINATION_UPDATED, {
         list: list,
         items: items
-      };
+      }, prev, curr);
     }
 
-    return Pagination;
-  };
-  /**
-   * The component for loading slider images lazily.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The name for a data attribute of src.
-   *
-   * @type {string}
-   */
-
-
-  var SRC_DATA_NAME = 'data-splide-lazy';
-  /**
-   * The name for a data attribute of srcset.
-   *
-   * @type {string}
-   */
-
-  var SRCSET_DATA_NAME = 'data-splide-lazy-srcset';
-  /**
-   * The component for loading slider images lazily.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   * @param {string} name       - A component name as a lowercase string.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var LazyLoad = function LazyLoad(Splide, Components, name) {
-    /**
-     * Next index for sequential loading.
-     *
-     * @type {number}
-     */
-    var nextIndex;
-    /**
-     * Store objects containing an img element and a Slide object.
-     *
-     * @type {Object[]}
-     */
-
-    var images;
-    /**
-     * Store the options.
-     *
-     * @type {Object}
-     */
-
-    var options = Splide.options;
-    /**
-     * Whether to load images sequentially or not.
-     *
-     * @type {boolean}
-     */
-
-    var isSequential = options.lazyLoad === 'sequential';
-    /**
-     * Lazyload component object.
-     *
-     * @type {Object}
-     */
-
-    var Lazyload = {
-      /**
-       * Mount only when the lazyload option is provided.
-       *
-       * @type {boolean}
-       */
-      required: options.lazyLoad,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        Splide.on('mounted refresh', function () {
-          init();
-          Components.Elements.each(function (Slide) {
-            each(Slide.slide.querySelectorAll("[" + SRC_DATA_NAME + "], [" + SRCSET_DATA_NAME + "]"), function (img) {
-              if (!img.src && !img.srcset) {
-                images.push({
-                  img: img,
-                  Slide: Slide
-                });
-                applyStyle(img, {
-                  display: 'none'
-                });
-              }
-            });
-          });
-
-          if (isSequential) {
-            loadNext();
-          }
-        });
-
-        if (!isSequential) {
-          Splide.on("mounted refresh moved." + name, check);
-        }
-      },
-
-      /**
-       * Destroy.
-       */
-      destroy: init
+    return {
+      items: items,
+      mount: mount,
+      destroy: destroy,
+      getAt: getAt
     };
-    /**
-     * Initialize parameters.
-     */
+  }
 
-    function init() {
-      images = [];
-      nextIndex = 0;
-    }
-    /**
-     * Check how close each image is from the active slide and
-     * determine whether to start loading or not, according to the distance.
-     *
-     * @param {number} index - Current index.
-     */
-
-
-    function check(index) {
-      index = isNaN(index) ? Splide.index : index;
-      images = images.filter(function (image) {
-        if (image.Slide.isWithin(index, options.perPage * (options.preloadPages + 1))) {
-          load(image.img, image.Slide);
-          return false;
-        }
+  var TRIGGER_KEYS = [" ", "Enter", "Spacebar"];
 
-        return true;
-      }); // Unbind if all images are loaded.
+  function Sync(Splide2, Components2, options) {
+    var splides = Splide2.splides;
+    var list = Components2.Elements.list;
 
-      if (!images[0]) {
-        Splide.off("moved." + name);
+    function mount() {
+      if (options.isNavigation) {
+        navigate();
+      } else {
+        sync();
       }
     }
-    /**
-     * Start loading an image.
-     * Creating a clone of the image element since setting src attribute directly to it
-     * often occurs 'hitch', blocking some other processes of a browser.
-     *
-     * @param {Element} img   - An image element.
-     * @param {Object}  Slide - A Slide object.
-     */
 
+    function destroy() {
+      removeAttribute(list, ALL_ATTRIBUTES);
+    }
 
-    function load(img, Slide) {
-      addClass(Slide.slide, STATUS_CLASSES.loading);
-      var spinner = create('span', {
-        class: Splide.classes.spinner
+    function sync() {
+      var processed = [];
+      splides.concat(Splide2).forEach(function (splide, index, instances) {
+        EventInterface(splide).on(EVENT_MOVE, function (index2, prev, dest) {
+          instances.forEach(function (instance) {
+            if (instance !== splide && !includes(processed, splide)) {
+              processed.push(instance);
+              instance.go(instance.is(LOOP) ? dest : index2);
+            }
+          });
+          empty(processed);
+        });
       });
-      append(img.parentElement, spinner);
+    }
 
-      img.onload = function () {
-        loaded(img, spinner, Slide, false);
-      };
+    function navigate() {
+      var _EventInterface16 = EventInterface(Splide2),
+          on = _EventInterface16.on,
+          emit = _EventInterface16.emit;
 
-      img.onerror = function () {
-        loaded(img, spinner, Slide, true);
-      };
+      on(EVENT_CLICK, onClick);
+      on(EVENT_SLIDE_KEYDOWN, onKeydown);
+      on([EVENT_MOUNTED, EVENT_UPDATED], update);
+      setAttribute(list, ROLE, "menu");
+      emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);
+    }
 
-      setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_NAME) || '');
-      setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME) || '');
+    function update() {
+      setAttribute(list, ARIA_ORIENTATION, options.direction !== TTB ? "horizontal" : null);
     }
-    /**
-     * Start loading a next image in images array.
-     */
 
+    function onClick(Slide) {
+      Splide2.go(Slide.index);
+    }
 
-    function loadNext() {
-      if (nextIndex < images.length) {
-        var image = images[nextIndex];
-        load(image.img, image.Slide);
+    function onKeydown(Slide, e) {
+      if (includes(TRIGGER_KEYS, e.key)) {
+        onClick(Slide);
+        prevent(e);
       }
-
-      nextIndex++;
     }
-    /**
-     * Called just after the image was loaded or loading was aborted by some error.
-     *
-     * @param {Element} img     - An image element.
-     * @param {Element} spinner - A spinner element.
-     * @param {Object}  Slide   - A Slide object.
-     * @param {boolean} error   - True if the image was loaded successfully or false on error.
-     */
-
 
-    function loaded(img, spinner, Slide, error) {
-      removeClass(Slide.slide, STATUS_CLASSES.loading);
+    return {
+      mount: mount,
+      destroy: destroy
+    };
+  }
 
-      if (!error) {
-        _remove(spinner);
+  function Wheel(Splide2, Components2, options) {
+    var _EventInterface17 = EventInterface(Splide2),
+        bind = _EventInterface17.bind;
 
-        applyStyle(img, {
-          display: ''
+    function mount() {
+      if (options.wheel) {
+        bind(Components2.Elements.track, "wheel", onWheel, {
+          passive: false,
+          capture: true
         });
-        Splide.emit(name + ":loaded", img).emit('resize');
       }
+    }
 
-      if (isSequential) {
-        loadNext();
+    function onWheel(e) {
+      var deltaY = e.deltaY;
+
+      if (deltaY) {
+        Splide2.go(deltaY < 0 ? "<" : ">");
+        prevent(e);
       }
     }
 
-    return Lazyload;
-  };
-  /**
-   * Export aria attribute names.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Attribute name for aria-current.
-   *
-   * @type {string}
-   */
-
-
-  var ARIA_CURRENRT = 'aria-current';
-  /**
-   * Attribute name for aria-control.
-   *
-   * @type {string}
-   */
-
-  var ARIA_CONTROLS = 'aria-controls';
-  /**
-   * Attribute name for aria-control.
-   *
-   * @type {string}
-   */
-
-  var ARIA_LABEL = 'aria-label';
-  /**
-   * Attribute name for aria-hidden.
-   *
-   * @type {string}
-   */
-
-  var ARIA_HIDDEN = 'aria-hidden';
-  /**
-   * Attribute name for tab-index.
-   *
-   * @type {string}
-   */
-
-  var TAB_INDEX = 'tabindex';
-  /**
-   * The component for controlling slides via keyboard.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Map a key to a slide control.
-   *
-   * @type {Object}
-   */
-
-  var KEY_MAP = {
-    ltr: {
-      ArrowLeft: '<',
-      ArrowRight: '>',
-      // For IE.
-      Left: '<',
-      Right: '>'
-    },
-    rtl: {
-      ArrowLeft: '>',
-      ArrowRight: '<',
-      // For IE.
-      Left: '>',
-      Right: '<'
-    },
-    ttb: {
-      ArrowUp: '<',
-      ArrowDown: '>',
-      // For IE.
-      Up: '<',
-      Down: '>'
-    }
-  };
-  /**
-   * The component for controlling slides via keyboard.
-   *
-   * @param {Splide} Splide - A Splide instance.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Keyboard = function Keyboard(Splide) {
-    /**
-     * Hold the target element.
-     *
-     * @type {Element|Document|undefined}
-     */
-    var target;
     return {
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        Splide.on('mounted updated', function () {
-          var options = Splide.options;
-          var root = Splide.root;
-          var map = KEY_MAP[options.direction];
-          var keyboard = options.keyboard;
-
-          if (target) {
-            Splide.off('keydown', target);
-            removeAttribute(root, TAB_INDEX);
-          }
-
-          if (keyboard) {
-            if (keyboard === 'focused') {
-              target = root;
-              setAttribute(root, TAB_INDEX, 0);
-            } else {
-              target = document;
-            }
-
-            Splide.on('keydown', function (e) {
-              if (map[e.key]) {
-                Splide.go(map[e.key]);
-              }
-            }, target);
-          }
-        });
-      }
+      mount: mount
     };
+  }
+
+  var ComponentConstructors = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Options: Options,
+    Direction: Direction,
+    Elements: Elements,
+    Style: Style,
+    Slides: Slides,
+    Clones: Clones,
+    Layout: Layout,
+    Move: Move,
+    Controller: Controller,
+    Arrows: Arrows,
+    Autoplay: Autoplay,
+    Cover: Cover,
+    Scroll: Scroll,
+    Drag: Drag,
+    Keyboard: Keyboard,
+    LazyLoad: LazyLoad,
+    Pagination: Pagination,
+    Sync: Sync,
+    Wheel: Wheel
+  });
+  var I18N = {
+    prev: "Previous slide",
+    next: "Next slide",
+    first: "Go to first slide",
+    last: "Go to last slide",
+    slideX: "Go to slide %s",
+    pageX: "Go to page %s",
+    play: "Start autoplay",
+    pause: "Pause autoplay"
+  };
+  var DEFAULTS = {
+    type: "slide",
+    speed: 400,
+    waitForTransition: true,
+    perPage: 1,
+    arrows: true,
+    pagination: true,
+    interval: 5e3,
+    pauseOnHover: true,
+    pauseOnFocus: true,
+    resetProgress: true,
+    easing: "cubic-bezier(.42,.65,.27,.99)",
+    drag: true,
+    direction: "ltr",
+    slideFocus: true,
+    trimSpace: true,
+    focusableNodes: "a, button, textarea, input, select, iframe",
+    classes: CLASSES,
+    i18n: I18N
   };
-  /**
-   * The component for enhancing accessibility.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The component for enhancing accessibility.
-   *
-   * @param {Splide} Splide     - A Splide instance.
-   * @param {Object} Components - An object containing components.
-   *
-   * @return {Object} - The component object.
-   */
-
-
-  var A11y = function A11y(Splide, Components) {
-    /**
-     * Hold a i18n object.
-     *
-     * @type {Object}
-     */
-    var i18n = Splide.i18n;
-    /**
-     * Hold the Elements component.
-     *
-     * @type {Object}
-     */
-
-    var Elements = Components.Elements;
-    /**
-     * All attributes related with A11y.
-     *
-     * @type {string[]}
-     */
-
-    var allAttributes = [ARIA_HIDDEN, TAB_INDEX, ARIA_CONTROLS, ARIA_LABEL, ARIA_CURRENRT, 'role'];
-    /**
-     * A11y component object.
-     *
-     * @type {Object}
-     */
-
-    var A11y = {
-      /**
-       * Required only when the accessibility option is true.
-       *
-       * @type {boolean}
-       */
-      required: Splide.options.accessibility,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        Splide.on('visible', function (Slide) {
-          updateSlide(Slide.slide, true);
-        }).on('hidden', function (Slide) {
-          updateSlide(Slide.slide, false);
-        }).on('arrows:mounted', initArrows).on('arrows:updated', updateArrows).on('pagination:mounted', initPagination).on('pagination:updated', updatePagination).on('refresh', function () {
-          removeAttribute(Components.Clones.clones, allAttributes);
-        });
 
-        if (Splide.options.isNavigation) {
-          Splide.on('navigation:mounted navigation:updated', initNavigation).on('active', function (Slide) {
-            updateNavigation(Slide, true);
-          }).on('inactive', function (Slide) {
-            updateNavigation(Slide, false);
-          });
-        }
+  function Fade(Splide2, Components2, options) {
+    var _EventInterface18 = EventInterface(Splide2),
+        on = _EventInterface18.on;
 
-        initAutoplay();
-      },
+    var ruleBy = Components2.Style.ruleBy;
 
-      /**
-       * Destroy.
-       */
-      destroy: function destroy() {
-        var Arrows = Components.Arrows;
-        var arrows = Arrows ? Arrows.arrows : {};
-        removeAttribute(Elements.slides.concat([arrows.prev, arrows.next, Elements.play, Elements.pause]), allAttributes);
-      }
-    };
-    /**
-     * Update slide attributes when it gets visible or hidden.
-     *
-     * @param {Element} slide   - A slide element.
-     * @param {Boolean} visible - True when the slide gets visible, or false when hidden.
-     */
-
-    function updateSlide(slide, visible) {
-      setAttribute(slide, ARIA_HIDDEN, !visible);
-
-      if (Splide.options.slideFocus) {
-        setAttribute(slide, TAB_INDEX, visible ? 0 : -1);
-      }
+    function mount() {
+      on([EVENT_MOUNTED, EVENT_REFRESH], function () {
+        nextTick(function () {
+          Components2.Slides.forEach(function (Slide) {
+            ruleBy(Slide.slide, "transition", "opacity " + options.speed + "ms " + options.easing);
+          });
+        });
+      });
     }
-    /**
-     * Initialize arrows if they are available.
-     * Append screen reader elements and add aria-controls attribute.
-     *
-     * @param {Element} prev - Previous arrow element.
-     * @param {Element} next - Next arrow element.
-     */
 
-
-    function initArrows(prev, next) {
-      var controls = Elements.track.id;
-      setAttribute(prev, ARIA_CONTROLS, controls);
-      setAttribute(next, ARIA_CONTROLS, controls);
+    function start(index, done) {
+      var track = Components2.Elements.track;
+      ruleBy(track, "height", unit(rect(track).height));
+      nextTick(function () {
+        done();
+        ruleBy(track, "height", "");
+      });
     }
-    /**
-     * Update arrow attributes.
-     *
-     * @param {Element} prev      - Previous arrow element.
-     * @param {Element} next      - Next arrow element.
-     * @param {number}  prevIndex - Previous slide index or -1 when there is no precede slide.
-     * @param {number}  nextIndex - Next slide index or -1 when there is no next slide.
-     */
 
+    return {
+      mount: mount,
+      start: start,
+      cancel: noop
+    };
+  }
 
-    function updateArrows(prev, next, prevIndex, nextIndex) {
-      var index = Splide.index;
-      var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev;
-      var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;
-      setAttribute(prev, ARIA_LABEL, prevLabel);
-      setAttribute(next, ARIA_LABEL, nextLabel);
-    }
-    /**
-     * Initialize pagination if it's available.
-     * Append a screen reader element and add aria-controls/label attribute to each item.
-     *
-     * @param {Object} data       - Data object containing all items.
-     * @param {Object} activeItem - An initial active item.
-     */
-
+  function Slide(Splide2, Components2, options) {
+    var _EventInterface19 = EventInterface(Splide2),
+        bind = _EventInterface19.bind;
 
-    function initPagination(data, activeItem) {
-      if (activeItem) {
-        setAttribute(activeItem.button, ARIA_CURRENRT, true);
-      }
+    var Move = Components2.Move,
+        Controller = Components2.Controller;
+    var list = Components2.Elements.list;
+    var endCallback;
 
-      data.items.forEach(function (item) {
-        var options = Splide.options;
-        var text = options.focus === false && options.perPage > 1 ? i18n.pageX : i18n.slideX;
-        var label = sprintf(text, item.page + 1);
-        var button = item.button;
-        var controls = item.Slides.map(function (Slide) {
-          return Slide.slide.id;
-        });
-        setAttribute(button, ARIA_CONTROLS, controls.join(' '));
-        setAttribute(button, ARIA_LABEL, label);
+    function mount() {
+      bind(list, "transitionend", function (e) {
+        if (e.target === list && endCallback) {
+          cancel();
+          endCallback();
+        }
       });
     }
-    /**
-     * Update pagination attributes.
-     *
-     * @param {Object}  data - Data object containing all items.
-     * @param {Element} prev - A previous active element.
-     * @param {Element} curr - A current active element.
-     */
 
+    function start(index, done) {
+      var destination = Move.toPosition(index, true);
+      var position = Move.getPosition();
+      var speed = getSpeed(index);
 
-    function updatePagination(data, prev, curr) {
-      if (prev) {
-        removeAttribute(prev.button, ARIA_CURRENRT);
-      }
-
-      if (curr) {
-        setAttribute(curr.button, ARIA_CURRENRT, true);
+      if (abs(destination - position) >= 1 && speed >= 1) {
+        apply("transform " + speed + "ms " + options.easing);
+        Move.translate(destination, true);
+        endCallback = done;
+      } else {
+        Move.jump(index);
+        done();
       }
     }
-    /**
-     * Initialize autoplay buttons.
-     */
 
+    function cancel() {
+      apply("");
+    }
 
-    function initAutoplay() {
-      ['play', 'pause'].forEach(function (name) {
-        var elm = Elements[name];
+    function getSpeed(index) {
+      var rewindSpeed = options.rewindSpeed;
 
-        if (elm) {
-          if (!isButton(elm)) {
-            setAttribute(elm, 'role', 'button');
-          }
+      if (Splide2.is(SLIDE) && rewindSpeed) {
+        var prev = Controller.getIndex(true);
+        var end = Controller.getEnd();
 
-          setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
-          setAttribute(elm, ARIA_LABEL, i18n[name]);
+        if (prev === 0 && index >= end || prev >= end && index === 0) {
+          return rewindSpeed;
         }
-      });
+      }
+
+      return options.speed;
     }
-    /**
-     * Initialize navigation slider.
-     * Add button role, aria-label, aria-controls to slide elements and append screen reader text to them.
-     *
-     * @param {Splide} main - A main Splide instance.
-     */
 
+    function apply(transition) {
+      Components2.Style.ruleBy(list, "transition", transition);
+    }
 
-    function initNavigation(main) {
-      Elements.each(function (Slide) {
-        var slide = Slide.slide;
-        var realIndex = Slide.realIndex;
+    return {
+      mount: mount,
+      start: start,
+      cancel: cancel
+    };
+  }
 
-        if (!isButton(slide)) {
-          setAttribute(slide, 'role', 'button');
-        }
+  var _Splide = /*#__PURE__*/function () {
+    function _Splide(target, options) {
+      this.event = EventBus();
+      this.Components = {};
+      this.state = State(CREATED);
+      this.splides = [];
+      this._options = {};
+      this._Extensions = {};
+      var root = isString(target) ? query(document, target) : target;
+      assert(root, root + " is invalid.");
+      this.root = root;
+      merge(DEFAULTS, _Splide.defaults);
+      merge(merge(this._options, DEFAULTS), options || {});
+    }
 
-        var slideIndex = realIndex > -1 ? realIndex : Slide.index;
-        var label = sprintf(i18n.slideX, slideIndex + 1);
-        var mainSlide = main.Components.Elements.getSlide(slideIndex);
-        setAttribute(slide, ARIA_LABEL, label);
+    var _proto = _Splide.prototype;
 
-        if (mainSlide) {
-          setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
-        }
+    _proto.mount = function mount(Extensions, Transition) {
+      var _this3 = this;
+
+      var state = this.state,
+          Components2 = this.Components;
+      assert(state.is([CREATED, DESTROYED]), "Already mounted!");
+      state.set(CREATED);
+      this._Components = Components2;
+      this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
+      this._Extensions = Extensions || this._Extensions;
+      var Constructors = assign({}, ComponentConstructors, this._Extensions, {
+        Transition: this._Transition
       });
-    }
-    /**
-     * Update navigation attributes.
-     *
-     * @param {Object}  Slide  - A target Slide object.
-     * @param {boolean} active - True if the slide is active or false if inactive.
-     */
+      forOwn(Constructors, function (Component, key) {
+        var component = Component(_this3, Components2, _this3._options);
+        Components2[key] = component;
+        component.setup && component.setup();
+      });
+      forOwn(Components2, function (component) {
+        component.mount && component.mount();
+      });
+      this.emit(EVENT_MOUNTED);
+      addClass(this.root, CLASS_INITIALIZED);
+      state.set(IDLE);
+      this.emit(EVENT_READY);
+      return this;
+    };
 
+    _proto.sync = function sync(splide) {
+      this.splides.push(splide);
+      splide.splides.push(this);
+      return this;
+    };
 
-    function updateNavigation(_ref6, active) {
-      var slide = _ref6.slide;
+    _proto.go = function go(control) {
+      this._Components.Controller.go(control);
 
-      if (active) {
-        setAttribute(slide, ARIA_CURRENRT, true);
-      } else {
-        removeAttribute(slide, ARIA_CURRENRT);
-      }
-    }
-    /**
-     * Check if the given element is button or not.
-     *
-     * @param {Element} elm - An element to be checked.
-     *
-     * @return {boolean} - True if the given element is button.
-     */
+      return this;
+    };
 
+    _proto.on = function on(events, callback) {
+      this.event.on(events, callback, null, DEFAULT_USER_EVENT_PRIORITY);
+      return this;
+    };
 
-    function isButton(elm) {
-      return elm.tagName === 'BUTTON';
-    }
+    _proto.off = function off(events) {
+      this.event.off(events);
+      return this;
+    };
 
-    return A11y;
-  };
-  /**
-   * The component for synchronizing a slider with another.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * The event name for sync.
-   *
-   * @type {string}
-   */
-
-
-  var SYNC_EVENT = 'move.sync';
-  /**
-   * The event names for click navigation.
-   * @type {string}
-   */
-
-  var CLICK_EVENTS = 'mouseup touchend';
-  /**
-   * The keys for triggering the navigation button.
-   *
-   * @type {String[]}
-   */
-
-  var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
-  /**
-   * The component for synchronizing a slider with another.
-   *
-   * @param {Splide} Splide - A Splide instance.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Sync = function Sync(Splide) {
-    /**
-     * Keep the sibling Splide instance.
-     *
-     * @type {Splide}
-     */
-    var sibling = Splide.sibling;
-    /**
-     * Whether the sibling slider is navigation or not.
-     *
-     * @type {Splide|boolean}
-     */
-
-    var isNavigation = sibling && sibling.options.isNavigation;
-    /**
-     * Layout component object.
-     *
-     * @type {Object}
-     */
-
-    var Sync = {
-      /**
-       * Required only when the sub slider is available.
-       *
-       * @type {boolean}
-       */
-      required: !!sibling,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        syncMain();
-        syncSibling();
+    _proto.emit = function emit(event) {
+      var _this$event;
 
-        if (isNavigation) {
-          bind();
-          Splide.on('refresh', function () {
-            setTimeout(function () {
-              bind();
-              sibling.emit('navigation:updated', Splide);
-            });
-          });
-        }
-      },
+      (_this$event = this.event).emit.apply(_this$event, [event].concat(slice(arguments, 1)));
 
-      /**
-       * Called after all components are mounted.
-       */
-      mounted: function mounted() {
-        if (isNavigation) {
-          sibling.emit('navigation:mounted', Splide);
-        }
-      }
+      return this;
     };
-    /**
-     * Listen the primary slider event to move secondary one.
-     * Must unbind a handler at first to avoid infinite loop.
-     */
-
-    function syncMain() {
-      Splide.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
-        sibling.off(SYNC_EVENT).go(sibling.is(LOOP) ? destIndex : newIndex, false);
-        syncSibling();
-      });
-    }
-    /**
-     * Listen the secondary slider event to move primary one.
-     * Must unbind a handler at first to avoid infinite loop.
-     */
 
+    _proto.add = function add(slides, index) {
+      this._Components.Slides.add(slides, index);
 
-    function syncSibling() {
-      sibling.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
-        Splide.off(SYNC_EVENT).go(Splide.is(LOOP) ? destIndex : newIndex, false);
-        syncMain();
-      });
-    }
-    /**
-     * Listen some events on each slide.
-     */
+      return this;
+    };
 
+    _proto.remove = function remove(matcher) {
+      this._Components.Slides.remove(matcher);
 
-    function bind() {
-      sibling.Components.Elements.each(function (_ref7) {
-        var slide = _ref7.slide,
-            index = _ref7.index;
+      return this;
+    };
 
-        /*
-         * Listen mouseup and touchend events to handle click.
-         */
-        Splide.off(CLICK_EVENTS, slide).on(CLICK_EVENTS, function (e) {
-          // Ignore a middle or right click.
-          if (!e.button || e.button === 0) {
-            moveSibling(index);
-          }
-        }, slide);
-        /*
-         * Subscribe keyup to handle Enter and Space key.
-         * Note that Array.includes is not supported by IE.
-         */
-
-        Splide.off('keyup', slide).on('keyup', function (e) {
-          if (TRIGGER_KEYS.indexOf(e.key) > -1) {
-            e.preventDefault();
-            moveSibling(index);
-          }
-        }, slide, {
-          passive: false
-        });
-      });
-    }
-    /**
-     * Move the sibling to the given index.
-     * Need to check "IDLE" status because slides can be moving by Drag component.
-     *
-     * @param {number} index - Target index.
-     */
+    _proto.is = function is(type) {
+      return this._options.type === type;
+    };
 
+    _proto.refresh = function refresh() {
+      this.emit(EVENT_REFRESH);
+      return this;
+    };
 
-    function moveSibling(index) {
-      if (Splide.State.is(IDLE)) {
-        sibling.go(index);
+    _proto.destroy = function destroy(completely) {
+      if (completely === void 0) {
+        completely = true;
       }
-    }
 
-    return Sync;
-  };
-  /**
-   * The component for updating options according to a current window width.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-  /**
-   * Interval time for throttle.
-   *
-   * @type {number}
-   */
-
-
-  var THROTTLE = 50;
-  /**
-   * The component for updating options according to a current window width.
-   *
-   * @param {Splide} Splide - A Splide instance.
-   *
-   * @return {Object} - The component object.
-   */
-
-  var Breakpoints = function Breakpoints(Splide) {
-    /**
-     * Store breakpoints.
-     *
-     * @type {Object|boolean}
-     */
-    var breakpoints = Splide.options.breakpoints;
-    /**
-     * The check function whose frequency of call is reduced.
-     *
-     * @type {Function}
-     */
-
-    var throttledCheck = throttle(check, THROTTLE);
-    /**
-     * Keep initial options.
-     *
-     * @type {Object}
-     */
+      var event = this.event,
+          state = this.state;
 
-    var initialOptions;
-    /**
-     * An array containing objects of point and MediaQueryList.
-     *
-     * @type {Object[]}
-     */
-
-    var map = [];
-    /**
-     * Hold the previous breakpoint.
-     *
-     * @type {number|undefined}
-     */
-
-    var prevPoint;
-    /**
-     * Breakpoints component object.
-     *
-     * @type {Object}
-     */
-
-    var Breakpoints = {
-      /**
-       * Required only when the breakpoints definition is provided and browser supports matchMedia.
-       *
-       * @type {boolean}
-       */
-      required: breakpoints && matchMedia,
-
-      /**
-       * Called when the component is mounted.
-       */
-      mount: function mount() {
-        map = Object.keys(breakpoints).sort(function (n, m) {
-          return +n - +m;
-        }).map(function (point) {
-          return {
-            point: point,
-            mql: matchMedia("(max-width:" + point + "px)")
-          };
+      if (state.is(CREATED)) {
+        event.on(EVENT_READY, this.destroy.bind(this, completely), this);
+      } else {
+        forOwn(this._Components, function (component) {
+          component.destroy && component.destroy(completely);
         });
-        /*
-         * To keep monitoring resize event after destruction without "completely",
-         * use native addEventListener instead of Splide.on.
-         */
+        event.emit(EVENT_DESTROY);
+        event.destroy();
+        empty(this.splides);
+        state.set(DESTROYED);
+      }
 
-        this.destroy(true);
-        addEventListener('resize', throttledCheck); // Keep initial options to apply them when no breakpoint matches.
+      return this;
+    };
 
-        initialOptions = Splide.options;
-        check();
+    _createClass(_Splide, [{
+      key: "options",
+      get: function get() {
+        return this._options;
       },
+      set: function set(options) {
+        var _options = this._options;
+        merge(_options, options);
 
-      /**
-       * Destroy.
-       *
-       * @param {boolean} completely - Whether to destroy Splide completely.
-       */
-      destroy: function destroy(completely) {
-        if (completely) {
-          removeEventListener('resize', throttledCheck);
+        if (!this.state.is(CREATED)) {
+          this.emit(EVENT_UPDATED, _options);
         }
       }
-    };
-    /**
-     * Check the breakpoint.
-     */
-
-    function check() {
-      var point = getPoint();
-
-      if (point !== prevPoint) {
-        prevPoint = point;
-        var _State = Splide.State;
-        var options = breakpoints[point] || initialOptions;
-        var destroy = options.destroy;
-
-        if (destroy) {
-          Splide.options = initialOptions;
-          Splide.destroy(destroy === 'completely');
-        } else {
-          if (_State.is(DESTROYED)) {
-            Splide.mount();
-          }
-
-          Splide.options = options;
-        }
+    }, {
+      key: "length",
+      get: function get() {
+        return this._Components.Slides.getLength(true);
       }
-    }
-    /**
-     * Return the breakpoint matching current window width.
-     * Note that Array.prototype.find is not supported by IE.
-     *
-     * @return {number|string} - A breakpoint as number or string. -1 if no point matches.
-     */
-
-
-    function getPoint() {
-      var item = map.filter(function (item) {
-        return item.mql.matches;
-      })[0];
-      return item ? item.point : -1;
-    }
-
-    return Breakpoints;
-  };
-  /**
-   * Export components.
-   *
-   * @author    Naotoshi Fujita
-   * @copyright Naotoshi Fujita. All rights reserved.
-   */
-
-
-  var COMPLETE = {
-    Options: Options,
-    Breakpoints: Breakpoints,
-    Controller: Controller,
-    Elements: Elements,
-    Track: Track,
-    Clones: Clones,
-    Layout: Layout,
-    Drag: Drag,
-    Click: Click,
-    Autoplay: Autoplay,
-    Cover: Cover,
-    Arrows: Arrows,
-    Pagination: Pagination,
-    LazyLoad: LazyLoad,
-    Keyboard: Keyboard,
-    Sync: Sync,
-    A11y: A11y
-  };
-  /**
-   * Exports the Splide class with all components.
-   *
-   * @since 1.0.0
-   */
-
-  var Splide = /*#__PURE__*/function (_Splide$) {
-    _inheritsLoose(Splide, _Splide$);
-
-    function Splide(root, options) {
-      return _Splide$.call(this, root, options, COMPLETE) || this;
-    }
+    }, {
+      key: "index",
+      get: function get() {
+        return this._Components.Controller.getIndex();
+      }
+    }]);
 
-    return Splide;
-  }(Splide$1);
+    return _Splide;
+  }();
 
+  var Splide = _Splide;
+  Splide.defaults = {};
+  Splide.STATES = STATES;
   return Splide;
 });
 //# sourceMappingURL=splide.js.map

dist/types/build/default.d.ts

@@ -0,0 +1,2 @@
+export { Splide as default } from '../core/Splide/Splide';
+//# sourceMappingURL=../../../src/js/build/default.d.ts.map

dist/types/build/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,uBAAuB,CAAC"}

dist/types/build/renderer.d.ts

@@ -0,0 +1,2 @@
+export { SplideRenderer as default } from '../renderer/SplideRenderer/SplideRenderer';
+//# sourceMappingURL=../../../src/js/build/renderer.d.ts.map

dist/types/build/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,IAAI,OAAO,EAAE,MAAM,2CAA2C,CAAC"}

dist/types/components/Arrows/Arrows.d.ts

@@ -0,0 +1,26 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Arrows component.
+ *
+ * @since 3.0.0
+ */
+export interface ArrowsComponent extends BaseComponent {
+    arrows: {
+        prev?: HTMLButtonElement;
+        next?: HTMLButtonElement;
+    };
+}
+/**
+ * The component for handling previous and next arrows.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An Arrows component object.
+ */
+export declare function Arrows(Splide: Splide, Components: Components, options: Options): ArrowsComponent;
+//# sourceMappingURL=../../../../src/js/components/Arrows/Arrows.d.ts.map

dist/types/components/Arrows/Arrows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrows.d.ts","sourceRoot":"","sources":["Arrows.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,iBAAiB,CAAC;QAAC,IAAI,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAC;CAChE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CA6IlG"}

dist/types/components/Arrows/path.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The namespace for SVG elements.
+ */
+export declare const XML_NAME_SPACE = "http://www.w3.org/2000/svg";
+/**
+ * The arrow path.
+ */
+export declare 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";
+/**
+ * SVG width and height.
+ */
+export declare const SIZE = 40;
+//# sourceMappingURL=../../../../src/js/components/Arrows/path.d.ts.map

dist/types/components/Arrows/path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["path.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,cAAc,+BAA+B,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,IAAI,0FAA0F,CAAC;AAE5G;;GAEG;AACH,eAAO,MAAM,IAAI,KAAK,CAAC"}

dist/types/components/Autoplay/Autoplay.d.ts

@@ -0,0 +1,25 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Autoplay component.
+ *
+ * @since 3.0.0
+ */
+export interface AutoplayComponent extends BaseComponent {
+    play(): void;
+    pause(): void;
+    isPaused(): boolean;
+}
+/**
+ * The component for auto playing sliders.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An Autoplay component object.
+ */
+export declare function Autoplay(Splide: Splide, Components: Components, options: Options): AutoplayComponent;
+//# sourceMappingURL=../../../../src/js/components/Autoplay/Autoplay.d.ts.map

dist/types/components/Autoplay/Autoplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autoplay.d.ts","sourceRoot":"","sources":["Autoplay.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA2ItG"}

dist/types/components/Clones/Clones.d.ts

@@ -0,0 +1,22 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Clone component.
+ *
+ * @since 3.0.0
+ */
+export interface CloneComponent extends BaseComponent {
+}
+/**
+ * The component that generates clones for the loop slider.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Clones component object.
+ */
+export declare function Clones(Splide: Splide, Components: Components, options: Options): CloneComponent;
+//# sourceMappingURL=../../../../src/js/components/Clones/Clones.d.ts.map

dist/types/components/Clones/Clones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clones.d.ts","sourceRoot":"","sources":["Clones.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CA4HjG"}

dist/types/components/Controller/Controller.d.ts

@@ -0,0 +1,31 @@
+import { Splide } from '../../core/Splide/Splide';
+import { AnyFunction, BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Controller component.
+ *
+ * @since 3.0.0
+ */
+export interface ControllerComponent extends BaseComponent {
+    go(control: number | string, allowSameIndex?: boolean, callback?: AnyFunction): void;
+    getNext(destination?: boolean): number;
+    getPrev(destination?: boolean): number;
+    getEnd(): number;
+    setIndex(index: number): void;
+    getIndex(prev?: boolean): number;
+    toIndex(page: number): number;
+    toPage(index: number): number;
+    hasFocus(): boolean;
+}
+/**
+ * The component for controlling the slider.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Controller component object.
+ */
+export declare function Controller(Splide: Splide, Components: Components, options: Options): ControllerComponent;
+//# sourceMappingURL=../../../../src/js/components/Controller/Controller.d.ts.map

dist/types/components/Controller/Controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAoS1G"}

dist/types/components/Cover/Cover.d.ts

@@ -0,0 +1,22 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * 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.
+ *
+ * @return A Cover component object.
+ */
+export declare function Cover(Splide: Splide, Components: Components, options: Options): CoverComponent;
+//# sourceMappingURL=../../../../src/js/components/Cover/Cover.d.ts.map

dist/types/components/Cover/Cover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cover.d.ts","sourceRoot":"","sources":["Cover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CAmDhG"}

dist/types/components/Direction/Direction.d.ts

@@ -0,0 +1,44 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Direction component.
+ *
+ * @since 3.0.0
+ */
+export interface DirectionComponent extends BaseComponent {
+    resolve(prop: string, axisOnly?: boolean): string;
+    orient(value: number): number;
+}
+/**
+ * The translation map for directions.
+ *
+ * @since 3.0.0
+ */
+export declare const ORIENTATION_MAP: {
+    marginRight: string[];
+    autoWidth: string[];
+    fixedWidth: string[];
+    paddingLeft: string[];
+    paddingRight: string[];
+    width: string[];
+    left: string[];
+    right: string[];
+    x: string[];
+    X: string[];
+    Y: string[];
+    ArrowLeft: string[];
+    ArrowRight: string[];
+};
+/**
+ * The component that absorbs the difference among directions.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Direction component object.
+ */
+export declare function Direction(Splide: Splide, Components: Components, options: Options): DirectionComponent;
+//# sourceMappingURL=../../../../src/js/components/Direction/Direction.d.ts.map

dist/types/components/Direction/Direction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Direction.d.ts","sourceRoot":"","sources":["Direction.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAGjE;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,OAAO,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACpD,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;CACjC;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;CAc3B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,kBAAkB,CA4BxG"}

dist/types/components/Drag/Drag.d.ts

@@ -0,0 +1,23 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Drag component.
+ *
+ * @since 3.0.0
+ */
+export interface DragComponent extends BaseComponent {
+    disable(disabled: boolean): void;
+}
+/**
+ * The component for dragging the slider.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Drag component object.
+ */
+export declare function Drag(Splide: Splide, Components: Components, options: Options): DragComponent;
+//# sourceMappingURL=../../../../src/js/components/Drag/Drag.d.ts.map

dist/types/components/Drag/Drag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drag.d.ts","sourceRoot":"","sources":["Drag.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,OAAO,CAAE,QAAQ,EAAE,OAAO,GAAI,IAAI,CAAA;CACnC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA4T9F"}

dist/types/components/Drag/constants.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The power of the friction.
+ *
+ * @since 3.0.0
+ */
+export declare const FRICTION = 5;
+/**
+ * If the user stops dragging for this duration with keeping the pointer down, updates the base coord and time.
+ *
+ * @since 3.0.0
+ */
+export declare const LOG_INTERVAL = 50;
+/**
+ * Start events for dragging.
+ *
+ * @since 3.0.0
+ */
+export declare const POINTER_DOWN_EVENTS = "touchstart mousedown";
+/**
+ * Update events for dragging.
+ *
+ * @since 3.0.0
+ */
+export declare const POINTER_MOVE_EVENTS = "touchmove mousemove";
+/**
+ * End events for dragging.
+ *
+ * @since 3.0.0
+ */
+export declare const POINTER_UP_EVENTS = "touchend touchcancel mouseup mouseleave";
+//# sourceMappingURL=../../../../src/js/components/Drag/constants.d.ts.map

dist/types/components/Drag/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,QAAQ,IAAI,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAE1D;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,4CAA4C,CAAC"}

dist/types/components/Elements/Elements.d.ts

@@ -0,0 +1,41 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for elements which the slider consists of.
+ *
+ * @since 3.0.0
+ */
+export interface ElementCollection {
+    root: HTMLElement;
+    slider: HTMLElement;
+    track: HTMLElement;
+    list: HTMLElement;
+    slides: HTMLElement[];
+    arrows: HTMLElement;
+    prev: HTMLButtonElement;
+    next: HTMLButtonElement;
+    bar: HTMLElement;
+    autoplay: HTMLElement;
+    play: HTMLButtonElement;
+    pause: HTMLButtonElement;
+}
+/**
+ * The interface for the Elements component.
+ *
+ * @since 3.0.0
+ */
+export interface ElementsComponent extends BaseComponent, ElementCollection {
+}
+/**
+ * The component that collects and handles elements which the slider consists of.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An Elements component object.
+ */
+export declare function Elements(Splide: Splide, Components: Components, options: Options): ElementsComponent;
+//# sourceMappingURL=../../../../src/js/components/Elements/Elements.d.ts.map

dist/types/components/Elements/Elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Elements.d.ts","sourceRoot":"","sources":["Elements.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,WAAW,CAAC;IACtB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,iBAAiB;CAC1E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CA6ItG"}

dist/types/components/Keyboard/Keyboard.d.ts

@@ -0,0 +1,22 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Keyboard component.
+ *
+ * @since 3.0.0
+ */
+export interface KeyboardComponent extends BaseComponent {
+}
+/**
+ * The component for controlling the slider by keyboards.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Keyboard component object.
+ */
+export declare function Keyboard(Splide: Splide, Components: Components, options: Options): KeyboardComponent;
+//# sourceMappingURL=../../../../src/js/components/Keyboard/Keyboard.d.ts.map

dist/types/components/Keyboard/Keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["Keyboard.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CACvD;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAuEtG"}

dist/types/components/Layout/Layout.d.ts

@@ -0,0 +1,27 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Layout component.
+ *
+ * @since 3.0.0
+ */
+export interface LayoutComponent extends BaseComponent {
+    listSize(): number;
+    slideSize(index: number, withoutGap?: boolean): number;
+    sliderSize(): number;
+    totalSize(index?: number, withoutGap?: boolean): number;
+    getPadding(right: boolean): number;
+}
+/**
+ * The component that layouts slider components and provides methods for dimensions.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An Layout component object.
+ */
+export declare function Layout(Splide: Splide, Components: Components, options: Options): LayoutComponent;
+//# sourceMappingURL=../../../../src/js/components/Layout/Layout.d.ts.map

dist/types/components/Layout/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAmNlG"}

dist/types/components/LazyLoad/LazyLoad.d.ts

@@ -0,0 +1,35 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+import { SlideComponent } from '../Slides/Slide';
+/**
+ * The interface for the LazyLoad component.
+ *
+ * @since 3.0.0
+ */
+export interface LazyLoadComponent extends BaseComponent {
+}
+/**
+ * The interface for all components.
+ *
+ * @since 3.0.0
+ */
+export interface LazyLoadImagesData {
+    _img: HTMLImageElement;
+    _spinner: HTMLSpanElement;
+    _Slide: SlideComponent;
+    src: string | null;
+    srcset: string | null;
+}
+/**
+ * The component for lazily loading images.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An LazyLoad component object.
+ */
+export declare function LazyLoad(Splide: Splide, Components: Components, options: Options): LazyLoadComponent;
+//# sourceMappingURL=../../../../src/js/components/LazyLoad/LazyLoad.d.ts.map

dist/types/components/LazyLoad/LazyLoad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyLoad.d.ts","sourceRoot":"","sources":["LazyLoad.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAYjE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIjD;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,aAAa;CACvD;AAED;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,MAAM,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,iBAAiB,CAsItG"}

dist/types/components/LazyLoad/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The data attribute for the src value.
+ *
+ * @since 3.0.0
+ */
+export declare const SRC_DATA_ATTRIBUTE: string;
+/**
+ * The data attribute for the srcset value.
+ *
+ * @since 3.0.0
+ */
+export declare const SRCSET_DATA_ATTRIBUTE: string;
+/**
+ * The selector string for images to load.
+ *
+ * @since 3.0.0
+ */
+export declare const IMAGE_SELECTOR: string;
+//# sourceMappingURL=../../../../src/js/components/LazyLoad/constants.d.ts.map

dist/types/components/LazyLoad/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAA6B,CAAC;AAE7D;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,QAAmC,CAAC;AAEtE;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAA4D,CAAC"}

dist/types/components/Move/Move.d.ts

@@ -0,0 +1,32 @@
+import { Splide } from '../../core/Splide/Splide';
+import { AnyFunction, BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Move component.
+ *
+ * @since 3.0.0
+ */
+export interface MoveComponent extends BaseComponent {
+    move(dest: number, index: number, prev: number, callback?: AnyFunction): void;
+    jump(index: number): void;
+    translate(position: number, preventLoop?: boolean): void;
+    cancel(): void;
+    toIndex(position: number): number;
+    toPosition(index: number, trimming?: boolean): number;
+    getPosition(): number;
+    getLimit(max: boolean): number;
+    isBusy(): boolean;
+    exceededLimit(max?: boolean | undefined, position?: number): boolean;
+}
+/**
+ * The component for moving the slider.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Move component object.
+ */
+export declare function Move(Splide: Splide, Components: Components, options: Options): MoveComponent;
+//# sourceMappingURL=../../../../src/js/components/Move/Move.d.ts.map

dist/types/components/Move/Move.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["Move.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IAChF,IAAI,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC5B,SAAS,CAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAC3D,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACpC,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACxD,WAAW,IAAI,MAAM,CAAC;IACtB,QAAQ,CAAE,GAAG,EAAE,OAAO,GAAI,MAAM,CAAC;IACjC,MAAM,IAAI,OAAO,CAAC;IAClB,aAAa,CAAE,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,OAAO,CAAC;CACxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CAmP9F"}

dist/types/components/Options/Options.d.ts

@@ -0,0 +1,22 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Options component.
+ *
+ * @since 3.0.0
+ */
+export interface OptionsComponent extends BaseComponent {
+}
+/**
+ * The component for managing options.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An Options component object.
+ */
+export declare function Options(Splide: Splide, Components: Components, options: Options): OptionsComponent;
+//# sourceMappingURL=../../../../src/js/components/Options/Options.d.ts.map

dist/types/components/Options/Options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["Options.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,aAAa;CACtD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,gBAAgB,CA2GpG"}

dist/types/components/Pagination/Pagination.d.ts

@@ -0,0 +1,43 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Pagination component.
+ *
+ * @since 3.0.0
+ */
+export interface PaginationComponent extends BaseComponent {
+    items: PaginationItem[];
+    getAt(index: number): PaginationItem;
+}
+/**
+ * The interface for data of the pagination.
+ *
+ * @since 3.0.0
+ */
+export interface PaginationData {
+    list: HTMLUListElement;
+    items: PaginationItem[];
+}
+/**
+ * The interface for each pagination item.
+ *
+ * @since 3.0.0
+ */
+export interface PaginationItem {
+    li: HTMLLIElement;
+    button: HTMLButtonElement;
+    page: number;
+}
+/**
+ * The component for handling previous and next arrows.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Arrows component object.
+ */
+export declare function Pagination(Splide: Splide, Components: Components, options: Options): PaginationComponent;
+//# sourceMappingURL=../../../../src/js/components/Pagination/Pagination.d.ts.map

dist/types/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["Pagination.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAE,KAAK,EAAE,MAAM,GAAI,cAAc,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,aAAa,CAAC;IAClB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CA+H1G"}

dist/types/components/Scroll/Scroll.d.ts

@@ -0,0 +1,24 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Scroll component.
+ *
+ * @since 3.0.0
+ */
+export interface ScrollComponent extends BaseComponent {
+    scroll(position: number, duration?: number): void;
+    cancel(): void;
+}
+/**
+ * The component for scrolling the slider.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Scroll component object.
+ */
+export declare function Scroll(Splide: Splide, Components: Components, options: Options): ScrollComponent;
+//# sourceMappingURL=../../../../src/js/components/Scroll/Scroll.d.ts.map

dist/types/components/Scroll/Scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scroll.d.ts","sourceRoot":"","sources":["Scroll.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,MAAM,CAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IACpD,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAoHlG"}

dist/types/components/Scroll/constants.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Triggers the bounce effect when the diff becomes less than this value.
+ *
+ * @since 3.0.0
+ */
+export declare const BOUNCE_DIFF_THRESHOLD = 10;
+/**
+ * The duration of the bounce effect.
+ *
+ * @since 3.0.0
+ */
+export declare const BOUNCE_DURATION = 600;
+/**
+ * The friction factor.
+ *
+ * @since 3.0.0
+ */
+export declare const FRICTION_FACTOR = 0.6;
+/**
+ * The velocity to calculate the scroll duration.
+ *
+ * @since 3.0.0
+ */
+export declare const BASE_VELOCITY = 1.5;
+/**
+ * The minimum duration of scroll.
+ *
+ * @since 3.0.0
+ */
+export declare const MIN_DURATION = 800;
+//# sourceMappingURL=../../../../src/js/components/Scroll/constants.d.ts.map

dist/types/components/Scroll/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,YAAY,MAAM,CAAC"}

dist/types/components/Slides/Slide.d.ts

@@ -0,0 +1,30 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent } from '../../types';
+/**
+ * The interface for the Slide sub component.
+ *
+ * @since 3.0.0
+ */
+export interface SlideComponent extends BaseComponent {
+    index: number;
+    slideIndex: number;
+    slide: HTMLElement;
+    container: HTMLElement;
+    isClone: boolean;
+    rule(prop: string, value: string | number, useContainer?: boolean): void;
+    isWithin(from: number, distance: number): boolean;
+}
+/**
+ * The sub component for managing each slide.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param index      - A slide index.
+ * @param slideIndex - A slide index for clones. This must be `-1` if the slide is not clone.
+ * @param slide      - A slide element.
+ *
+ * @return A Slide sub component.
+ */
+export declare function Slide(Splide: Splide, index: number, slideIndex: number, slide: HTMLElement): SlideComponent;
+//# sourceMappingURL=../../../../src/js/components/Slides/Slide.d.ts.map

dist/types/components/Slides/Slide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slide.d.ts","sourceRoot":"","sources":["Slide.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAmB5C;;;;GAIG;AACH,MAAM,WAAY,cAAe,SAAQ,aAAa;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC1E,QAAQ,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAI,OAAO,CAAC;CACrD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAI,cAAc,CAwM7G"}

dist/types/components/Slides/Slides.d.ts

@@ -0,0 +1,52 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+import { SlideComponent } from './Slide';
+/**
+ * The interface for the Slides component.
+ *
+ * @since 3.0.0
+ */
+export interface SlidesComponent extends BaseComponent {
+    register(slide: HTMLElement, index: number, slideIndex: number): void;
+    get(excludeClones?: boolean): SlideComponent[];
+    getIn(page: number): SlideComponent[];
+    getAt(index: number): SlideComponent | undefined;
+    add(slide: string | Element | Array<string | Element>, index?: number): void;
+    remove(selector: SlideMatcher): void;
+    forEach(iteratee: SlidesIteratee, excludeClones?: boolean): void;
+    filter(matcher: SlideMatcher): SlideComponent[];
+    rule(prop: string, value: string | number, useContainer?: boolean): void;
+    getLength(excludeClones?: boolean): number;
+    isEnough(): boolean;
+}
+/**
+ * The iteratee function for Slides.
+ *
+ * @since 3.0.0
+ */
+export declare type SlidesIteratee = (Slide: SlideComponent, index: number, Slides: SlideComponent[]) => void;
+/**
+ * The predicate function for Slides.
+ *
+ * @since 3.0.0
+ */
+export declare type SlidesPredicate = (Slide: SlideComponent, index: number, Slides: SlideComponent[]) => any;
+/**
+ * The type for filtering SlideComponent objects.
+ *
+ * @since 3.0.0
+ */
+export declare type SlideMatcher = number | number[] | string | SlidesPredicate;
+/**
+ * The component for managing all slides include clones.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return An Slides component object.
+ */
+export declare function Slides(Splide: Splide, Components: Components, options: Options): SlidesComponent;
+//# sourceMappingURL=../../../../src/js/components/Slides/Slides.d.ts.map

dist/types/components/Slides/Slides.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slides.d.ts","sourceRoot":"","sources":["Slides.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAe,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAkB9E,OAAO,EAAS,cAAc,EAAE,MAAM,SAAS,CAAC;AAGhD;;;;GAIG;AACH,MAAM,WAAY,eAAgB,SAAQ,aAAa;IACrD,QAAQ,CAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAI,IAAI,CAAC;IACxE,GAAG,CAAE,aAAa,CAAC,EAAE,OAAO,GAAI,cAAc,EAAE,CAAC;IACjD,KAAK,CAAE,IAAI,EAAE,MAAM,GAAI,cAAc,EAAE,CAAC;IACxC,KAAK,CAAE,KAAK,EAAE,MAAM,GAAI,cAAc,GAAG,SAAS,CAAC;IACnD,GAAG,CAAE,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IAC/E,MAAM,CAAE,QAAQ,EAAE,YAAY,GAAI,IAAI,CAAC;IACvC,OAAO,CAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IACnE,MAAM,CAAE,OAAO,EAAE,YAAY,GAAI,cAAc,EAAE,CAAC;IAClD,IAAI,CAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,GAAI,IAAI,CAAA;IAC1E,SAAS,CAAE,aAAa,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC7C,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,oBAAY,cAAc,GAAG,CAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,KAAM,IAAI,CAAA;AAEvG;;;;GAIG;AACH,oBAAY,eAAe,GAAG,CAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,KAAM,GAAG,CAAA;AAEvG;;;;GAIG;AACH,oBAAY,YAAY,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,eAAe,CAAC;AAExE;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CA2NlG"}

dist/types/components/Style/Style.d.ts

@@ -0,0 +1,19 @@
+import { BaseComponent } from '../../types';
+/**
+ * The interface for the Style component.
+ *
+ * @since 3.0.0
+ */
+export interface StyleComponent extends BaseComponent {
+    rule(selector: string, prop: string, value: string | number): void;
+    ruleBy(target: string | HTMLElement, prop: string, value: string | number): void;
+}
+/**
+ * The component for managing styles of the slider.
+ *
+ * @since 3.0.0
+ *
+ * @return A Style component object.
+ */
+export declare function Style(): StyleComponent;
+//# sourceMappingURL=../../../../src/js/components/Style/Style.d.ts.map

dist/types/components/Style/Style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Style.d.ts","sourceRoot":"","sources":["Style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5C;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,IAAI,CAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAI,IAAI,CAAC;IACrE,MAAM,CAAE,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAI,IAAI,CAAC;CACpF;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,IAAI,cAAc,CA6EtC"}

dist/types/components/Sync/Sync.d.ts

@@ -0,0 +1,22 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Sync component.
+ *
+ * @since 3.0.0
+ */
+export interface SyncComponent extends BaseComponent {
+}
+/**
+ * The component for syncing multiple sliders.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Sync component object.
+ */
+export declare function Sync(Splide: Splide, Components: Components, options: Options): SyncComponent;
+//# sourceMappingURL=../../../../src/js/components/Sync/Sync.d.ts.map

dist/types/components/Sync/Sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sync.d.ts","sourceRoot":"","sources":["Sync.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAKjE;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,aAAa;CACnD;AASD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,aAAa,CA4F9F"}

dist/types/components/Wheel/Wheel.d.ts

@@ -0,0 +1,22 @@
+import { Splide } from '../../core/Splide/Splide';
+import { BaseComponent, Components, Options } from '../../types';
+/**
+ * The interface for the Wheel component.
+ *
+ * @since 3.0.0
+ */
+export interface WheelComponent extends BaseComponent {
+}
+/**
+ * The component for observing the mouse wheel and moving the slider.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide     - A Splide instance.
+ * @param Components - A collection of components.
+ * @param options    - Options.
+ *
+ * @return A Wheel component object.
+ */
+export declare function Wheel(Splide: Splide, Components: Components, options: Options): WheelComponent;
+//# sourceMappingURL=../../../../src/js/components/Wheel/Wheel.d.ts.map

dist/types/components/Wheel/Wheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["Wheel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,aAAa;CACpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,cAAc,CA6BhG"}

dist/types/components/index.d.ts

@@ -0,0 +1,20 @@
+export { Options } from './Options/Options';
+export { Direction } from './Direction/Direction';
+export { Elements } from './Elements/Elements';
+export { Style } from './Style/Style';
+export { Slides } from './Slides/Slides';
+export { Clones } from './Clones/Clones';
+export { Layout } from './Layout/Layout';
+export { Move } from './Move/Move';
+export { Controller } from './Controller/Controller';
+export { Arrows } from './Arrows/Arrows';
+export { Autoplay } from './Autoplay/Autoplay';
+export { Cover } from './Cover/Cover';
+export { Scroll } from './Scroll/Scroll';
+export { Drag } from './Drag/Drag';
+export { Keyboard } from './Keyboard/Keyboard';
+export { LazyLoad } from './LazyLoad/LazyLoad';
+export { Pagination } from './Pagination/Pagination';
+export { Sync } from './Sync/Sync';
+export { Wheel } from './Wheel/Wheel';
+//# sourceMappingURL=../../../src/js/components/index.d.ts.map

dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAS,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAO,uBAAuB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAQ,qBAAqB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAW,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAU,iBAAiB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAU,iBAAiB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAU,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAY,aAAa,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAU,iBAAiB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAQ,qBAAqB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAW,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAU,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAY,aAAa,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAQ,qBAAqB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAQ,qBAAqB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAY,aAAa,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAW,eAAe,CAAC"}

dist/types/constants/attributes.d.ts

@@ -0,0 +1,15 @@
+export declare const ROLE = "role";
+export declare const ARIA_CONTROLS = "aria-controls";
+export declare const ARIA_CURRENT = "aria-current";
+export declare const ARIA_LABEL = "aria-label";
+export declare const ARIA_HIDDEN = "aria-hidden";
+export declare const TAB_INDEX = "tabindex";
+export declare const DISABLED = "disabled";
+export declare const ARIA_ORIENTATION = "aria-orientation";
+/**
+ * The array with all attributes.
+ *
+ * @since 3.0.0
+ */
+export declare const ALL_ATTRIBUTES: string[];
+//# sourceMappingURL=../../../src/js/constants/attributes.d.ts.map

dist/types/constants/attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["attributes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,SAAqB,CAAC;AACvC,eAAO,MAAM,aAAa,kBAAqB,CAAC;AAChD,eAAO,MAAM,YAAY,iBAAqB,CAAC;AAC/C,eAAO,MAAM,UAAU,eAAqB,CAAC;AAC7C,eAAO,MAAM,WAAW,gBAAqB,CAAC;AAC9C,eAAO,MAAM,SAAS,aAAoB,CAAC;AAC3C,eAAO,MAAM,QAAQ,aAAqB,CAAC;AAC3C,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,eAAO,MAAM,cAAc,UAS1B,CAAC"}

dist/types/constants/classes.d.ts

@@ -0,0 +1,48 @@
+export declare const CLASS_ROOT = "splide";
+export declare const CLASS_SLIDER: string;
+export declare const CLASS_TRACK: string;
+export declare const CLASS_LIST: string;
+export declare const CLASS_SLIDE: string;
+export declare const CLASS_CLONE: string;
+export declare const CLASS_CONTAINER: string;
+export declare const CLASS_ARROWS: string;
+export declare const CLASS_ARROW: string;
+export declare const CLASS_ARROW_PREV: string;
+export declare const CLASS_ARROW_NEXT: string;
+export declare const CLASS_PAGINATION: string;
+export declare const CLASS_PAGINATION_PAGE: string;
+export declare const CLASS_PROGRESS: string;
+export declare const CLASS_PROGRESS_BAR: string;
+export declare const CLASS_AUTOPLAY: string;
+export declare const CLASS_PLAY: string;
+export declare const CLASS_PAUSE: string;
+export declare const CLASS_SPINNER: string;
+export declare const CLASS_INITIALIZED = "is-initialized";
+export declare const CLASS_ACTIVE = "is-active";
+export declare const CLASS_PREV = "is-prev";
+export declare const CLASS_NEXT = "is-next";
+export declare const CLASS_VISIBLE = "is-visible";
+export declare const CLASS_LOADING = "is-loading";
+/**
+ * The array with all status classes.
+ *
+ * @since 3.0.0
+ */
+export declare const STATUS_CLASSES: string[];
+/**
+ * The collection of classes for elements that Splide dynamically creates.
+ *
+ * @since 3.0.0
+ */
+export declare const CLASSES: {
+    slide: string;
+    clone: string;
+    arrows: string;
+    arrow: string;
+    prev: string;
+    next: string;
+    pagination: string;
+    page: string;
+    spinner: string;
+};
+//# sourceMappingURL=../../../src/js/constants/classes.d.ts.map

dist/types/constants/classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["classes.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,WAA0B,CAAC;AAClD,eAAO,MAAM,YAAY,QAAuC,CAAC;AACjE,eAAO,MAAM,WAAW,QAAuC,CAAC;AAChE,eAAO,MAAM,UAAU,QAAuC,CAAC;AAC/D,eAAO,MAAM,WAAW,QAAuC,CAAC;AAChE,eAAO,MAAM,WAAW,QAAsC,CAAC;AAC/D,eAAO,MAAM,eAAe,QAAsC,CAAC;AACnE,eAAO,MAAM,YAAY,QAAuC,CAAC;AACjE,eAAO,MAAM,WAAW,QAAuC,CAAC;AAChE,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAC9D,eAAO,MAAM,gBAAgB,QAAgC,CAAC;AAC9D,eAAO,MAAM,gBAAgB,QAAuC,CAAC;AACrE,eAAO,MAAM,qBAAqB,QAAgC,CAAC;AACnE,eAAO,MAAM,cAAc,QAAuC,CAAC;AACnE,eAAO,MAAM,kBAAkB,QAAgC,CAAC;AAChE,eAAO,MAAM,cAAc,QAAuC,CAAC;AACnE,eAAO,MAAM,UAAU,QAAuC,CAAC;AAC/D,eAAO,MAAM,WAAW,QAAuC,CAAC;AAChE,eAAO,MAAM,aAAa,QAAuC,CAAC;AAClE,eAAO,MAAM,iBAAiB,mBAAuB,CAAC;AACtD,eAAO,MAAM,YAAY,cAAuB,CAAC;AACjD,eAAO,MAAM,UAAU,YAAuB,CAAC;AAC/C,eAAO,MAAM,UAAU,YAAuB,CAAC;AAC/C,eAAO,MAAM,aAAa,eAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,eAAuB,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,cAAc,UAAyE,CAAC;AAErG;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAC"}

dist/types/constants/defaults.d.ts

@@ -0,0 +1,9 @@
+import { Options } from '../types';
+/**
+ * The collection of default options.
+ * Note that this collection does not contain all options.
+ *
+ * @since 3.0.0
+ */
+export declare const DEFAULTS: Options;
+//# sourceMappingURL=../../../src/js/constants/defaults.d.ts.map

dist/types/constants/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAKnC;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,OAmBtB,CAAC"}

dist/types/constants/directions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Enumerates slides from left to right.
+ */
+export declare const LTR = "ltr";
+/**
+ * Enumerates slides from right to left.
+ */
+export declare const RTL = "rtl";
+/**
+ * Enumerates slides in a col.
+ */
+export declare const TTB = "ttb";
+//# sourceMappingURL=../../../src/js/constants/directions.d.ts.map

dist/types/constants/directions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"directions.d.ts","sourceRoot":"","sources":["directions.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,GAAG,QAAQ,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,GAAG,QAAQ,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,GAAG,QAAQ,CAAC"}

dist/types/constants/events.d.ts

@@ -0,0 +1,31 @@
+export declare const EVENT_MOUNTED = "mounted";
+export declare const EVENT_READY = "ready";
+export declare const EVENT_MOVE = "move";
+export declare const EVENT_MOVED = "moved";
+export declare const EVENT_CLICK = "click";
+export declare const EVENT_ACTIVE = "active";
+export declare const EVENT_INACTIVE = "inactive";
+export declare const EVENT_VISIBLE = "visible";
+export declare const EVENT_HIDDEN = "hidden";
+export declare const EVENT_SLIDE_KEYDOWN = "slide:keydown";
+export declare const EVENT_REFRESH = "refresh";
+export declare const EVENT_UPDATED = "updated";
+export declare const EVENT_RESIZE = "resize";
+export declare const EVENT_RESIZED = "resized";
+export declare const EVENT_REPOSITIONED = "repositioned";
+export declare const EVENT_DRAG = "drag";
+export declare const EVENT_DRAGGING = "dragging";
+export declare const EVENT_DRAGGED = "dragged";
+export declare const EVENT_SCROLL = "scroll";
+export declare const EVENT_SCROLLED = "scrolled";
+export declare const EVENT_DESTROY = "destroy";
+export declare const EVENT_ARROWS_MOUNTED = "arrows:mounted";
+export declare const EVENT_ARROWS_UPDATED = "arrows:updated";
+export declare const EVENT_PAGINATION_MOUNTED = "pagination:mounted";
+export declare const EVENT_PAGINATION_UPDATED = "pagination:updated";
+export declare const EVENT_NAVIGATION_MOUNTED = "navigation:mounted";
+export declare const EVENT_AUTOPLAY_PLAY = "autoplay:play";
+export declare const EVENT_AUTOPLAY_PLAYING = "autoplay:playing";
+export declare const EVENT_AUTOPLAY_PAUSE = "autoplay:pause";
+export declare const EVENT_LAZYLOAD_LOADED = "lazyload:loaded";
+//# sourceMappingURL=../../../src/js/constants/events.d.ts.map

dist/types/constants/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["events.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,UAAU,SAAuB,CAAC;AAC/C,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,WAAW,UAAuB,CAAC;AAChD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,mBAAmB,kBAAuB,CAAC;AACxD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,kBAAkB,iBAAuB,CAAC;AACvD,eAAO,MAAM,UAAU,SAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,YAAY,WAAuB,CAAC;AACjD,eAAO,MAAM,cAAc,aAAuB,CAAC;AACnD,eAAO,MAAM,aAAa,YAAuB,CAAC;AAClD,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,wBAAwB,uBAAuB,CAAC;AAC7D,eAAO,MAAM,mBAAmB,kBAAuB,CAAC;AACxD,eAAO,MAAM,sBAAsB,qBAAuB,CAAC;AAC3D,eAAO,MAAM,oBAAoB,mBAAuB,CAAC;AACzD,eAAO,MAAM,qBAAqB,oBAAuB,CAAC"}

dist/types/constants/i18n.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The collection of i18n strings.
+ *
+ * @since 3.0.0
+ */
+export declare const I18N: {
+    prev: string;
+    next: string;
+    first: string;
+    last: string;
+    slideX: string;
+    pageX: string;
+    play: string;
+    pause: string;
+};
+//# sourceMappingURL=../../../src/js/constants/i18n.d.ts.map

dist/types/constants/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["i18n.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,IAAI;;;;;;;;;CAShB,CAAC"}

dist/types/constants/priority.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The default priority for internal handlers.
+ *
+ * @since 3.0.0
+ */
+export declare const DEFAULT_EVENT_PRIORITY = 10;
+/**
+ * The default priority for users' handlers.
+ *
+ * @since 3.0.0
+ */
+export declare const DEFAULT_USER_EVENT_PRIORITY = 20;
+//# sourceMappingURL=../../../src/js/constants/priority.d.ts.map

dist/types/constants/priority.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"priority.d.ts","sourceRoot":"","sources":["priority.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC"}

dist/types/constants/project.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The project code.
+ *
+ * @since 3.0.0
+ */
+export declare const PROJECT_CODE = "splide";
+/**
+ * The data attribute prefix.
+ *
+ * @since 3.0.0
+ */
+export declare const DATA_ATTRIBUTE: string;
+//# sourceMappingURL=../../../src/js/constants/project.d.ts.map

dist/types/constants/project.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project.d.ts","sourceRoot":"","sources":["project.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,YAAY,WAAW,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAA2B,CAAC"}

dist/types/constants/states.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Splide has been just created.
+ */
+export declare const CREATED = 1;
+/**
+ * Splide has mounted components.
+ */
+export declare const MOUNTED = 2;
+/**
+ * Splide is ready.
+ */
+export declare const IDLE = 3;
+/**
+ * Splide is moving.
+ */
+export declare const MOVING = 4;
+/**
+ * Splide has been destroyed.
+ */
+export declare const DESTROYED = 5;
+/**
+ * The collection of all states.
+ *
+ * @since 3.0.0
+ */
+export declare const STATES: {
+    CREATED: number;
+    MOUNTED: number;
+    IDLE: number;
+    MOVING: number;
+    DESTROYED: number;
+};
+//# sourceMappingURL=../../../src/js/constants/states.d.ts.map

dist/types/constants/states.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["states.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO,IAAI,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,OAAO,IAAI,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,IAAI,IAAI,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,MAAM,IAAI,CAAC;AAExB;;GAEG;AACH,eAAO,MAAM,SAAS,IAAI,CAAC;AAE3B;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}

dist/types/constants/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The type for the regular slider.
+ *
+ * @since 3.0.0
+ */
+export declare const SLIDE = "slide";
+/**
+ * The type for the carousel slider.
+ *
+ * @since 3.0.0
+ */
+export declare const LOOP = "loop";
+/**
+ * The type for the fade slider that can not have multiple slides in a page.
+ *
+ * @since 3.0.0
+ */
+export declare const FADE = "fade";
+//# sourceMappingURL=../../../src/js/constants/types.d.ts.map

dist/types/constants/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,KAAK,UAAU,CAAC;AAE7B;;;;GAIG;AACH,eAAO,MAAM,IAAI,SAAS,CAAC;AAE3B;;;;GAIG;AACH,eAAO,MAAM,IAAI,SAAS,CAAC"}

dist/types/constructors/EventBus/EventBus.d.ts

@@ -0,0 +1,40 @@
+import { AnyFunction } from '../../types';
+/**
+ * The interface for the EventBus instance.
+ *
+ * @since 3.0.0
+ */
+export interface EventBusObject {
+    on(events: string | string[], callback: EventBusCallback, key?: object, priority?: number): void;
+    off(events: string | string[], key?: object): void;
+    offBy(key: object): void;
+    emit(event: string, ...args: any[]): void;
+    destroy(): void;
+}
+/**
+ * The interface for each event handler object.
+ *
+ * @since 3.0.0
+ */
+export interface EventHandler {
+    _event: string;
+    _callback: AnyFunction;
+    _namespace: string;
+    _priority: number;
+    _key?: object;
+}
+/**
+ * The type for a callback function of the EventBus.
+ *
+ * @since 3.0.0
+ */
+export declare type EventBusCallback = AnyFunction;
+/**
+ * The constructor to provided a simple event system.
+ *
+ * @since 3.0.0
+ *
+ * @return An EventBus object.
+ */
+export declare function EventBus(): EventBusObject;
+//# sourceMappingURL=../../../../src/js/constructors/EventBus/EventBus.d.ts.map

dist/types/constructors/EventBus/EventBus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventBus.d.ts","sourceRoot":"","sources":["EventBus.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1C;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IACnG,GAAG,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IACrD,KAAK,CAAE,GAAG,EAAE,MAAM,GAAI,IAAI,CAAC;IAC3B,IAAI,CAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAI,IAAI,CAAC;IAC5C,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,oBAAY,gBAAgB,GAAG,WAAW,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,QAAQ,IAAI,cAAc,CAuGzC"}

dist/types/constructors/EventInterface/EventInterface.d.ts

@@ -0,0 +1,30 @@
+import { Splide } from '../../core/Splide/Splide';
+import { AnyFunction } from '../../types';
+import { EventMap } from '../../types/events';
+import { EventBusCallback } from '../EventBus/EventBus';
+/**
+ * The interface for the EventInterface object.
+ *
+ * @since 3.0.0
+ */
+export interface EventInterfaceObject {
+    on<K extends keyof EventMap>(event: K, callback: (...args: EventMap[K]) => void, priority?: number): void;
+    on(events: string | string[], callback: EventBusCallback, priority?: number): void;
+    off<K extends keyof EventMap>(events: K | K[] | string | string[]): void;
+    emit<K extends keyof EventMap>(event: K, ...args: EventMap[K]): void;
+    emit(event: string, ...args: any[]): void;
+    bind(target: Element | Window | Document | Array<Element | Window | Document>, events: string, callback: AnyFunction, options?: AddEventListenerOptions): void;
+    unbind(target: Element | Window | Document | Array<Element | Window | Document>, events: string): void;
+    destroy(): void;
+}
+/**
+ * The function that provides interface for internal and native events.
+ *
+ * @since 3.0.0
+ *
+ * @param Splide - A Splide instance.
+ *
+ * @return A collection of interface functions.
+ */
+export declare function EventInterface(Splide: Splide): EventInterfaceObject;
+//# sourceMappingURL=../../../../src/js/constructors/EventInterface/EventInterface.d.ts.map

dist/types/constructors/EventInterface/EventInterface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventInterface.d.ts","sourceRoot":"","sources":["EventInterface.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAE,GAAG,IAAI,EAAE,QAAQ,CAAE,CAAC,CAAE,KAAM,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IAChH,EAAE,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAI,IAAI,CAAC;IACrF,GAAG,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,GAAI,IAAI,CAAC;IAC3E,IAAI,CAAC,CAAC,SAAS,MAAM,QAAQ,EAAG,KAAK,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,CAAE,CAAC,CAAE,GAAI,IAAI,CAAA;IACxE,IAAI,CAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAI,IAAI,CAAC;IAC5C,IAAI,CACF,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EACxE,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,uBAAuB,GAChC,IAAI,CAAA;IACP,MAAM,CAAE,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,GAAI,IAAI,CAAC;IACzG,OAAO,IAAI,IAAI,CAAC;CACjB;AASD;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAE,MAAM,EAAE,MAAM,GAAI,oBAAoB,CAsHrE"}

dist/types/constructors/RequestInterval/RequestInterval.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The interface for the returning value of the RequestInterval.
+ *
+ * @since 3.0.0
+ */
+export interface RequestIntervalInterface {
+    start(resume?: boolean): void;
+    pause(): void;
+    rewind(): void;
+    cancel(): void;
+    isPaused(): boolean;
+}
+/**
+ * Requests interval like the native `setInterval()` with using `requestAnimationFrame`.
+ *
+ * @since 3.0.0
+ *
+ * @param interval   - The interval duration in milliseconds.
+ * @param onInterval - The callback fired on every interval.
+ * @param onUpdate   - Optional. Called on every animation frame, taking the progress rate.
+ * @param limit      - Optional. Limits the number of interval.
+ */
+export declare function RequestInterval(interval: number, onInterval: () => void, onUpdate?: (rate: number) => void, limit?: number): RequestIntervalInterface;
+//# sourceMappingURL=../../../../src/js/constructors/RequestInterval/RequestInterval.d.ts.map

dist/types/constructors/RequestInterval/RequestInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RequestInterval.d.ts","sourceRoot":"","sources":["RequestInterval.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAE,MAAM,CAAC,EAAE,OAAO,GAAI,IAAI,CAAC;IAChC,KAAK,IAAI,IAAI,CAAC;IACd,MAAM,IAAI,IAAI,CAAC;IACf,MAAM,IAAI,IAAI,CAAC;IACf,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,IAAI,EACtB,QAAQ,CAAC,EAAE,CAAE,IAAI,EAAE,MAAM,KAAM,IAAI,EACnC,KAAK,CAAC,EAAE,MAAM,GACb,wBAAwB,CAmH1B"}

dist/types/constructors/State/State.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The interface for the State object.
+ *
+ * @since 3.0.0
+ */
+export interface StateObject {
+    set(state: number): void;
+    is(states: number | number[]): boolean;
+}
+/**
+ * The function providing a super simple state system.
+ *
+ * @param initialState - Specifies the initial state.
+ */
+export declare function State(initialState: number): StateObject;
+//# sourceMappingURL=../../../../src/js/constructors/State/State.d.ts.map

dist/types/constructors/State/State.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["State.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAC3B,EAAE,CAAE,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAI,OAAO,CAAC;CAC1C;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAE,YAAY,EAAE,MAAM,GAAI,WAAW,CA2BzD"}