Update the script build process with the rollup.

build/complete/complete.js

@@ -1,22 +0,0 @@
-/**
- * Export "Splide" class for frontend with full components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-import { default as Core } from '../../src/js/splide';
-import { COMPLETE } from '../../src/js/components';
-
-
-/**
- * Export Splide with all components.
- */
-export class Splide extends Core {
-	constructor( root, options ) {
-		super( root, options, COMPLETE );
-	}
-}
-
-// Register the class as a global variable for non-ES6 environment.
-window.Splide = Splide;

build/complete/config-min.js

@@ -1,21 +0,0 @@
-const config       = require( './config' );
-const TerserPlugin = require( 'terser-webpack-plugin' );
-
-module.exports = {
-	...config,
-	output      : {
-		filename: 'splide.min.js',
-		environment: config.output.environment,
-	},
-	optimization: {
-		minimize : true,
-		minimizer: [ new TerserPlugin( {
-			terserOptions: {
-				format: {
-					comments: /^\**!|@preserve|@license|@cc_on/i,
-				},
-			},
-			extractComments: false,
-		} ) ],
-	},
-};

build/complete/config.js

@@ -1,36 +0,0 @@
-const webpack = require( 'webpack' );
-
-module.exports = {
-	entry: './build/complete/complete.js',
-	output: {
-		filename: 'splide.js',
-		environment: {
-			arrowFunction: false,
-			bigIntLiteral: false,
-			const        : false,
-			destructuring: false,
-			dynamicImport: false,
-			forOf        : false,
-			module       : false,
-		},
-	},
-	module: {
-		rules: [
-			{
-				test   : /.js$/,
-				loader : 'babel-loader',
-				exclude: /node_modules/,
-			},
-		],
-	},
-	plugins: [
-		new webpack.BannerPlugin( {
-			banner: require( '../banner' ),
-			raw   : true,
-		} ),
-	],
-	optimization: {
-		minimize: false,
-	},
-	mode: 'production',
-};

build/module/config.js

@@ -1,12 +0,0 @@
-const config  = require( '../complete/config' );
-
-module.exports = {
-	...config,
-	entry: './build/module/module.js',
-	output: {
-		filename     : 'splide.esm.js',
-		library      : 'Splide',
-		libraryTarget: 'umd',
-	},
-	mode: 'production',
-};

build/module/module.js

@@ -1,19 +0,0 @@
-/**
- * Export Splide class for import.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-import { default as Core } from '../../src/js/splide';
-import { COMPLETE } from '../../src/js/components';
-
-
-/**
- * Export Splide class for import from other projects.
- */
-export default class Splide extends Core {
-	constructor( root, options ) {
-		super( root, options, COMPLETE );
-	}
-}

dist/js/splide.cjs.js

@@ -0,0 +1,5741 @@
+/*!
+ * Splide.js
+ * Version  : 2.4.23
+ * License  : MIT
+ * Copyright: 2020 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; }
+
+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); }
+
+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.
+ */
+
+/**
+ * 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 = {};
+      }
+
+      events.split(' ').forEach(function (event) {
+        if (elm) {
+          elm.addEventListener(event, handler, options);
+        }
+
+        data.push({
+          event: event,
+          handler: handler,
+          elm: elm,
+          options: options
+        });
+      });
+    },
+
+    /**
+     * 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;
+      }
+
+      events.split(' ').forEach(function (event) {
+        data = data.filter(function (item) {
+          if (item && item.event === event && item.elm === elm) {
+            unsubscribe(item);
+            return false;
+          }
+
+          return true;
+        });
+      });
+    },
+
+    /**
+     * 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];
+      }
+
+      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.
+ */
+
+
+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;
+    },
+
+    /**
+     * 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);
+  });
+}
+/**
+ * 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];
+  });
+}
+/**
+ * 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';
+}
+/**
+ * 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] = {};
+      }
+
+      to[key] = merge(to[key], value);
+    } else {
+      to[key] = value;
+    }
+  });
+  return to;
+}
+/**
+ * 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));
+    }
+  });
+  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];
+}
+/**
+ * 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);
+}
+/**
+ * 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++];
+  });
+}
+/**
+ * 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';
+  }
+
+  return type === 'string' ? value : '';
+}
+/**
+ * Pad start with 0.
+ *
+ * @param {number} number - A number to be filled with 0.
+ *
+ * @return {string|number} - Padded number.
+ */
+
+
+function pad(number) {
+  return number < 10 ? '0' + number : number;
+}
+/**
+ * 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);
+  }
+
+  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;
+    });
+  }
+
+  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) {
+  var elm = document.createElement(tag);
+  each(attrs, function (value, key) {
+    return setAttribute(elm, key, value);
+  });
+  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);
+    }
+  });
+}
+/**
+ * Append a child to a given element.
+ *
+ * @param {Element} parent - A parent element.
+ * @param {Element} child  - An element to be appended.
+ */
+
+
+function append(parent, child) {
+  if (parent) {
+    parent.appendChild(child);
+  }
+}
+/**
+ * Insert an element before the reference element.
+ *
+ * @param {Element|Node} ref - A reference element.
+ * @param {Element}      elm - An element to be inserted.
+ */
+
+
+function before(elm, ref) {
+  if (elm && ref) {
+    var parent = ref.parentElement;
+    parent && parent.insertBefore(elm, ref);
+  }
+}
+/**
+ * Apply styles to the given element.
+ *
+ * @param {Element} elm     - An element where styles are applied.
+ * @param {Object}  styles  - Object containing styles.
+ */
+
+
+function applyStyle(elm, styles) {
+  if (elm) {
+    each(styles, function (value, prop) {
+      if (value !== null) {
+        elm.style[prop] = 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 addOrRemoveClasses(elm, classes, remove) {
+  if (elm) {
+    toArray(classes).forEach(function (name) {
+      if (name) {
+        elm.classList[remove ? 'remove' : 'add'](name);
+      }
+    });
+  }
+}
+/**
+ * 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);
+}
+/**
+ * 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);
+}
+/**
+ * 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);
+}
+/**
+ * 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);
+  }
+}
+/**
+ * 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) : '';
+}
+/**
+ * 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);
+    });
+  });
+}
+/**
+ * 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();
+}
+/**
+ * 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();
+  }
+}
+/**
+ * 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;
+    }
+
+    // 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;
+    }
+
+    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;
+  }
+  /**
+   * 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 = {};
+    }
+
+    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;
+    }
+
+    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];
+    }
+
+    (_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);
+    }
+
+    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;
+    }
+
+    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;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * 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;
+    }
+  }]);
+
+  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;
+    }
+
+  }, isVertical ? Vertical(Splide, Components) : Horizontal(Splide, Components));
+  /**
+   * Init slider styles according to options.
+   */
+
+  function init() {
+    Layout.init();
+    applyStyle(Splide.root, {
+      maxWidth: unit(Splide.options.width)
+    });
+    Elements.each(function (Slide) {
+      Slide.slide.style[Layout.margin] = unit(Layout.gap);
+    });
+    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);
+  }
+  /**
+   * 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);
+    }
+  }
+  /**
+   * 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);
+        }
+      }
+    }
+  }
+  /**
+   * 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;
+    }
+
+    var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
+
+    if (isVertical) {
+      angle = 90 - angle;
+    }
+
+    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;
+    }
+
+    return position;
+  }
+  /**
+   * Called when dragging ends.
+   */
+
+
+  function end() {
+    startInfo = null;
+
+    if (isDragging) {
+      Splide.emit('dragged', currentInfo);
+      go(currentInfo);
+      isDragging = false;
+    }
+  }
+  /**
+   * 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;
+
+        if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
+          destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
+        }
+
+        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;
+      }
+
+      if (Splide.is(SLIDE)) {
+        destIndex = between(destIndex, 0, Controller.edgeIndex);
+      }
+
+      Controller.go(destIndex, options.isNavigation);
+    }
+  }
+  /**
+   * 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();
+    }
+  }
+
+  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;
+      }
+
+      flags = flags.filter(function (f) {
+        return f !== flag;
+      });
+
+      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");
+      }
+    }
+  };
+  /**
+   * Listen some events.
+   */
+
+  function bind() {
+    var options = Splide.options;
+    var sibling = Splide.sibling;
+    var elms = [Splide.root, sibling ? sibling.root : null];
+
+    if (options.pauseOnHover) {
+      switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
+      switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
+    }
+
+    if (options.pauseOnFocus) {
+      switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
+      switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
+    }
+
+    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);
+    }
+
+    if (Elements.pause) {
+      switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, 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);
+    });
+  }
+
+  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);
+      });
+    },
+
+    /**
+     * Destroy.
+     */
+    destroy: function destroy() {
+      apply(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');
+
+      if (img && img.src) {
+        cover(img, uncover);
+      }
+    });
+  }
+  /**
+   * 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'
+    });
+  }
+
+  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);
+      }
+    }
+  };
+  /**
+   * 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);
+  }
+
+  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();
+        }
+      });
+    },
+
+    /**
+     * 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);
+    }
+
+    if (curr) {
+      addClass(curr.button, active);
+    }
+
+    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
+    };
+  }
+
+  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
+  };
+  /**
+   * 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;
+      }
+
+      return true;
+    }); // Unbind if all images are loaded.
+
+    if (!images[0]) {
+      Splide.off("moved." + name);
+    }
+  }
+  /**
+   * 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) || '');
+  }
+  /**
+   * Start loading a next image in images array.
+   */
+
+
+  function loadNext() {
+    if (nextIndex < images.length) {
+      var image = images[nextIndex];
+      load(image.img, image.Slide);
+    }
+
+    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: ''
+      });
+      Splide.emit(name + ":loaded", img).emit('resize');
+    }
+
+    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: '>'
+  }
+};
+/**
+ * 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);
+        }
+      });
+    }
+  };
+};
+/**
+ * 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);
+        });
+      }
+
+      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);
+    }
+  };
+  /**
+   * 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);
+    }
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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;
+      });
+      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);
+    }
+
+    if (curr) {
+      setAttribute(curr.button, ARIA_CURRENRT, true);
+    }
+  }
+  /**
+   * Initialize autoplay buttons.
+   */
+
+
+  function initAutoplay() {
+    ['play', 'pause'].forEach(function (name) {
+      var elm = Elements[name];
+
+      if (elm) {
+        if (!isButton(elm)) {
+          setAttribute(elm, 'role', 'button');
+        }
+
+        setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
+        setAttribute(elm, ARIA_LABEL, i18n[name]);
+      }
+    });
+  }
+  /**
+   * 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);
+
+      if (mainSlide) {
+        setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
+      }
+    });
+  }
+  /**
+   * 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);
+    } 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.
+   */
+
+
+  function isButton(elm) {
+    return elm.tagName === 'BUTTON';
+  }
+
+  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);
+      }
+    }
+  };
+  /**
+   * 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.
+   */
+
+
+  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.
+   */
+
+
+  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
+      });
+    });
+  }
+  /**
+   * 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);
+    }
+  }
+
+  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 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)")
+        };
+      });
+      /*
+       * 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();
+    },
+
+    /**
+     * Destroy.
+     *
+     * @param {boolean} completely - Whether to destroy Splide completely.
+     */
+    destroy: function destroy(completely) {
+      if (completely) {
+        removeEventListener('resize', throttledCheck);
+      }
+    }
+  };
+  /**
+   * 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;
+      }
+    }
+  }
+  /**
+   * 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;
+  }
+
+  return Splide;
+}(Splide$1);
+
+exports.Splide = Splide;
+exports['default'] = Splide;

dist/js/splide.js

@@ -1,5862 +1,5741 @@
+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.22
+ * Version  : 2.4.23
  * License  : MIT
  * Copyright: 2020 Naotoshi Fujita
  */
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	!function() {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = function(exports, definition) {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	!function() {
-/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-
-// UNUSED EXPORTS: Splide
-
-// NAMESPACE OBJECT: ./src/js/constants/states.js
-var states_namespaceObject = {};
-__webpack_require__.r(states_namespaceObject);
-__webpack_require__.d(states_namespaceObject, {
-  "CREATED": function() { return CREATED; },
-  "DESTROYED": function() { return DESTROYED; },
-  "IDLE": function() { return IDLE; },
-  "MOUNTED": function() { return MOUNTED; },
-  "MOVING": function() { return MOVING; }
-});
-
-;// CONCATENATED MODULE: ./src/js/core/event.js
-/**
- * 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.
- */
-/* harmony default export */ var core_event = (function () {
+(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';
   /**
-   * Store all event data.
+   * The function for providing an Event object simply managing events.
    *
-   * @type {Array}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
+   */
+
+  /**
+   * The function for providing an Event object simply managing events.
    */
-  var data = [];
-  var Event = {
+
+  var Event = function Event() {
     /**
-     * Subscribe the given event(s).
+     * Store all event data.
      *
-     * @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.
+     * @type {Array}
      */
-    on: function on(events, handler, elm, options) {
-      if (elm === void 0) {
-        elm = null;
-      }
+    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 = {};
-      }
+        if (options === void 0) {
+          options = {};
+        }
 
-      events.split(' ').forEach(function (event) {
-        if (elm) {
-          elm.addEventListener(event, handler, options);
+        events.split(' ').forEach(function (event) {
+          if (elm) {
+            elm.addEventListener(event, handler, options);
+          }
+
+          data.push({
+            event: event,
+            handler: handler,
+            elm: elm,
+            options: options
+          });
+        });
+      },
+
+      /**
+       * 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;
         }
 
-        data.push({
-          event: event,
-          handler: handler,
-          elm: elm,
-          options: options
+        events.split(' ').forEach(function (event) {
+          data = data.filter(function (item) {
+            if (item && item.event === event && item.elm === elm) {
+              unsubscribe(item);
+              return false;
+            }
+
+            return true;
+          });
         });
-      });
-    },
+      },
 
-    /**
-     * 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;
-      }
+      /**
+       * 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];
+        }
 
-      events.split(' ').forEach(function (event) {
-        data = data.filter(function (item) {
-          if (item && item.event === event && item.elm === elm) {
-            unsubscribe(item);
-            return false;
+        data.forEach(function (item) {
+          if (!item.elm && item.event.split('.')[0] === event) {
+            item.handler.apply(item, args);
           }
-
-          return true;
         });
-      });
-    },
+      },
 
+      /**
+       * Clear event data.
+       */
+      destroy: function destroy() {
+        data.forEach(unsubscribe);
+        data = [];
+      }
+    };
     /**
-     * Emit an event.
-     * This method is only for custom events.
+     * Remove the registered event listener.
      *
-     * @param {string}  event - An event name.
-     * @param {*}       args  - Any number of arguments passed to handlers.
+     * @param {Object} item - An object containing event data.
      */
-    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];
-      }
-
-      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 = [];
+    function unsubscribe(item) {
+      if (item.elm) {
+        item.elm.removeEventListener(item.event, item.handler, item.options);
+      }
     }
+
+    return Event;
   };
   /**
-   * Remove the registered event listener.
+   * The function providing a super simple state system.
    *
-   * @param {Object} item - An object containing event data.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  function unsubscribe(item) {
-    if (item.elm) {
-      item.elm.removeEventListener(item.event, item.handler, item.options);
-    }
-  }
-
-  return Event;
-});
-;// CONCATENATED MODULE: ./src/js/core/state.js
-/**
- * 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.
- */
-/* harmony default export */ var state = (function (initialState) {
   /**
-   * Store the current state.
+   * The function providing a super simple state system.
    *
-   * @type {string|number}
+   * @param {string|number} initialState - Provide the initial state value.
    */
-  var curr = initialState;
-  return {
-    /**
-     * Change state.
-     *
-     * @param {string|number} state - A new state.
-     */
-    set: function set(state) {
-      curr = state;
-    },
 
+
+  var State = function State(initialState) {
     /**
-     * Verify if the current state is given one or not.
-     *
-     * @param {string|number} state - A state name to be verified.
+     * Store the current state.
      *
-     * @return {boolean} - True if the current state is the given one.
+     * @type {string|number}
      */
-    is: function is(state) {
-      return state === curr;
-    }
-  };
-});
-;// CONCATENATED MODULE: ./src/js/utils/object.js
-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); }
-
-/**
- * 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];
-  });
-}
-/**
- * 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';
-}
-/**
- * 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);
+    var curr = initialState;
+    return {
+      /**
+       * Change state.
+       *
+       * @param {string|number} state - A new state.
+       */
+      set: function set(state) {
+        curr = state;
+      },
 
-  each(from, function (value, key) {
-    if (isObject(value)) {
-      if (!isObject(to[key])) {
-        to[key] = {};
+      /**
+       * 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.
+   */
 
-      to[key] = merge(to[key], value);
-    } else {
-      to[key] = value;
-    }
-  });
-  return to;
-}
-/**
- * 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 object_assign(to, from) {
-  keys(from).forEach(function (key) {
-    if (!to[key]) {
-      Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
-    }
-  });
-  return to;
-}
-;// CONCATENATED MODULE: ./src/js/utils/utils.js
-/**
- * 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];
-}
-/**
- * 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);
-}
-/**
- * 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++];
-  });
-}
-/**
- * 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';
-  }
-
-  return type === 'string' ? value : '';
-}
-/**
- * Pad start with 0.
- *
- * @param {number} number - A number to be filled with 0.
- *
- * @return {string|number} - Padded number.
- */
 
-function pad(number) {
-  return number < 10 ? '0' + number : number;
-}
-/**
- * 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.
- */
+  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 toPixel(root, value) {
-  if (typeof value === 'string') {
-    var div = create('div', {});
-    applyStyle(div, {
-      position: 'absolute',
-      width: value
+  function each(obj, callback) {
+    keys(obj).some(function (key, index) {
+      return callback(obj[key], key, index);
     });
-    append(root, div);
-    value = div.clientWidth;
-    dom_remove(div);
   }
+  /**
+   * 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.
+   */
 
-  return +value || 0;
-}
-;// CONCATENATED MODULE: ./src/js/utils/dom.js
-/**
- * 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 values(obj) {
+    return keys(obj).map(function (key) {
+      return obj[key];
     });
   }
+  /**
+   * Check if the given subject is object or not.
+   *
+   * @param {*} subject - A subject to be verified.
+   *
+   * @return {boolean} - True if object, false otherwise.
+   */
 
-  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) {
-  var elm = document.createElement(tag);
-  each(attrs, function (value, key) {
-    return setAttribute(elm, key, value);
-  });
-  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 isObject(subject) {
+    return typeof subject === 'object';
+  }
+  /**
+   * 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 dom_remove(elms) {
-  toArray(elms).forEach(function (elm) {
-    if (elm) {
-      var parent = elm.parentElement;
-      parent && parent.removeChild(elm);
-    }
-  });
-}
-/**
- * Append a child to a given element.
- *
- * @param {Element} parent - A parent element.
- * @param {Element} child  - An element to be appended.
- */
 
-function append(parent, child) {
-  if (parent) {
-    parent.appendChild(child);
-  }
-}
-/**
- * Insert an element before the reference element.
- *
- * @param {Element|Node} ref - A reference element.
- * @param {Element}      elm - An element to be inserted.
- */
+  function merge(_ref, from) {
+    var to = _extends({}, _ref);
 
-function before(elm, ref) {
-  if (elm && ref) {
-    var parent = ref.parentElement;
-    parent && parent.insertBefore(elm, ref);
-  }
-}
-/**
- * Apply styles to the given element.
- *
- * @param {Element} elm     - An element where styles are applied.
- * @param {Object}  styles  - Object containing styles.
- */
+    each(from, function (value, key) {
+      if (isObject(value)) {
+        if (!isObject(to[key])) {
+          to[key] = {};
+        }
 
-function applyStyle(elm, styles) {
-  if (elm) {
-    each(styles, function (value, prop) {
-      if (value !== null) {
-        elm.style[prop] = value;
+        to[key] = merge(to[key], value);
+      } else {
+        to[key] = value;
       }
     });
+    return to;
   }
-}
-/**
- * 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.
- */
+  /**
+   * 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 addOrRemoveClasses(elm, classes, remove) {
-  if (elm) {
-    toArray(classes).forEach(function (name) {
-      if (name) {
-        elm.classList[remove ? 'remove' : 'add'](name);
+  function assign(to, from) {
+    keys(from).forEach(function (key) {
+      if (!to[key]) {
+        Object.defineProperty(to, key, Object.getOwnPropertyDescriptor(from, key));
       }
     });
+    return to;
   }
-}
-/**
- * Add classes to the element.
- *
- * @param {Element}          elm     - An element where classes are added.
- * @param {string|string[]}  classes - Class names being added.
- */
+  /**
+   * 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 addClass(elm, classes) {
-  addOrRemoveClasses(elm, classes, false);
-}
-/**
- * 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);
-}
-/**
- * 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 toArray(value) {
+    return Array.isArray(value) ? value : [value];
+  }
+  /**
+   * 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 hasClass(elm, className) {
-  return !!elm && elm.classList.contains(className);
-}
-/**
- * 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 between(value, m1, m2) {
+    return Math.min(Math.max(value, m1 > m2 ? m2 : m1), m1 > m2 ? m1 : m2);
   }
-}
-/**
- * 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.
- */
+  /**
+   * 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 getAttribute(elm, name) {
-  return elm ? elm.getAttribute(name) : '';
-}
-/**
- * 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);
+  function sprintf(format, replacements) {
+    var i = 0;
+    return format.replace(/%s/g, function () {
+      return toArray(replacements)[i++];
     });
-  });
-}
-/**
- * Return the Rect object of the provided object.
- *
- * @param {Element} elm - An element.
- *
- * @return {ClientRect|DOMRect} - A rect object.
- */
+  }
+  /**
+   * 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 getRect(elm) {
-  return elm.getBoundingClientRect();
-}
-/**
- * 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;
+  function unit(value) {
+    var type = typeof value;
 
-  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();
+    if (type === 'number' && value > 0) {
+      return parseFloat(value) + 'px';
+    }
+
+    return type === 'string' ? value : '';
   }
-}
-;// CONCATENATED MODULE: ./src/js/constants/types.js
-/**
- * Export slider types.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+  /**
+   * Pad start with 0.
+   *
+   * @param {number} number - A number to be filled with 0.
+   *
+   * @return {string|number} - Padded number.
+   */
 
-/**
- * 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}
- */
+  function pad(number) {
+    return number < 10 ? '0' + number : number;
+  }
+  /**
+   * 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.
+   */
 
-var FADE = 'fade';
-;// CONCATENATED MODULE: ./src/js/transitions/slide/index.js
-/**
- * The component for general slide effect transition.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
 
+  function toPixel(root, value) {
+    if (typeof value === 'string') {
+      var div = create('div', {});
+      applyStyle(div, {
+        position: 'absolute',
+        width: value
+      });
+      append(root, div);
+      value = div.clientWidth;
 
-/**
- * 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.
- */
+      _remove(div);
+    }
 
-/* harmony default export */ var slide = (function (Splide, Components) {
+    return +value || 0;
+  }
   /**
-   * Hold the list element.
+   * Some utility functions related with DOM.
    *
-   * @type {Element}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  var list;
+
   /**
-   * Hold the onEnd callback function.
+   * Find the first element matching the given selector.
+   * Be aware that all selectors after a space are ignored.
    *
-   * @type {function}
+   * @param {Element|Node}  elm       - An ancestor element.
+   * @param {string}        selector  - DOMString.
+   *
+   * @return {Element|null} - A found element or null.
    */
 
-  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;
+  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.
+   */
 
-      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)"
-      });
-    }
-  };
-});
-;// CONCATENATED MODULE: ./src/js/transitions/fade/index.js
-/**
- * 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.
- */
-
-/* harmony default export */ var fade = (function (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: ''
-        });
-      });
-    }
-  };
+  function child(parent, tagOrClassName) {
+    return children(parent, tagOrClassName)[0];
+  }
   /**
-   * Apply transition style to the slide specified by the given index.
+   * 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.
    *
-   * @param {number} index - A slide index.
+   * @return {Element[]} - Found elements.
    */
 
-  function apply(index) {
-    var options = Splide.options;
-    applyStyle(Components.Elements.slides[index], {
-      transition: "opacity " + options.speed + "ms " + options.easing
-    });
-  }
-
-  return Fade;
-});
-;// CONCATENATED MODULE: ./src/js/transitions/index.js
-/**
- * Export transition components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-
-;// CONCATENATED MODULE: ./src/js/core/composer.js
-/**
- * Provide a function for composing components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
 
+  function children(parent, tagOrClassName) {
+    if (parent) {
+      return values(parent.children).filter(function (child) {
+        return hasClass(child, tagOrClassName.split(' ')[0]) || child.tagName === tagOrClassName;
+      });
+    }
 
-/**
- * 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;
-  }
-
-  components.Transition = Transition(Splide, components);
-  return components;
-}
-;// CONCATENATED MODULE: ./src/js/utils/error.js
-/**
- * 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);
+    return [];
   }
-}
-;// CONCATENATED MODULE: ./src/js/constants/classes.js
-/**
- * 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'
-};
-;// CONCATENATED MODULE: ./src/js/constants/i18n.js
-/**
- * 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'
-};
-;// CONCATENATED MODULE: ./src/js/constants/defaults.js
-/**
- * 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.
+   * Create an element with some optional attributes.
    *
-   * @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.
+   * @param {string} tag   - A tag name.
+   * @param {Object} attrs - An object any attribute pairs of name and value.
    *
-   * @type {boolean}
+   * @return {Element} - A created element.
    */
-  rewind: false,
 
-  /**
-   * Transition speed in milliseconds.
-   *
-   * @type {number}
-   */
-  speed: 400,
 
+  function create(tag, attrs) {
+    var elm = document.createElement(tag);
+    each(attrs, function (value, key) {
+      return setAttribute(elm, key, value);
+    });
+    return elm;
+  }
   /**
-   * Transition speed on rewind in milliseconds.
+   * Convert HTML string to DOM node.
    *
-   * @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.
+   * @param {string} html - HTML string.
    *
-   * @type {boolean}
+   * @return {Node} - A created node.
    */
-  waitForTransition: true,
 
-  /**
-   * Define slider max width.
-   *
-   * @type {number}
-   */
-  width: 0,
 
+  function domify(html) {
+    var div = create('div', {});
+    div.innerHTML = html;
+    return div.firstChild;
+  }
   /**
-   * Define slider height.
+   * Remove a given element from a DOM tree.
    *
-   * @type {number}
+   * @param {Element|Element[]} elms - Element(s) to be removed.
    */
-  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,
 
+  function _remove(elms) {
+    toArray(elms).forEach(function (elm) {
+      if (elm) {
+        var parent = elm.parentElement;
+        parent && parent.removeChild(elm);
+      }
+    });
+  }
   /**
-   * 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.
+   * Append a child to a given element.
    *
-   * @type {number|string}
+   * @param {Element} parent - A parent element.
+   * @param {Element} child  - An element to be appended.
    */
-  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,
 
+  function append(parent, child) {
+    if (parent) {
+      parent.appendChild(child);
+    }
+  }
   /**
-   * If true, slide width will be determined by the element width itself.
-   * - perPage/perMove should be 1.
+   * Insert an element before the reference element.
    *
-   * @type {boolean}
+   * @param {Element|Node} ref - A reference element.
+   * @param {Element}      elm - An element to be inserted.
    */
-  autoWidth: false,
 
-  /**
-   * If true, slide height will be determined by the element width itself.
-   * - perPage/perMove should be 1.
-   *
-   * @type {boolean}
-   */
-  autoHeight: false,
 
+  function before(elm, ref) {
+    if (elm && ref) {
+      var parent = ref.parentElement;
+      parent && parent.insertBefore(elm, ref);
+    }
+  }
   /**
-   * Determine how many slides should be displayed per page.
+   * Apply styles to the given element.
    *
-   * @type {number}
+   * @param {Element} elm     - An element where styles are applied.
+   * @param {Object}  styles  - Object containing styles.
    */
-  perPage: 1,
 
-  /**
-   * Determine how many slides should be moved when a slider goes to next or perv.
-   *
-   * @type {number}
-   */
-  perMove: 0,
 
+  function applyStyle(elm, styles) {
+    if (elm) {
+      each(styles, function (value, prop) {
+        if (value !== null) {
+          elm.style[prop] = value;
+        }
+      });
+    }
+  }
   /**
-   * 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.
+   * Add or remove classes to/from the element.
+   * This function is for internal usage.
    *
-   * @type {number}
+   * @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.
    */
-  clones: 0,
 
-  /**
-   * Start index.
-   *
-   * @type {number}
-   */
-  start: 0,
 
+  function addOrRemoveClasses(elm, classes, remove) {
+    if (elm) {
+      toArray(classes).forEach(function (name) {
+        if (name) {
+          elm.classList[remove ? 'remove' : 'add'](name);
+        }
+      });
+    }
+  }
   /**
-   * Determine which slide should be focused if there are multiple slides in a page.
-   * A string "center" is acceptable for centering slides.
+   * Add classes to the element.
    *
-   * @type {boolean|number|string}
+   * @param {Element}          elm     - An element where classes are added.
+   * @param {string|string[]}  classes - Class names being added.
    */
-  focus: false,
 
+
+  function addClass(elm, classes) {
+    addOrRemoveClasses(elm, classes, false);
+  }
   /**
-   * Gap between slides. CSS format is allowed such as 1em.
+   * Remove a class from the element.
    *
-   * @type {number|string}
+   * @param {Element}         elm     - An element where classes are removed.
+   * @param {string|string[]} classes - A class name being removed.
    */
-  gap: 0,
 
+
+  function removeClass(elm, classes) {
+    addOrRemoveClasses(elm, classes, true);
+  }
   /**
-   * 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.
+   * Verify if the provided element has the class or not.
    *
-   * @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.
+   * @param {Element} elm       - An element.
+   * @param {string}  className - A class name.
    *
-   * @type {number|string|Object}
+   * @return {boolean} - True if the element has the class or false if not.
    */
-  padding: 0,
 
-  /**
-   * Whether to append arrows.
-   *
-   * @type {boolean}
-   */
-  arrows: true,
 
+  function hasClass(elm, className) {
+    return !!elm && elm.classList.contains(className);
+  }
   /**
-   * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
+   * Set attribute to the given element.
    *
-   * @type {string}
+   * @param {Element}                 elm   - An element where an attribute is assigned.
+   * @param {string}                  name  - Attribute name.
+   * @param {string|number|boolean}   value - Attribute value.
    */
-  arrowPath: '',
 
-  /**
-   * Whether to append pagination(indicator dots) or not.
-   *
-   * @type {boolean}
-   */
-  pagination: true,
 
+  function setAttribute(elm, name, value) {
+    if (elm) {
+      elm.setAttribute(name, value);
+    }
+  }
   /**
-   * Activate autoplay.
+   * Get attribute from the given element.
+   *
+   * @param {Element} elm  - An element where an attribute is assigned.
+   * @param {string}  name - Attribute name.
    *
-   * @type {boolean}
+   * @return {string} - The value of the given attribute if available. An empty string if not.
    */
-  autoplay: false,
 
+
+  function getAttribute(elm, name) {
+    return elm ? elm.getAttribute(name) : '';
+  }
   /**
-   * Autoplay interval in milliseconds.
+   * Remove attribute from the given element.
    *
-   * @type {number}
+   * @param {Element|Element[]} elms  - An element where an attribute is removed.
+   * @param {string|string[]}      names - Attribute name.
    */
-  interval: 5000,
 
+
+  function removeAttribute(elms, names) {
+    toArray(names).forEach(function (name) {
+      toArray(elms).forEach(function (elm) {
+        return elm && elm.removeAttribute(name);
+      });
+    });
+  }
   /**
-   * Whether to stop autoplay when a slider is hovered.
+   * Return the Rect object of the provided object.
+   *
+   * @param {Element} elm - An element.
    *
-   * @type {boolean}
+   * @return {ClientRect|DOMRect} - A rect object.
    */
-  pauseOnHover: true,
 
+
+  function getRect(elm) {
+    return elm.getBoundingClientRect();
+  }
   /**
-   * Whether to stop autoplay when a slider elements are focused.
-   * True is recommended for accessibility.
+   * Trigger the given callback after all images contained by the element are loaded.
    *
-   * @type {boolean}
+   * @param {Element}  elm      - Element that may contain images.
+   * @param {Function} callback - Callback function fired right after all images are loaded.
    */
-  pauseOnFocus: true,
 
+
+  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();
+    }
+  }
   /**
-   * Whether to reset progress of the autoplay timer when resumed.
+   * Export slider types.
    *
-   * @type {boolean}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  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.
+   * Normal slider.
    *
-   * @type {boolean|string}
+   * @type {string}
    */
-  lazyLoad: false,
 
+
+  var SLIDE = 'slide';
   /**
-   * This option works only when a lazyLoad option is "nearby".
-   * Determine how many pages(not slides) around an active slide should be loaded beforehand.
+   * Loop after the last slide and before the first one.
    *
-   * @type {number}
+   * @type {string}
    */
-  preloadPages: 1,
 
+  var LOOP = 'loop';
   /**
-   * Easing for CSS transition. For example, linear, ease or cubic-bezier().
+   * The track doesn't move.
    *
    * @type {string}
    */
-  easing: 'cubic-bezier(.42,.65,.27,.99)',
 
+  var FADE = 'fade';
   /**
-   * 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.
+   * The component for general slide effect transition.
    *
-   * @type {boolean|string}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  keyboard: 'global',
 
   /**
-   * Whether to allow mouse drag and touch swipe.
+   * The component for general slide effect transition.
    *
-   * @type {boolean}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The component object.
    */
-  drag: true,
 
+  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 angle threshold for drag.
-   * The slider starts moving only when the drag angle is less than this threshold.
+   * The component for fade transition.
    *
-   * @type {number}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  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".
+   * The component for fade transition.
    *
-   * @type {number}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The component object.
    */
-  swipeDistanceThreshold: 150,
 
+
+  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;
+  };
   /**
-   * Velocity threshold for determining if the action is "flick" or "swipe".
-   * Around 0.5 is recommended.
+   * Provide a function for composing components.
    *
-   * @type {number}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  flickVelocityThreshold: .6,
 
   /**
-   * Determine power of flick. The larger number this is, the farther a slider runs by flick.
-   * Around 500 is recommended.
+   * Compose components.
    *
-   * @type {number}
+   * @param {Splide}   Splide     - Splide instance.
+   * @param {Object}   Components - Additional components.
+   * @param {function} Transition - Change component for transition.
+   *
+   * @return {Object} - An object containing all components.
    */
-  flickPower: 600,
 
+
+  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;
+  }
   /**
-   * Limit a number of pages to move by flick.
+   * Utility functions for outputting logs.
    *
-   * @type {number}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  flickMaxPages: 1,
 
   /**
-   * Slider direction.
-   * - 'ltr': Left to right.
-   * - 'rtl': Right to left.
-   * - 'ttb': Top to bottom.
+   * Prefix of an error massage.
    *
    * @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,
 
+  var MESSAGE_PREFIX = '[SPLIDE]';
   /**
-   * Whether to enable accessibility(aria and screen reader texts) or not.
+   * Display an error message on the browser console.
    *
-   * @type {boolean}
+   * @param {string} message - An error message.
    */
-  accessibility: true,
 
+  function error(message) {
+    console.error(MESSAGE_PREFIX + " " + message);
+  }
   /**
-   * Whether to add tabindex="0" to visible slides or not.
+   * Check existence of the given object and throw an error if it doesn't.
    *
-   * @type {boolean}
-   */
-  slideFocus: true,
-
-  /**
-   * Determine if a slider is navigation for another.
-   * Use "sync" API to synchronize two sliders.
+   * @throws {Error}
    *
-   * @type {boolean}
+   * @param {*}      subject - A subject to be confirmed.
+   * @param {string} message - An error message.
    */
-  isNavigation: false,
 
+
+  function exist(subject, message) {
+    if (!subject) {
+      throw new Error(message);
+    }
+  }
   /**
-   * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
+   * Export class names.
    *
-   * @type {boolean}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  trimSpace: true,
 
   /**
-   * The "is-active" class is added after transition as default.
-   * If true, it will be added before move.
+   * A root class name.
    *
-   * @type {boolean}
+   * @type {string}
    */
-  updateOnMove: false,
 
+
+  var ROOT = 'splide';
   /**
-   * Throttle duration in milliseconds for the resize event.
+   * The definition table of all classes for elements.
+   * They might be modified by options.
    *
-   * @type {number}
+   * @type {Object}
    */
-  throttle: 100,
 
+  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"
+  };
   /**
-   * Whether to destroy a slider or not.
+   * Definitions of status classes.
    *
-   * @type {boolean}
+   * @type {Object}
    */
-  destroy: false,
 
+  var STATUS_CLASSES = {
+    active: 'is-active',
+    visible: 'is-visible',
+    loading: 'is-loading'
+  };
   /**
-   * Options for specific breakpoints.
+   * Export i18n texts as object.
    *
-   * @example
-   * {
-   *   1000: {
-   *     perPage: 3,
-   *     gap: 20
-   *   },
-   *   600: {
-   *     perPage: 1,
-   *     gap: 5,
-   *   }
-   * }
-   *
-   * @type {boolean|Object}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  breakpoints: false,
 
   /**
-   * Collection of class names.
-   *
-   * @see ./classes.js
+   * Texts for i18n.
    *
    * @type {Object}
    */
-  classes: ELEMENT_CLASSES,
 
+  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'
+  };
   /**
-   * Collection of i18n texts.
-   *
-   * @see ./i18n.js
+   * Export default options.
    *
-   * @type {Object}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  i18n: I18N
-};
-;// CONCATENATED MODULE: ./src/js/constants/states.js
-/**
- * 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;
-;// CONCATENATED MODULE: ./src/js/splide.js
-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; }
-
-/**
- * The main class for applying Splide to an element.
- *
- * @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,
 
-/**
- * The main class for applying Splide to an element,
- * providing some APIs to control the behavior.
- */
+    /**
+     * Transition speed on rewind in milliseconds.
+     *
+     * @type {number}
+     */
+    rewindSpeed: 0,
 
-var Splide = /*#__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(root, options, Components) {
-    if (options === void 0) {
-      options = {};
-    }
+    /**
+     * 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,
 
-    if (Components === void 0) {
-      Components = {};
-    }
+    /**
+     * Define slider max width.
+     *
+     * @type {number}
+     */
+    width: 0,
 
-    this.root = root instanceof Element ? root : document.querySelector(root);
-    exist(this.root, 'An invalid element/selector was given.');
-    this.Components = null;
-    this.Event = core_event();
-    this.State = state(CREATED);
-    this.STATES = states_namespaceObject;
-    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.
-   */
+    /**
+     * 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,
 
-  var _proto = Splide.prototype;
+    /**
+     * 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,
 
-  _proto.mount = function mount(Extensions, Transition) {
-    var _this = this;
+    /**
+     * Determine height of slides by ratio to a slider width.
+     * This will be ignored when the fixedHeight is provided.
+     *
+     * @type {number}
+     */
+    heightRatio: 0,
 
-    if (Extensions === void 0) {
-      Extensions = this._e;
-    }
+    /**
+     * If true, slide width will be determined by the element width itself.
+     * - perPage/perMove should be 1.
+     *
+     * @type {boolean}
+     */
+    autoWidth: false,
 
-    if (Transition === void 0) {
-      Transition = this._t;
-    }
+    /**
+     * If true, slide height will be determined by the element width itself.
+     * - perPage/perMove should be 1.
+     *
+     * @type {boolean}
+     */
+    autoHeight: false,
 
-    // Reset the state.
-    this.State.set(CREATED);
-    this._e = Extensions;
-    this._t = Transition;
-    this.Components = compose(this, merge(this._c, Extensions), Transition);
+    /**
+     * Determine how many slides should be displayed per page.
+     *
+     * @type {number}
+     */
+    perPage: 1,
 
-    try {
-      each(this.Components, function (component, key) {
-        var required = component.required;
+    /**
+     * Determine how many slides should be moved when a slider goes to next or perv.
+     *
+     * @type {number}
+     */
+    perMove: 0,
 
-        if (required === undefined || required) {
-          component.mount && component.mount();
-        } else {
-          delete _this.Components[key];
-        }
-      });
-    } catch (e) {
-      error(e.message);
-      return;
-    }
+    /**
+     * 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,
 
-    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.
-   */
-  ;
+    /**
+     * Start index.
+     *
+     * @type {number}
+     */
+    start: 0,
 
-  _proto.sync = function sync(splide) {
-    this.sibling = splide;
-    return this;
-  }
-  /**
-   * 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.
-   */
-  ;
+    /**
+     * 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,
 
-  _proto.on = function on(events, handler, elm, options) {
-    if (elm === void 0) {
-      elm = null;
-    }
+    /**
+     * Gap between slides. CSS format is allowed such as 1em.
+     *
+     * @type {number|string}
+     */
+    gap: 0,
 
-    if (options === void 0) {
-      options = {};
-    }
+    /**
+     * 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,
 
-    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.
-   */
-  ;
+    /**
+     * Whether to append arrows.
+     *
+     * @type {boolean}
+     */
+    arrows: true,
 
-  _proto.off = function off(events, elm) {
-    if (elm === void 0) {
-      elm = null;
-    }
+    /**
+     * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
+     *
+     * @type {string}
+     */
+    arrowPath: '',
 
-    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.
-   */
-  ;
+    /**
+     * Whether to append pagination(indicator dots) or not.
+     *
+     * @type {boolean}
+     */
+    pagination: true,
 
-  _proto.emit = function emit(event) {
-    var _this$Event;
+    /**
+     * Activate autoplay.
+     *
+     * @type {boolean}
+     */
+    autoplay: false,
 
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
+    /**
+     * Autoplay interval in milliseconds.
+     *
+     * @type {number}
+     */
+    interval: 5000,
 
-    (_this$Event = this.Event).emit.apply(_this$Event, [event].concat(args));
+    /**
+     * Whether to stop autoplay when a slider is hovered.
+     *
+     * @type {boolean}
+     */
+    pauseOnHover: true,
 
-    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.
-   */
-  ;
+    /**
+     * Whether to stop autoplay when a slider elements are focused.
+     * True is recommended for accessibility.
+     *
+     * @type {boolean}
+     */
+    pauseOnFocus: true,
 
-  _proto.go = function go(control, wait) {
-    if (wait === void 0) {
-      wait = this.options.waitForTransition;
-    }
+    /**
+     * Whether to reset progress of the autoplay timer when resumed.
+     *
+     * @type {boolean}
+     */
+    resetProgress: true,
 
-    if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
-      this.Components.Controller.go(control, false);
-    }
+    /**
+     * 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,
 
-    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.
-   */
-  ;
+    /**
+     * 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,
 
-  _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.
-   */
-  ;
+    /**
+     * Easing for CSS transition. For example, linear, ease or cubic-bezier().
+     *
+     * @type {string}
+     */
+    easing: 'cubic-bezier(.42,.65,.27,.99)',
 
-  _proto.add = function add(slide, index) {
-    if (index === void 0) {
-      index = -1;
-    }
+    /**
+     * 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',
 
-    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.
-   */
-  ;
+    /**
+     * Whether to allow mouse drag and touch swipe.
+     *
+     * @type {boolean}
+     */
+    drag: true,
 
-  _proto.remove = function remove(index) {
-    this.Components.Elements.remove(index);
-    this.refresh();
-    return this;
-  }
-  /**
-   * Destroy all Slide objects and clones and recreate them again.
-   */
-  ;
+    /**
+     * The angle threshold for drag.
+     * The slider starts moving only when the drag angle is less than this threshold.
+     *
+     * @type {number}
+     */
+    dragAngleThreshold: 30,
 
-  _proto.refresh = function refresh() {
-    this.emit('refresh:before').emit('refresh').emit('resize');
-    return this;
-  }
-  /**
-   * Destroy the Splide.
-   * "Completely" boolean is mainly for breakpoints.
-   *
-   * @param {boolean} completely - Destroy completely.
-   */
-  ;
+    /**
+     * 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,
 
-  _proto.destroy = function destroy(completely) {
-    var _this2 = this;
+    /**
+     * Velocity threshold for determining if the action is "flick" or "swipe".
+     * Around 0.5 is recommended.
+     *
+     * @type {number}
+     */
+    flickVelocityThreshold: .6,
 
-    if (completely === void 0) {
-      completely = true;
-    }
+    /**
+     * Determine power of flick. The larger number this is, the farther a slider runs by flick.
+     * Around 500 is recommended.
+     *
+     * @type {number}
+     */
+    flickPower: 600,
 
-    // Postpone destroy because it should be done after mount.
-    if (this.State.is(CREATED)) {
-      this.on('ready', function () {
-        return _this2.destroy(completely);
-      });
-      return;
-    }
+    /**
+     * Limit a number of pages to move by flick.
+     *
+     * @type {number}
+     */
+    flickMaxPages: 1,
 
-    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.
+    /**
+     * Slider direction.
+     * - 'ltr': Left to right.
+     * - 'rtl': Right to left.
+     * - 'ttb': Top to bottom.
+     *
+     * @type {string}
+     */
+    direction: 'ltr',
 
-    this.Event.destroy();
-    this.State.set(DESTROYED);
-    return this;
-  }
-  /**
-   * Return the current slide index.
-   *
-   * @return {number} - The current slide index.
-   // */
-  ;
+    /**
+     * 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,
 
-  _createClass(Splide, [{
-    key: "index",
-    get: function get() {
-      return this._i;
-    }
     /**
-     * Set the current slide index.
+     * Whether to enable accessibility(aria and screen reader texts) or not.
      *
-     * @param {number|string} index - A new index.
+     * @type {boolean}
      */
-    ,
-    set: function set(index) {
-      this._i = parseInt(index);
-    }
+    accessibility: true,
+
     /**
-     * Return length of slides.
-     * This is an alias of Elements.length.
+     * Whether to add tabindex="0" to visible slides or not.
      *
-     * @return {number} - A number of slides.
+     * @type {boolean}
      */
+    slideFocus: true,
 
-  }, {
-    key: "length",
-    get: function get() {
-      return this.Components.Elements.length;
-    }
     /**
-     * Return options.
+     * Determine if a slider is navigation for another.
+     * Use "sync" API to synchronize two sliders.
      *
-     * @return {Object} - Options object.
+     * @type {boolean}
      */
+    isNavigation: false,
 
-  }, {
-    key: "options",
-    get: function get() {
-      return this._o;
-    }
     /**
-     * Set options with merging the given object to the current one.
+     * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
      *
-     * @param {Object} options - New options.
+     * @type {boolean}
      */
-    ,
-    set: function set(options) {
-      var created = this.State.is(CREATED);
+    trimSpace: true,
 
-      if (!created) {
-        this.emit('update');
-      }
+    /**
+     * The "is-active" class is added after transition as default.
+     * If true, it will be added before move.
+     *
+     * @type {boolean}
+     */
+    updateOnMove: false,
 
-      this._o = merge(this._o, options);
+    /**
+     * Throttle duration in milliseconds for the resize event.
+     *
+     * @type {number}
+     */
+    throttle: 100,
 
-      if (!created) {
-        this.emit('updated', this._o);
-      }
-    }
     /**
-     * Return the class list.
-     * This is an alias of Splide.options.classList.
+     * Whether to destroy a slider or not.
      *
-     * @return {Object} - An object containing all class list.
+     * @type {boolean}
      */
+    destroy: false,
 
-  }, {
-    key: "classes",
-    get: function get() {
-      return this._o.classes;
-    }
     /**
-     * Return the i18n strings.
-     * This is an alias of Splide.options.i18n.
+     * Options for specific breakpoints.
+     *
+     * @example
+     * {
+     *   1000: {
+     *     perPage: 3,
+     *     gap: 20
+     *   },
+     *   600: {
+     *     perPage: 1,
+     *     gap: 5,
+     *   }
+     * }
      *
-     * @return {Object} - An object containing all i18n strings.
+     * @type {boolean|Object}
      */
+    breakpoints: false,
 
-  }, {
-    key: "i18n",
-    get: function get() {
-      return this._o.i18n;
-    }
-  }]);
+    /**
+     * Collection of class names.
+     *
+     * @see ./classes.js
+     *
+     * @type {Object}
+     */
+    classes: ELEMENT_CLASSES,
 
-  return Splide;
-}();
+    /**
+     * 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}
+   */
 
-;// CONCATENATED MODULE: ./src/js/components/options/index.js
-/**
- * The component for initializing options.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+  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}
+   */
 
-/**
- * The component for initializing options.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
+  var MOVING = 4;
+  /**
+   * Splide is moving.
+   *
+   * @type {number}
+   */
 
-/* harmony default export */ var options = (function (Splide) {
+  var DESTROYED = 5;
+  var STATES = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CREATED: CREATED,
+    MOUNTED: MOUNTED,
+    IDLE: IDLE,
+    MOVING: MOVING,
+    DESTROYED: DESTROYED
+  });
   /**
-   * Retrieve options from the data attribute.
-   * Note that IE10 doesn't support dataset property.
+   * The main class for applying Splide to an element.
    *
-   * @type {string}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  var options = getAttribute(Splide.root, 'data-splide');
 
-  if (options) {
-    try {
-      Splide.options = JSON.parse(options);
-    } catch (e) {
-      error(e.message);
-    }
-  }
+  /**
+   * The main class for applying Splide to an element,
+   * providing some APIs to control the behavior.
+   */
 
-  return {
+  var Splide$1 = /*#__PURE__*/function () {
     /**
-     * Called when the component is mounted.
+     * 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.
      */
-    mount: function mount() {
-      if (Splide.State.is(CREATED)) {
-        Splide.index = Splide.options.start;
+    function Splide$1(root, options, Components) {
+      if (options === void 0) {
+        options = {};
       }
-    }
-  };
-});
-;// CONCATENATED MODULE: ./src/js/constants/directions.js
-/**
- * Export layout modes.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
-/**
- * Enumerate slides from left to right.
- *
- * @type {string}
- */
-var LTR = 'ltr';
-/**
- * Enumerate slides from right to left.
- *
- * @type {string}
- */
 
-var RTL = 'rtl';
-/**
- * Enumerate slides in a col.
- *
- * @type {string}
- */
+      if (Components === void 0) {
+        Components = {};
+      }
 
-var TTB = 'ttb';
-;// CONCATENATED MODULE: ./src/js/components/elements/slide.js
-/**
- * The sub component for handling each slide.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+      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;
+      }
 
-/**
- * Events for restoring original styles.
- *
- * @type {string}
- */
+      // Reset the state.
+      this.State.set(CREATED);
+      this._e = Extensions;
+      this._t = Transition;
+      this.Components = compose(this, merge(this._c, Extensions), Transition);
 
-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.
- */
+      try {
+        each(this.Components, function (component, key) {
+          var required = component.required;
 
-/* harmony default export */ var elements_slide = (function (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,
+          if (required === undefined || required) {
+            component.mount && component.mount();
+          } else {
+            delete _this.Components[key];
+          }
+        });
+      } catch (e) {
+        error(e.message);
+        return;
+      }
 
+      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;
+    }
     /**
-     * Slide index.
+     * Set sync target.
      *
-     * @type {number}
+     * @param {Splide} splide - A Splide instance.
+     *
+     * @return {Splide} - This instance.
      */
-    index: index,
+    ;
 
+    _proto.sync = function sync(splide) {
+      this.sibling = splide;
+      return this;
+    }
     /**
-     * Real index for clones.
+     * Register callback fired on the given event(s).
      *
-     * @type {number}
+     * @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.
      */
-    realIndex: realIndex,
+    ;
+
+    _proto.on = function on(events, handler, elm, options) {
+      if (elm === void 0) {
+        elm = null;
+      }
 
+      if (options === void 0) {
+        options = {};
+      }
+
+      this.Event.on(events, handler, elm, options);
+      return this;
+    }
     /**
-     * Container element if available.
+     * Unsubscribe the given event.
      *
-     * @type {Element|undefined}
+     * @param {string}  events - A event name.
+     * @param {Element} elm    - Optional. removeEventListener() will be called when this arg is provided.
+     *
+     * @return {Splide} - This instance.
      */
-    container: child(slide, Splide.classes.container),
+    ;
 
+    _proto.off = function off(events, elm) {
+      if (elm === void 0) {
+        elm = null;
+      }
+
+      this.Event.off(events, elm);
+      return this;
+    }
     /**
-     * Whether this is a cloned slide or not.
+     * Emit an event.
      *
-     * @type {boolean}
+     * @param {string} event - An event name.
+     * @param {*}      args  - Any number of arguments passed to handlers.
      */
-    isClone: realIndex > -1,
+    ;
 
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      var _this = this;
+    _proto.emit = function emit(event) {
+      var _this$Event;
 
-      if (!this.isClone) {
-        slide.id = Splide.root.id + "-slide" + pad(index + 1);
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
       }
 
-      Splide.on(STATUS_UPDATE_EVENTS, function () {
-        return _this.update();
-      }).on(STYLE_RESTORE_EVENTS, restoreStyles).on('click', function () {
-        return Splide.emit('click', _this);
-      }, 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.
+      (_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.
+     */
+    ;
 
-      applyStyle(slide, {
-        display: ''
-      }); // Hold the original styles.
+    _proto.go = function go(control, wait) {
+      if (wait === void 0) {
+        wait = this.options.waitForTransition;
+      }
 
-      this.styles = getAttribute(slide, 'style') || '';
-    },
+      if (this.State.is(IDLE) || this.State.is(MOVING) && !wait) {
+        this.Components.Controller.go(control, false);
+      }
 
+      return this;
+    }
     /**
-     * Destroy.
+     * 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.
      */
-    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');
-    },
+    ;
 
+    _proto.is = function is(type) {
+      return type === this._o.type;
+    }
     /**
-     * Update active and visible status.
+     * Insert a slide.
+     *
+     * @param {Element|string} slide - A slide element to be added.
+     * @param {number}         index - A slide will be added at the position.
      */
-    update: function update() {
-      _update(this.isActive(), false);
+    ;
 
-      _update(this.isVisible(), true);
-    },
+    _proto.add = function add(slide, index) {
+      if (index === void 0) {
+        index = -1;
+      }
 
+      this.Components.Elements.add(slide, index, this.refresh.bind(this));
+      return this;
+    }
     /**
-     * Check whether this slide is active or not.
+     * Remove the slide designated by the index.
      *
-     * @return {boolean} - True if the slide is active or false if not.
+     * @param {number} index - A slide index.
      */
-    isActive: function isActive() {
-      return Splide.index === 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;
+    }
     /**
-     * Check whether this slide is visible in the viewport or not.
+     * Destroy the Splide.
+     * "Completely" boolean is mainly for breakpoints.
      *
-     * @return {boolean} - True if the slide is visible or false if not.
+     * @param {boolean} completely - Destroy completely.
      */
-    isVisible: function isVisible() {
-      var active = this.isActive();
+    ;
 
-      if (Splide.is(FADE) || active) {
-        return active;
-      }
+    _proto.destroy = function destroy(completely) {
+      var _this2 = this;
 
-      var ceil = Math.ceil;
-      var trackRect = getRect(Splide.Components.Elements.track);
-      var slideRect = getRect(slide);
+      if (completely === void 0) {
+        completely = true;
+      }
 
-      if (Splide.options.direction === TTB) {
-        return trackRect.top <= slideRect.top && slideRect.bottom <= ceil(trackRect.bottom);
+      // Postpone destroy because it should be done after mount.
+      if (this.State.is(CREATED)) {
+        this.on('ready', function () {
+          return _this2.destroy(completely);
+        });
+        return;
       }
 
-      return trackRect.left <= slideRect.left && slideRect.right <= ceil(trackRect.right);
-    },
+      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;
+    }
     /**
-     * Calculate how far this slide is from another slide and
-     * return true if the distance is within the given number.
+     * Return the current slide index.
      *
-     * @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 {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.
+       */
 
-      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];
+    }, {
+      key: "length",
+      get: function get() {
+        return this.Components.Elements.length;
+      }
+      /**
+       * Return options.
+       *
+       * @return {Object} - Options object.
+       */
 
-    if (active) {
-      addClass(slide, className);
-      Splide.emit("" + type, Slide);
-    } else {
-      if (hasClass(slide, className)) {
-        removeClass(slide, className);
-        Splide.emit("" + (forVisibility ? 'hidden' : 'inactive'), Slide);
+    }, {
+      key: "options",
+      get: function get() {
+        return this._o;
       }
-    }
-  }
-  /**
-   * Restore the original styles.
-   */
+      /**
+       * 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 restoreStyles() {
-    setAttribute(slide, 'style', Slide.styles);
-  }
+        this._o = merge(this._o, options);
 
-  return Slide;
-});
-;// CONCATENATED MODULE: ./src/js/components/elements/index.js
-/**
- * The component for main elements.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+        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;
+      }
+    }]);
 
+    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.
+   */
 
-/**
- * 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 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);
+      }
+    }
 
-/* harmony default export */ var components_elements = (function (Splide, Components) {
+    return {
+      /**
+       * Called when the component is mounted.
+       */
+      mount: function mount() {
+        if (Splide.State.is(CREATED)) {
+          Splide.index = Splide.options.start;
+        }
+      }
+    };
+  };
   /**
-   * Hold the root element.
+   * Export layout modes.
    *
-   * @type {Element}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  var root = Splide.root;
+
   /**
-   * Hold the class list.
+   * Enumerate slides from right to left.
    *
-   * @type {Object}
+   * @type {string}
    */
 
-  var classes = Splide.classes;
+
+  var RTL = 'rtl';
   /**
-   * Store Slide objects.
+   * Enumerate slides in a col.
    *
-   * @type {Array}
+   * @type {string}
    */
 
-  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.
+  var TTB = 'ttb';
+  /**
+   * The sub component for handling each slide.
+   *
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  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.
+   * Events for restoring original styles.
    *
-   * @type {Object}
+   * @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 Elements = {
+  var Slide = function Slide(Splide, index, realIndex, slide) {
     /**
-     * Called when the component is mounted.
-     * Collect main elements and store them as member properties.
+     * Whether to update "is-active" class before or after transition.
+     *
+     * @type {boolean}
      */
-    mount: function mount() {
-      var _this = this;
-
-      this.init();
-      Splide.on('refresh', function () {
-        _this.destroy();
-
-        _this.init();
-      }).on('updated', function () {
-        removeClass(root, getClasses());
-        addClass(root, getClasses());
-      });
-    },
-
+    var updateOnMove = Splide.options.updateOnMove;
     /**
-     * Destroy.
+     * Events when the slide status is updated.
+     * Append a namespace to remove listeners later.
+     *
+     * @type {string}
      */
-    destroy: function destroy() {
-      Slides.forEach(function (Slide) {
-        Slide.destroy();
-      });
-      Slides = [];
-      removeClass(root, getClasses());
-    },
 
+    var STATUS_UPDATE_EVENTS = 'ready.slide updated.slide resized.slide moved.slide' + (updateOnMove ? ' move.slide' : '');
     /**
-     * Initialization.
+     * Slide sub component object.
+     *
+     * @type {Object}
      */
-    init: function init() {
-      var _this2 = this;
 
-      collect();
-      addClass(root, getClasses());
-      this.slides.forEach(function (slide, index) {
-        _this2.register(slide, index, -1);
-      });
-    },
+    var Slide = {
+      /**
+       * Slide element.
+       *
+       * @type {Element}
+       */
+      slide: slide,
 
-    /**
-     * 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 = elements_slide(Splide, index, realIndex, slide);
-      SlideObject.mount();
-      Slides.push(SlideObject);
-    },
+      /**
+       * Slide index.
+       *
+       * @type {number}
+       */
+      index: index,
 
-    /**
-     * 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];
-    },
+      /**
+       * Real index for clones.
+       *
+       * @type {number}
+       */
+      realIndex: realIndex,
 
-    /**
-     * 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;
-      });
-    },
+      /**
+       * Container element if available.
+       *
+       * @type {Element|undefined}
+       */
+      container: child(slide, Splide.classes.container),
 
-    /**
-     * 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 (_ref) {
-        var index = _ref.index;
-        return idx <= index && index < idx + max;
-      });
-    },
+      /**
+       * Whether this is a cloned slide or not.
+       *
+       * @type {boolean}
+       */
+      isClone: realIndex > -1,
 
-    /**
-     * 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);
-      }
+      /**
+       * 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.
 
-      if (slide instanceof Element) {
-        var ref = this.slides[index]; // This will be removed in mount() of a Slide component.
 
         applyStyle(slide, {
-          display: 'none'
-        });
+          display: ''
+        }); // Hold the original styles.
 
-        if (ref) {
-          before(slide, ref);
-          this.slides.splice(index, 0, slide);
-        } else {
-          append(this.list, slide);
-          this.slides.push(slide);
-        }
+        this.styles = getAttribute(slide, 'style') || '';
+      },
 
-        loaded(slide, function () {
-          callback && callback(slide);
-        });
-      }
-    },
+      /**
+       * 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');
+      },
 
-    /**
-     * Remove a slide from a slider.
-     * Need to refresh Splide after removing a slide.
-     *
-     * @param index - Slide index.
-     */
-    remove: function remove(index) {
-      dom_remove(this.slides.splice(index, 1)[0]);
-    },
+      /**
+       * Update active and visible status.
+       */
+      update: function update() {
+        _update(this.isActive(), false);
 
-    /**
-     * 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);
-    },
+        _update(this.isVisible(), true);
+      },
 
-    /**
-     * Return slides length without clones.
-     *
-     * @return {number} - Slide length.
-     */
-    get length() {
-      return this.slides.length;
-    },
+      /**
+       * 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;
+      },
 
-    /**
-     * Return "SlideObjects" length including clones.
-     *
-     * @return {number} - Slide length including clones.
-     */
-    get total() {
-      return Slides.length;
-    }
+      /**
+       * 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();
 
-  };
-  /**
-   * Collect elements.
-   */
+        if (Splide.is(FADE) || active) {
+          return active;
+        }
 
-  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.
-   */
+        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);
+        }
 
-  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.
-   */
+        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);
 
-  function findParts(className) {
-    return child(root, className) || child(Elements.slider, className);
-  }
+        if (!Splide.is(SLIDE) && !this.isClone) {
+          diff = Math.min(diff, Splide.length - diff);
+        }
 
-  return Elements;
-});
-;// CONCATENATED MODULE: ./src/js/components/controller/index.js
-/**
- * The component for controlling the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+        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.
+     */
 
 
-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.
- */
+    function restoreStyles() {
+      setAttribute(slide, 'style', Slide.styles);
+    }
 
-/* harmony default export */ var controller = (function (Splide, Components) {
+    return Slide;
+  };
   /**
-   * Store current options.
+   * The component for main elements.
    *
-   * @type {Object}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
-  var options;
+
   /**
-   * True if the slide is LOOP mode.
+   * The property name for UID stored in a window object.
    *
-   * @type {boolean}
+   * @type {string}
    */
 
-  var isLoop;
+
+  var UID_NAME = 'uid';
   /**
-   * Controller component object.
+   * The component for main elements.
    *
-   * @type {Object}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The component object.
    */
 
-  var Controller = {
+  var Elements = function Elements(Splide, Components) {
     /**
-     * Called when the component is mounted.
+     * Hold the root element.
+     *
+     * @type {Element}
      */
-    mount: function mount() {
-      options = Splide.options;
-      isLoop = Splide.is(LOOP);
-      bind();
-    },
-
+    var root = Splide.root;
     /**
-     * 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.
+     * Hold the class list.
      *
-     * @param {string|number} control  - A control pattern.
-     * @param {boolean}       silently - Go to the destination without event emission.
+     * @type {Object}
      */
-    go: function go(control, silently) {
-      var destIndex = this.trim(this.parse(control));
-      Components.Track.go(destIndex, this.rewind(destIndex), silently);
-    },
 
+    var classes = Splide.classes;
     /**
-     * Parse the given control and return the destination index for the track.
-     *
-     * @param {string} control - A control target pattern.
+     * Store Slide objects.
      *
-     * @return {number} - A parsed target.
+     * @type {Array}
      */
-    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;
-    },
+    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);
+    }
     /**
-     * Compute index from the given page number.
-     *
-     * @param {number} page - Page number.
+     * Elements component object.
      *
-     * @return {number} - A computed page number.
+     * @type {Object}
      */
-    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;
-      }
+    var Elements = {
+      /**
+       * Called when the component is mounted.
+       * Collect main elements and store them as member properties.
+       */
+      mount: function mount() {
+        var _this4 = this;
 
-      return index;
-    },
+        this.init();
+        Splide.on('refresh', function () {
+          _this4.destroy();
 
-    /**
-     * 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;
-      }
+          _this4.init();
+        }).on('updated', function () {
+          removeClass(root, getClasses());
+          addClass(root, getClasses());
+        });
+      },
 
-      var length = Splide.length;
-      var perPage = options.perPage; // Make the last "perPage" number of slides belong to the last page.
+      /**
+       * Destroy.
+       */
+      destroy: function destroy() {
+        Slides.forEach(function (Slide) {
+          Slide.destroy();
+        });
+        Slides = [];
+        removeClass(root, getClasses());
+      },
 
-      if (length - perPage <= index && index < length) {
-        return floor((length - 1) / perPage);
-      }
+      /**
+       * Initialization.
+       */
+      init: function init() {
+        var _this5 = this;
 
-      return floor(index / perPage);
-    },
+        collect();
+        addClass(root, getClasses());
+        this.slides.forEach(function (slide, index) {
+          _this5.register(slide, index, -1);
+        });
+      },
 
-    /**
-     * 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);
-      }
+      /**
+       * 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 index;
-    },
+      /**
+       * 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];
+      },
 
-    /**
-     * 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 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;
+        });
+      },
 
-      if (isLoop) {
-        while (index > edge) {
-          index -= edge + 1;
-        }
+      /**
+       * 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;
+        });
+      },
 
-        while (index < 0) {
-          index += edge + 1;
-        }
-      } else {
-        if (index > edge) {
-          index = 0;
-        } else if (index < 0) {
-          index = edge;
+      /**
+       * 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);
         }
-      }
 
-      return index;
-    },
+        if (slide instanceof Element) {
+          var ref = this.slides[index]; // This will be removed in mount() of a Slide component.
 
-    /**
-     * Check if the direction is "rtl" or not.
-     *
-     * @return {boolean} - True if "rtl" or false if not.
-     */
-    isRtl: function isRtl() {
-      return options.direction === RTL;
-    },
+          applyStyle(slide, {
+            display: 'none'
+          });
 
-    /**
-     * Return the page length.
-     *
-     * @return {number} - Max page number.
-     */
-    get pageLength() {
-      var length = Splide.length;
-      return hasFocus() ? length : Math.ceil(length / options.perPage);
-    },
+          if (ref) {
+            before(slide, ref);
+            this.slides.splice(index, 0, slide);
+          } else {
+            append(this.list, slide);
+            this.slides.push(slide);
+          }
 
-    /**
-     * Return the edge index.
-     *
-     * @return {number} - Edge index.
-     */
-    get edgeIndex() {
-      var length = Splide.length;
+          loaded(slide, function () {
+            callback && callback(slide);
+          });
+        }
+      },
 
-      if (!length) {
-        return 0;
-      }
+      /**
+       * 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]);
+      },
 
-      if (hasFocus() || options.isNavigation || isLoop) {
-        return length - 1;
-      }
+      /**
+       * 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 length - options.perPage;
-    },
+      /**
+       * 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;
+      }
 
+    };
     /**
-     * Return the index of the previous slide.
-     *
-     * @return {number} - The index of the previous slide if available. -1 otherwise.
+     * Collect elements.
      */
-    get prevIndex() {
-      var prev = Splide.index - 1;
 
-      if (isLoop || options.rewind) {
-        prev = this.rewind(prev);
-      }
+    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.
+     */
 
-      return prev > -1 ? prev : -1;
-    },
 
+    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];
+    }
     /**
-     * Return the index of the next slide.
+     * Find parts only from children of the root or track.
      *
-     * @return {number} - The index of the next slide if available. -1 otherwise.
+     * @return {Element} - A found element or undefined.
      */
-    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;
+    function findParts(className) {
+      return child(root, className) || child(Elements.slider, className);
     }
 
+    return Elements;
   };
   /**
-   * 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.
+   * The component for controlling the track.
    *
-   * @return {boolean} - True if a slider has the focus option.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
 
-  function hasFocus() {
-    return options.focus !== false;
-  }
+  var floor = Math.floor;
   /**
-   * Return the next or previous page index computed by the page number and current index.
+   * The component for controlling the track.
    *
-   * @param {number}  number - Specify the page number.
-   * @param {number}  index  - Current index.
-   * @param {boolean} prev   - Prev or next.
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
    *
-   * @return {number} - Slide index.
+   * @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}
+     */
 
-  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;
-});
-;// CONCATENATED MODULE: ./src/js/components/track/index.js
-/**
- * The component for moving list in the track.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+    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;
+      },
 
-var abs = 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.
- */
+      /**
+       * 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;
+        }
 
-/* harmony default export */ var track = (function (Splide, Components) {
-  /**
-   * Hold the Layout component.
-   *
-   * @type {Object}
-   */
-  var Layout;
-  /**
-   * Hold the Layout component.
-   *
-   * @type {Object}
-   */
+        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.
 
-  var Elements;
-  /**
-   * Store the list element.
-   *
-   * @type {Element}
-   */
+        if (length - perPage <= index && index < length) {
+          index = length - perPage;
+        }
 
-  var list;
-  /**
-   * Whether the current direction is vertical or not.
-   *
-   * @type {boolean}
-   */
+        return index;
+      },
 
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Whether the slider type is FADE or not.
-   *
-   * @type {boolean}
-   */
+      /**
+       * 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 isFade = Splide.is(FADE);
-  /**
-   * Whether the slider direction is RTL or not.
-   *
-   * @type {boolean}
-   */
+        var length = Splide.length;
+        var perPage = options.perPage; // Make the last "perPage" number of slides belong to the last page.
 
-  var isRTL = Splide.options.direction === RTL;
-  /**
-   * This will be true while transitioning from the last index to the first one.
-   *
-   * @type {boolean}
-   */
+        if (length - perPage <= index && index < length) {
+          return floor((length - 1) / perPage);
+        }
 
-  var isLoopPending = false;
-  /**
-   * Sign for the direction. Only RTL mode uses the positive sign.
-   *
-   * @type {number}
-   */
+        return floor(index / perPage);
+      },
 
-  var sign = isRTL ? 1 : -1;
-  /**
-   * Track component object.
-   *
-   * @type {Object}
-   */
+      /**
+       * 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);
+        }
 
-  var Track = {
-    /**
-     * Make public the sign defined locally.
-     *
-     * @type {number}
-     */
-    sign: sign,
+        return index;
+      },
 
-    /**
-     * Called when the component is mounted.
-     */
-    mount: function mount() {
-      Elements = Components.Elements;
-      Layout = Components.Layout;
-      list = Elements.list;
-    },
+      /**
+       * 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;
 
-    /**
-     * Called after the component is mounted.
-     * The resize event must be registered after the Layout's one is done.
-     */
-    mounted: function mounted() {
-      var _this = this;
+        if (isLoop) {
+          while (index > edge) {
+            index -= edge + 1;
+          }
 
-      if (!isFade) {
-        this.jump(0);
-        Splide.on('mounted resize updated', function () {
-          _this.jump(Splide.index);
-        });
-      }
-    },
+          while (index < 0) {
+            index += edge + 1;
+          }
+        } else {
+          if (index > edge) {
+            index = 0;
+          } else if (index < 0) {
+            index = edge;
+          }
+        }
 
-    /**
-     * 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.
+        return index;
+      },
 
-      if (Splide.State.is(MOVING) && isLoopPending) {
-        return;
-      }
+      /**
+       * Check if the direction is "rtl" or not.
+       *
+       * @return {boolean} - True if "rtl" or false if not.
+       */
+      isRtl: function isRtl() {
+        return options.direction === RTL;
+      },
 
-      isLoopPending = destIndex !== newIndex;
+      /**
+       * Return the page length.
+       *
+       * @return {number} - Max page number.
+       */
+      get pageLength() {
+        var length = Splide.length;
+        return hasFocus() ? length : Math.ceil(length / options.perPage);
+      },
 
-      if (!silently) {
-        Splide.emit('move', newIndex, prevIndex, destIndex);
-      }
+      /**
+       * Return the edge index.
+       *
+       * @return {number} - Edge index.
+       */
+      get edgeIndex() {
+        var length = Splide.length;
 
-      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);
+        if (!length) {
+          return 0;
         }
-      }
-    },
 
-    /**
-     * 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 (hasFocus() || options.isNavigation || isLoop) {
+          return length - 1;
+        }
 
-    /**
-     * 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)"
-      });
-    },
+        return length - options.perPage;
+      },
 
-    /**
-     * 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);
-      }
+      /**
+       * 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;
 
-      applyStyle(list, {
-        transition: ''
-      });
-    },
+        if (isLoop || options.rewind) {
+          prev = this.rewind(prev);
+        }
 
-    /**
-     * Shift the slider if it exceeds borders on the edge.
-     */
-    shift: function shift() {
-      var position = abs(this.position);
-      var left = abs(this.toPosition(0));
-      var right = abs(this.toPosition(Splide.length));
-      var innerSize = right - left;
+        return prev > -1 ? prev : -1;
+      },
 
-      if (position < left) {
-        position += innerSize;
-      } else if (position > right) {
-        position -= innerSize;
-      }
+      /**
+       * 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;
 
-      this.translate(sign * position);
-    },
+        if (isLoop || options.rewind) {
+          next = this.rewind(next);
+        }
 
-    /**
-     * 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;
+        return Splide.index < next && next <= this.edgeIndex || next === 0 ? next : -1;
       }
 
-      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.
+     * Listen to some events.
      */
-    toIndex: function toIndex(position) {
-      var _this2 = this;
 
-      var index = 0;
-      var minDistance = Infinity;
-      Elements.getSlides(true).forEach(function (Slide) {
-        var slideIndex = Slide.index;
-        var distance = abs(_this2.toPosition(slideIndex) - position);
-
-        if (distance < minDistance) {
-          minDistance = distance;
-          index = slideIndex;
-        }
+    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;
-    },
-
+    }
     /**
-     * Return coordinates object by the given position.
-     *
-     * @param {number} position - A position value.
+     * Verify if the focus option is available or not.
      *
-     * @return {Object} - A coordinates object.
+     * @return {boolean} - True if a slider has the focus option.
      */
-    toCoord: function toCoord(position) {
-      return {
-        x: isVertical ? 0 : position,
-        y: isVertical ? position : 0
-      };
-    },
 
+
+    function hasFocus() {
+      return options.focus !== false;
+    }
     /**
-     * Calculate the track position by a slide index.
+     * Return the next or previous page index computed by the page number and current index.
      *
-     * @param {number} index - Slide index.
+     * @param {number}  number - Specify the page number.
+     * @param {number}  index  - Current index.
+     * @param {boolean} prev   - Prev or next.
      *
-     * @return {Object} - Calculated position.
+     * @return {number} - Slide index.
      */
-    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;
+    function parsePage(number, index, prev) {
+      if (number > -1) {
+        return Controller.toIndex(number);
       }
 
-      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.
-   */
+      var perMove = options.perMove;
+      var sign = prev ? -1 : 1;
 
-  function onTransitionEnd(destIndex, newIndex, prevIndex, silently) {
-    applyStyle(list, {
-      transition: ''
-    });
-    isLoopPending = false;
+      if (perMove) {
+        return index + perMove * sign;
+      }
 
-    if (!isFade) {
-      Track.jump(newIndex);
+      return Controller.toIndex(Controller.toPage(index) + sign);
     }
 
-    if (!silently) {
-      Splide.emit('moved', newIndex, prevIndex, destIndex);
-    }
-  }
+    return Controller;
+  };
   /**
-   * Convert index to the trimmed position.
+   * The component for moving list in the track.
    *
-   * @return {number} - Trimmed position.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
 
-  function getTrimmedPosition(index) {
-    return Track.trim(Track.toPosition(index));
-  }
-
-  return Track;
-});
-;// CONCATENATED MODULE: ./src/js/components/clones/index.js
-/**
- * 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.
- */
-
-/* harmony default export */ var clones = (function (Splide, Components) {
-  /**
-   * Store information of all clones.
-   *
-   * @type {Array}
-   */
-  var clones = [];
-  /**
-   * Store the current clone count on one side.
-   *
-   * @type {number}
-   */
-
-  var cloneCount = 0;
+  var abs$1 = Math.abs;
   /**
-   * Keep Elements component.
+   * The component for moving list in the track.
    *
-   * @type {Object}
-   */
-
-  var Elements = Components.Elements;
-  /**
-   * Clones component object.
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
    *
-   * @type {Object}
+   * @return {Object} - The component object.
    */
 
-  var Clones = {
+  var Track = function Track(Splide, Components) {
     /**
-     * Called when the component is mounted.
+     * Hold the Layout component.
+     *
+     * @type {Object}
+     */
+    var Layout;
+    /**
+     * Hold the Layout component.
+     *
+     * @type {Object}
      */
-    mount: function mount() {
-      var _this = this;
-
-      if (Splide.is(LOOP)) {
-        init();
-        Splide.on('refresh:before', function () {
-          _this.destroy();
-        }).on('refresh', init).on('resize', function () {
-          if (cloneCount !== getCloneCount()) {
-            // Destroy before refresh not to collect clones by the Elements component.
-            _this.destroy();
 
-            Splide.refresh();
-          }
-        });
-      }
-    },
+    var Elements;
+    /**
+     * Store the list element.
+     *
+     * @type {Element}
+     */
 
+    var list;
     /**
-     * Destroy.
+     * Whether the current direction is vertical or not.
+     *
+     * @type {boolean}
      */
-    destroy: function destroy() {
-      dom_remove(clones);
-      clones = [];
-    },
 
+    var isVertical = Splide.options.direction === TTB;
     /**
-     * Return all clones.
+     * Whether the slider type is FADE or not.
      *
-     * @return {Element[]} - Cloned elements.
+     * @type {boolean}
      */
-    get clones() {
-      return clones;
-    },
 
+    var isFade = Splide.is(FADE);
     /**
-     * Return clone length.
+     * Whether the slider direction is RTL or not.
      *
-     * @return {number} - A length of clones.
+     * @type {boolean}
      */
-    get length() {
-      return clones.length;
-    }
 
-  };
-  /**
-   * Initialization.
-   */
+    var isRTL = Splide.options.direction === RTL;
+    /**
+     * This will be true while transitioning from the last index to the first one.
+     *
+     * @type {boolean}
+     */
 
-  function init() {
-    Clones.destroy();
-    cloneCount = getCloneCount();
-    generateClones(cloneCount);
-  }
-  /**
-   * Generate and append/prepend clones.
-   *
-   * @param {number} count - The half number of clones.
-   */
+    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}
+     */
 
-  function generateClones(count) {
-    var length = Elements.length,
-        register = Elements.register;
+    var Track = {
+      /**
+       * Make public the sign defined locally.
+       *
+       * @type {number}
+       */
+      sign: sign,
 
-    if (length) {
-      var slides = Elements.slides;
+      /**
+       * Called when the component is mounted.
+       */
+      mount: function mount() {
+        Elements = Components.Elements;
+        Layout = Components.Layout;
+        list = Elements.list;
+      },
 
-      while (slides.length < count) {
-        slides = slides.concat(slides);
-      } // Clones after the last element.
+      /**
+       * 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);
+          });
+        }
+      },
 
-      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.
+      /**
+       * 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.
 
-      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.
-   */
+        if (Splide.State.is(MOVING) && isLoopPending) {
+          return;
+        }
 
+        isLoopPending = destIndex !== newIndex;
 
-  function getCloneCount() {
-    var options = Splide.options;
+        if (!silently) {
+          Splide.emit('move', newIndex, prevIndex, destIndex);
+        }
 
-    if (options.clones) {
-      return options.clones;
-    } // Use the slide length in autoWidth mode because the number cannot be calculated.
+        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));
+      },
 
-    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]);
+      /**
+       * 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)"
+        });
+      },
 
-    if (fixedSize) {
-      // Roughly calculate the count. This needs not to be strict.
-      baseCount = Math.ceil(Elements.track["client" + dimension] / fixedSize);
-    }
+      /**
+       * 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);
+        }
 
-    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).
-   */
+        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;
+        }
 
-  function cloneDeeply(elm) {
-    var clone = elm.cloneNode(true);
-    addClass(clone, Splide.classes.clone); // ID should not be duplicated.
+        this.translate(sign * position);
+      },
 
-    removeAttribute(clone, 'id');
-    return clone;
-  }
+      /**
+       * 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;
+        }
 
-  return Clones;
-});
-;// CONCATENATED MODULE: ./src/js/components/layout/directions/horizontal.js
-/**
- * The resolver component for horizontal layout.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+        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
+        };
+      },
 
-/**
- * The resolver component for horizontal layout.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The resolver object.
- */
+      /**
+       * 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));
+      },
 
-/* harmony default export */ var horizontal = (function (Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Keep the root element.
-   *
-   * @type {Element}
-   */
+      /**
+       * 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);
 
-  var root = Splide.root;
-  /**
-   * Keep the track element.
-   *
-   * @type {Element}
-   */
+        if (focus === 'center') {
+          return -(Layout.size - slideSize) / 2;
+        }
 
-  var track;
-  /**
-   * Keep the latest options.
-   *
-   * @type {Element}
-   */
+        return -(parseInt(focus) || 0) * (slideSize + Layout.gap);
+      },
 
-  var options = Splide.options;
-  return {
-    /**
-     * Margin property name.
-     *
-     * @type {string}
-     */
-    margin: 'margin' + (options.direction === RTL ? 'Left' : 'Right'),
+      /**
+       * 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);
+      }
 
+    };
     /**
-     * Always 0 because the height will be determined by inner contents.
+     * Called whenever slides arrive at a destination.
      *
-     * @type {number}
-     */
-    height: 0,
-
-    /**
-     * Initialization.
+     * @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.
      */
-    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)
+    function onTransitionEnd(destIndex, newIndex, prevIndex, silently) {
+      applyStyle(list, {
+        transition: ''
       });
-    },
+      isLoopPending = false;
 
-    /**
-     * 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;
+      if (!isFade) {
+        Track.jump(newIndex);
       }
 
-      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;
+      if (!silently) {
+        Splide.emit('moved', newIndex, prevIndex, destIndex);
       }
-
-      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.
+     * Convert index to the trimmed position.
      *
-     * @return {number} - Current slider width.
-     */
-    get width() {
-      return track.clientWidth - this.padding.left - this.padding.right;
-    }
-
-  };
-});
-;// CONCATENATED MODULE: ./src/js/components/layout/directions/vertical.js
-/**
- * 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.
- */
-
-/* harmony default export */ var vertical = (function (Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
-  /**
-   * Keep the root element.
-   *
-   * @type {Element}
-   */
+     * @return {number} - Trimmed position.
+     */
+
+
+    function getTrimmedPosition(index) {
+      return Track.trim(Track.toPosition(index));
+    }
 
-  var root = Splide.root;
+    return Track;
+  };
   /**
-   * Keep the track element.
+   * The component for cloning some slides for "loop" mode of the track.
    *
-   * @type {Element}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var track;
   /**
-   * Keep the latest options.
+   * The component for cloning some slides for "loop" mode of the track.
    *
-   * @type {Element}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The component object.
    */
 
-  var options;
-  return {
+
+  var Clones = function Clones(Splide, Components) {
     /**
-     * Margin property name.
+     * Store information of all clones.
      *
-     * @type {string}
+     * @type {Array}
      */
-    margin: 'marginBottom',
-
+    var clones = [];
     /**
-     * Initialization.
+     * Store the current clone count on one side.
+     *
+     * @type {number}
      */
-    init: function init() {
-      this.resize();
-    },
 
+    var cloneCount = 0;
     /**
-     * Resize gap and padding.
-     * This must be called on init.
+     * Keep Elements component.
+     *
+     * @type {Object}
      */
-    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)
-      });
-    },
 
+    var Elements = Components.Elements;
     /**
-     * Return total height from the top of the list to the bottom of the slide specified by the provided index.
+     * Clones component object.
      *
-     * @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.
+     * @type {Object}
      */
-    totalHeight: function totalHeight(index) {
-      if (index === void 0) {
-        index = Splide.length - 1;
-      }
 
-      var Slide = Elements.getSlide(index);
+    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();
+            }
+          });
+        }
+      },
 
-      if (Slide) {
-        return getRect(Slide.slide).bottom - getRect(Elements.list).top + this.gap;
-      }
+      /**
+       * Destroy.
+       */
+      destroy: function destroy() {
+        _remove(clones);
 
-      return 0;
-    },
+        clones = [];
+      },
 
-    /**
-     * Return the slide width in px.
-     *
-     * @return {number} - The slide width.
-     */
-    slideWidth: function slideWidth() {
-      return toPixel(root, options.fixedWidth || this.width);
-    },
+      /**
+       * Return all clones.
+       *
+       * @return {Element[]} - Cloned elements.
+       */
+      get clones() {
+        return clones;
+      },
 
-    /**
-     * Return the slide height in px.
-     *
-     * @param {number} index - Slide index.
-     *
-     * @return {number} - The slide height.
-     */
-    slideHeight: function slideHeight(index) {
-      if (options.autoHeight) {
-        var Slide = Elements.getSlide(index);
-        return Slide ? Slide.slide.offsetHeight : 0;
+      /**
+       * Return clone length.
+       *
+       * @return {number} - A length of clones.
+       */
+      get length() {
+        return clones.length;
       }
 
-      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.
+     * Initialization.
      */
-    get width() {
-      return track.clientWidth;
-    },
 
+    function init() {
+      Clones.destroy();
+      cloneCount = getCloneCount();
+      generateClones(cloneCount);
+    }
     /**
-     * Return slide height without padding.
+     * Generate and append/prepend clones.
      *
-     * @return {number} - Slider height.
+     * @param {number} count - The half number of clones.
      */
-    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;
-    }
 
-  };
-});
-;// CONCATENATED MODULE: ./src/js/utils/time.js
-/**
- * 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 generateClones(count) {
+      var length = Elements.length,
+          register = Elements.register;
 
-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 (length) {
+        var slides = Elements.slides;
 
-      elapse = timestamp - start;
-      rate = elapse / interval;
+        while (slides.length < count) {
+          slides = slides.concat(slides);
+        } // Clones after the last element.
 
-      if (elapse >= interval) {
-        start = 0;
-        rate = 1;
-        callback();
-      }
 
-      if (progress) {
-        progress(rate);
-      }
+        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.
 
-      requestAnimationFrame(step);
+        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.
+     */
 
-  return {
-    pause: function pause() {
-      _pause = true;
-      start = 0;
-    },
-    play: function play(reset) {
-      start = 0;
 
-      if (reset) {
-        rate = 0;
-      }
+    function getCloneCount() {
+      var options = Splide.options;
 
-      if (_pause) {
-        _pause = false;
-        requestAnimationFrame(step);
-      }
-    }
-  };
-}
-;// CONCATENATED MODULE: ./src/js/components/layout/index.js
-/**
- * The component for handing slide layouts and their sizes.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+      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.
 
-/**
- * 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.
- */
+      removeAttribute(clone, 'id');
+      return clone;
+    }
 
-/* harmony default export */ var layout = (function (Splide, Components) {
-  /**
-   * Keep the Elements component.
-   *
-   * @type {string}
-   */
-  var Elements = Components.Elements;
+    return Clones;
+  };
   /**
-   * Whether the slider is vertical or not.
+   * The resolver component for horizontal layout.
    *
-   * @type {boolean}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var isVertical = Splide.options.direction === TTB;
   /**
-   * Layout component object.
+   * The resolver component for horizontal layout.
    *
-   * @type {Object}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The resolver object.
    */
 
-  var Layout = object_assign({
+
+  var Horizontal = function Horizontal(Splide, Components) {
     /**
-     * Called when the component is mounted.
+     * Keep the Elements component.
+     *
+     * @type {string}
      */
-    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;
-    },
-
+    var Elements = Components.Elements;
     /**
-     * Destroy the component.
+     * Keep the root element.
+     *
+     * @type {Element}
      */
-    destroy: function destroy() {
-      removeAttribute([Elements.list, Elements.track], 'style');
-    },
 
+    var root = Splide.root;
     /**
-     * Return the slider height on the vertical mode or width on the horizontal mode.
+     * Keep the track element.
      *
-     * @return {number}
+     * @type {Element}
      */
-    get size() {
-      return isVertical ? this.height : this.width;
-    }
-
-  }, isVertical ? vertical(Splide, Components) : horizontal(Splide, Components));
-  /**
-   * Init slider styles according to options.
-   */
-
-  function init() {
-    Layout.init();
-    applyStyle(Splide.root, {
-      maxWidth: unit(Splide.options.width)
-    });
-    Elements.each(function (Slide) {
-      Slide.slide.style[Layout.margin] = unit(Layout.gap);
-    });
-    resize();
-  }
-  /**
-   * Listen the resize native event with throttle.
-   * Initialize when the component is mounted or options are updated.
-   */
 
+    var track;
+    /**
+     * Keep the latest options.
+     *
+     * @type {Element}
+     */
 
-  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.
-   */
+    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,
 
-  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');
-  }
+      /**
+       * Initialization.
+       */
+      init: function init() {
+        this.resize();
+      },
 
-  return Layout;
-});
-;// CONCATENATED MODULE: ./src/js/components/drag/index.js
-/**
- * The component for supporting mouse drag and swipe.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+      /**
+       * 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;
+          }
 
-var drag_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.
- */
+          width += this.gap;
+        }
 
-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}
- */
+        return width;
+      },
 
-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.
- */
+      /**
+       * 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);
 
-/* harmony default export */ var drag = (function (Splide, Components) {
-  /**
-   * Store the Move component.
-   *
-   * @type {Object}
-   */
-  var Track = Components.Track;
-  /**
-   * Store the Controller component.
-   *
-   * @type {Object}
-   */
+          return _Slide ? _Slide.slide.offsetWidth : 0;
+        }
 
-  var Controller = Components.Controller;
-  /**
-   * Coordinate of the track on starting drag.
-   *
-   * @type {Object}
-   */
+        var width = options.fixedWidth || (this.width + this.gap) / options.perPage - this.gap;
+        return toPixel(root, width);
+      },
 
-  var startCoord;
-  /**
-   * Analyzed info on starting drag.
-   *
-   * @type {Object|null}
-   */
+      /**
+       * 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);
+      },
 
-  var startInfo;
-  /**
-   * Analyzed info being updated while dragging/swiping.
-   *
-   * @type {Object}
-   */
+      /**
+       * Return slider width without padding.
+       *
+       * @return {number} - Current slider width.
+       */
+      get width() {
+        return track.clientWidth - this.padding.left - this.padding.right;
+      }
 
-  var currentInfo;
+    };
+  };
   /**
-   * Determine whether slides are being dragged or not.
+   * The resolver component for vertical layout.
    *
-   * @type {boolean}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var isDragging;
   /**
-   * Whether the slider direction is vertical or not.
+   * The resolver component for vertical layout.
    *
-   * @type {boolean}
-   */
-
-  var isVertical = Splide.options.direction === TTB;
-  /**
-   * Axis for the direction.
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
    *
-   * @type {string}
+   * @return {Object} - The resolver object.
    */
 
-  var axis = isVertical ? 'y' : 'x';
-  /**
-   * Drag component object.
-   *
-   * @type {Object}
-   */
 
-  var Drag = {
+  var Vertical = function Vertical(Splide, Components) {
     /**
-     * Whether dragging is disabled or not.
+     * Keep the Elements component.
      *
-     * @type {boolean}
+     * @type {string}
      */
-    disabled: false,
-
+    var Elements = Components.Elements;
     /**
-     * Called when the component is mounted.
+     * Keep the root element.
+     *
+     * @type {Element}
      */
-    mount: function mount() {
-      var _this = 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 () {
-        _this.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);
-    }
-  }
-  /**
-   * Initialize parameters.
-   *
-   * @param {TouchEvent|MouseEvent} e - TouchEvent or MouseEvent object.
-   */
+    var root = Splide.root;
+    /**
+     * Keep the track element.
+     *
+     * @type {Element}
+     */
 
+    var track;
+    /**
+     * Keep the latest options.
+     *
+     * @type {Element}
+     */
 
-  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.
-   */
+    var options;
+    return {
+      /**
+       * Margin property name.
+       *
+       * @type {string}
+       */
+      margin: 'marginBottom',
 
+      /**
+       * Initialization.
+       */
+      init: function init() {
+        this.resize();
+      },
 
-  function move(e) {
-    if (startInfo) {
-      currentInfo = analyze(e, startInfo);
+      /**
+       * 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)
+        });
+      },
 
-      if (isDragging) {
-        if (e.cancelable) {
-          e.preventDefault();
+      /**
+       * 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;
         }
 
-        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.
+        var Slide = Elements.getSlide(index);
 
-          init(e);
+        if (Slide) {
+          return getRect(Slide.slide).bottom - getRect(Elements.list).top + this.gap;
         }
-      }
-    }
-  }
-  /**
-   * 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(_ref) {
-    var offset = _ref.offset;
 
-    if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
-      return false;
-    }
-
-    var angle = Math.atan(drag_abs(offset.y) / drag_abs(offset.x)) * 180 / Math.PI;
-
-    if (isVertical) {
-      angle = 90 - angle;
-    }
-
-    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.
-   */
+        return 0;
+      },
 
+      /**
+       * Return the slide width in px.
+       *
+       * @return {number} - The slide width.
+       */
+      slideWidth: function slideWidth() {
+        return toPixel(root, options.fixedWidth || this.width);
+      },
 
-  function resist(position) {
-    if (Splide.is(SLIDE)) {
-      var sign = Track.sign;
+      /**
+       * 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);
 
-      var _start = sign * Track.trim(Track.toPosition(0));
+          return _Slide2 ? _Slide2.slide.offsetHeight : 0;
+        }
 
-      var _end = sign * Track.trim(Track.toPosition(Controller.edgeIndex));
+        var height = options.fixedHeight || (this.height + this.gap) / options.perPage - this.gap;
+        return toPixel(root, height);
+      },
 
-      position *= sign;
+      /**
+       * Return slider width without padding.
+       *
+       * @return {number} - Current slider width.
+       */
+      get width() {
+        return track.clientWidth;
+      },
 
-      if (position < _start) {
-        position = _start - FRICTION_REDUCER * Math.log(_start - position);
-      } else if (position > _end) {
-        position = _end + FRICTION_REDUCER * Math.log(position - _end);
+      /**
+       * 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;
       }
 
-      position *= sign;
-    }
+    };
+  };
+  /**
+   * A package of utility functions related with time.
+   *
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
+   */
 
-    return position;
-  }
   /**
-   * Called when dragging ends.
+   * 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 end() {
-    startInfo = null;
+  function throttle(func, wait) {
+    var timeout; // Declare function by the "function" keyword to prevent "this" from being inherited.
 
-    if (isDragging) {
-      Splide.emit('dragged', currentInfo);
-      go(currentInfo);
-      isDragging = false;
-    }
+    return function () {
+      if (!timeout) {
+        timeout = setTimeout(function () {
+          func();
+          timeout = null;
+        }, wait);
+      }
+    };
   }
   /**
-   * Go to the slide determined by the analyzed data.
+   * Custom setInterval function that provides progress rate as callback.
    *
-   * @param {Object} info - An info object.
+   * @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 go(info) {
-    var velocity = info.velocity[axis];
-    var absV = drag_abs(velocity);
+  function createInterval(callback, interval, progress) {
+    var _window = window,
+        requestAnimationFrame = _window.requestAnimationFrame;
+    var start,
+        elapse,
+        rate,
+        _pause = true;
 
-    if (absV > 0) {
-      var options = Splide.options;
-      var index = Splide.index;
-      var sign = velocity < 0 ? -1 : 1;
-      var destIndex = index;
+    var step = function step(timestamp) {
+      if (!_pause) {
+        if (!start) {
+          start = timestamp;
+
+          if (rate && rate < 1) {
+            start -= rate * interval;
+          }
+        }
 
-      if (!Splide.is(FADE)) {
-        var destination = Track.position;
+        elapse = timestamp - start;
+        rate = elapse / interval;
+
+        if (elapse >= interval) {
+          start = 0;
+          rate = 1;
+          callback();
+        }
 
-        if (absV > options.flickVelocityThreshold && drag_abs(info.offset[axis]) < options.swipeDistanceThreshold) {
-          destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
+        if (progress) {
+          progress(rate);
         }
 
-        destIndex = Track.toIndex(destination);
+        requestAnimationFrame(step);
       }
-      /*
-       * 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.
-       */
+    };
 
+    return {
+      pause: function pause() {
+        _pause = true;
+        start = 0;
+      },
+      play: function play(reset) {
+        start = 0;
 
-      if (destIndex === index && absV > MIN_VELOCITY) {
-        destIndex = index + sign * Track.sign;
-      }
+        if (reset) {
+          rate = 0;
+        }
 
-      if (Splide.is(SLIDE)) {
-        destIndex = between(destIndex, 0, Controller.edgeIndex);
+        if (_pause) {
+          _pause = false;
+          requestAnimationFrame(step);
+        }
       }
-
-      Controller.go(destIndex, options.isNavigation);
-    }
+    };
   }
   /**
-   * Analyze the given event object and return important information for handling swipe behavior.
+   * 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 {Event}   e          - Touch or Mouse event object.
-   * @param {Object}  startInfo  - Information analyzed on start for calculating difference from the current one.
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
    *
-   * @return {Object} - An object containing analyzed information, such as offset, velocity, etc.
+   * @return {Object} - The component object.
    */
 
 
-  function analyze(e, startInfo) {
-    var timeStamp = e.timeStamp,
-        touches = e.touches;
+  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 _ref2 = touches ? touches[0] : e,
-        clientX = _ref2.clientX,
-        clientY = _ref2.clientY;
+    var isVertical = Splide.options.direction === TTB;
+    /**
+     * Layout component object.
+     *
+     * @type {Object}
+     */
 
-    var _ref3 = startInfo.to || {},
-        _ref3$x = _ref3.x,
-        fromX = _ref3$x === void 0 ? clientX : _ref3$x,
-        _ref3$y = _ref3.y,
-        fromY = _ref3$y === void 0 ? clientY : _ref3$y;
+    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.
 
-    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
+        this.totalSize = isVertical ? this.totalHeight : this.totalWidth;
+        this.slideSize = isVertical ? this.slideHeight : this.slideWidth;
       },
-      offset: offset,
-      time: timeStamp,
-      velocity: velocity
-    };
-  }
 
-  return Drag;
-});
-;// CONCATENATED MODULE: ./src/js/components/click/index.js
-/**
- * The component for handling a click event.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+      /**
+       * Destroy the component.
+       */
+      destroy: function destroy() {
+        removeAttribute([Elements.list, Elements.track], 'style');
+      },
 
-/**
- * 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.
- */
-/* harmony default export */ var click = (function (Splide, Components) {
-  /**
-   * Whether click is disabled or not.
-   *
-   * @type {boolean}
-   */
-  var disabled = false;
-  /**
-   * Click component object.
-   *
-   * @type {Object}
-   */
+      /**
+       * Return the slider height on the vertical mode or width on the horizontal mode.
+       *
+       * @return {number}
+       */
+      get size() {
+        return isVertical ? this.height : this.width;
+      }
 
-  var Click = {
+    }, isVertical ? Vertical(Splide, Components) : Horizontal(Splide, Components));
     /**
-     * Mount only when the drag is activated and the slide type is not "fade".
-     *
-     * @type {boolean}
+     * Init slider styles according to options.
+     */
+
+    function init() {
+      Layout.init();
+      applyStyle(Splide.root, {
+        maxWidth: unit(Splide.options.width)
+      });
+      Elements.each(function (Slide) {
+        Slide.slide.style[Layout.margin] = unit(Layout.gap);
+      });
+      resize();
+    }
+    /**
+     * Listen the resize native event with throttle.
+     * Initialize when the component is mounted or options are updated.
      */
-    required: Splide.options.drag,
 
+
+    function bind() {
+      Splide.on('resize load', throttle(function () {
+        Splide.emit('resize');
+      }, Splide.options.throttle), window).on('resize', resize).on('updated refresh', init);
+    }
     /**
-     * Called when the component is mounted.
+     * Resize the track and slide elements.
      */
-    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 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;
   };
   /**
-   * Called when a track element is clicked.
+   * The component for supporting mouse drag and swipe.
    *
-   * @param {Event} e - A click event.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  function onClick(e) {
-    if (disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-    }
-  }
-
-  return Click;
-});
-;// CONCATENATED MODULE: ./src/js/components/autoplay/index.js
-/**
- * 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.
- */
 
-/* harmony default export */ var autoplay = (function (Splide, Components, name) {
-  /**
-   * Store pause flags.
-   *
-   * @type {Array}
-   */
-  var flags = [];
+  var abs = Math.abs;
   /**
-   * Store an interval object.
-   *
-   * @type {Object};
+   * 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 interval;
+  var MIN_VELOCITY = 0.1;
   /**
-   * Keep the Elements component.
+   * 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 {string}
+   * @type {number}
    */
 
-  var Elements = Components.Elements;
+  var FRICTION_REDUCER = 7;
   /**
-   * Autoplay component object.
+   * The component supporting mouse drag and swipe.
    *
-   * @type {Object}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The component object.
    */
 
-  var Autoplay = {
+  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;
     /**
-     * Required only when the autoplay option is true.
+     * Determine whether slides are being dragged or not.
      *
      * @type {boolean}
      */
-    required: Splide.options.autoplay,
 
+    var isDragging;
     /**
-     * Called when the component is mounted.
-     * Note that autoplay starts only if there are slides over perPage number.
+     * 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}
      */
-    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);
+    var Drag = {
+      /**
+       * Whether dragging is disabled or not.
+       *
+       * @type {boolean}
+       */
+      disabled: false,
 
-          if (Elements.bar) {
-            applyStyle(Elements.bar, {
-              width: rate * 100 + "%"
+      /**
+       * 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;
         });
-        bind();
-        this.play();
       }
-    },
+    };
+    /**
+     * 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);
+      }
+    }
+    /**
+     * 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);
+          }
+        }
+      }
+    }
     /**
-     * Start autoplay.
+     * Determine whether to start moving the track or not by drag angle.
+     *
+     * @param {Object} info - An information object.
      *
-     * @param {number} flag - A pause flag to be removed.
+     * @return {boolean} - True if the track should be moved or false if not.
      */
-    play: function play(flag) {
-      if (flag === void 0) {
-        flag = 0;
+
+
+    function shouldMove(_ref3) {
+      var offset = _ref3.offset;
+
+      if (Splide.State.is(MOVING) && Splide.options.waitForTransition) {
+        return false;
       }
 
-      flags = flags.filter(function (f) {
-        return f !== flag;
-      });
+      var angle = Math.atan(abs(offset.y) / abs(offset.x)) * 180 / Math.PI;
 
-      if (!flags.length) {
-        Splide.emit(name + ":play");
-        interval.play(Splide.options.resetProgress);
+      if (isVertical) {
+        angle = 90 - angle;
       }
-    },
 
+      return angle < Splide.options.dragAngleThreshold;
+    }
     /**
-     * Pause autoplay.
-     * Note that Array.includes is not supported by IE.
+     * Resist dragging the track on the first/last page because there is no more.
+     *
+     * @param {number} position - A position being applied to the track.
      *
-     * @param {number} flag - A pause flag to be added.
+     * @return {Object} - Adjusted position.
      */
-    pause: function pause(flag) {
-      if (flag === void 0) {
-        flag = 0;
+
+
+    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;
       }
 
-      interval.pause();
+      return position;
+    }
+    /**
+     * Called when dragging ends.
+     */
+
+
+    function end() {
+      startInfo = null;
 
-      if (flags.indexOf(flag) === -1) {
-        flags.push(flag);
+      if (isDragging) {
+        Splide.emit('dragged', currentInfo);
+        go(currentInfo);
+        isDragging = false;
       }
+    }
+    /**
+     * 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 (flags.length === 1) {
-        Splide.emit(name + ":pause");
+        if (!Splide.is(FADE)) {
+          var destination = Track.position;
+
+          if (absV > options.flickVelocityThreshold && abs(info.offset[axis]) < options.swipeDistanceThreshold) {
+            destination += sign * Math.min(absV * options.flickPower, Components.Layout.size * (options.flickMaxPages || 1));
+          }
+
+          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;
+        }
+
+        if (Splide.is(SLIDE)) {
+          destIndex = between(destIndex, 0, Controller.edgeIndex);
+        }
+
+        Controller.go(destIndex, options.isNavigation);
       }
     }
+    /**
+     * 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;
   };
   /**
-   * Listen some events.
+   * The component for handling a click event.
+   *
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  function bind() {
-    var options = Splide.options;
-    var sibling = Splide.sibling;
-    var elms = [Splide.root, sibling ? sibling.root : null];
+  /**
+   * 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.
+   */
 
-    if (options.pauseOnHover) {
-      switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
-      switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
-    }
 
-    if (options.pauseOnFocus) {
-      switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
-      switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
-    }
+  var Click = function Click(Splide, Components) {
+    /**
+     * Whether click is disabled or not.
+     *
+     * @type {boolean}
+     */
+    var disabled = false;
+    /**
+     * Click component object.
+     *
+     * @type {Object}
+     */
 
-    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);
-    }
+    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.
+     */
 
-    if (Elements.pause) {
-      switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, false);
+    function onClick(e) {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+      }
     }
 
-    Splide.on('move refresh', function () {
-      Autoplay.play();
-    }) // Rewind the timer.
-    .on('destroy', function () {
-      Autoplay.pause();
-    });
-  }
+    return Click;
+  };
   /**
-   * Play or pause on the given event.
+   * The component for playing slides automatically.
    *
-   * @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.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
+  /**
+   * Set of pause flags.
+   */
 
-  function switchOn(elms, event, flag, play) {
-    elms.forEach(function (elm) {
-      Splide.on(event, function () {
-        Autoplay[play ? 'play' : 'pause'](flag);
-      }, elm);
-    });
-  }
-
-  return Autoplay;
-});
-;// CONCATENATED MODULE: ./src/js/components/cover/index.js
-/**
- * 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.
- */
 
-/* harmony default export */ var cover = (function (Splide, Components) {
+  var PAUSE_FLAGS = {
+    HOVER: 1,
+    FOCUS: 2,
+    MANUAL: 3
+  };
   /**
-   * Hold options.
+   * The component for playing slides automatically.
    *
-   * @type {Object}
-   */
-  var options = Splide.options;
-  /**
-   * Cover component object.
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   * @param {string} name       - A component name as a lowercase string.
    *
-   * @type {Object}
+   * @return {Object} - The component object.
    */
 
-  var Cover = {
+  var Autoplay = function Autoplay(Splide, Components, name) {
     /**
-     * Required only when "cover" option is true.
+     * Store pause flags.
      *
-     * @type {boolean}
+     * @type {Array}
+     */
+    var flags = [];
+    /**
+     * Store an interval object.
+     *
+     * @type {Object};
      */
-    required: options.cover,
 
+    var interval;
     /**
-     * Called when the component is mounted.
+     * Keep the Elements component.
+     *
+     * @type {string}
      */
-    mount: function mount() {
-      Splide.on('lazyload:loaded', function (img) {
-        cover(img, false);
-      });
-      Splide.on('mounted updated refresh', function () {
-        return apply(false);
-      });
-    },
 
+    var Elements = Components.Elements;
     /**
-     * Destroy.
+     * Autoplay component object.
+     *
+     * @type {Object}
      */
-    destroy: function destroy() {
-      apply(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');
+    var Autoplay = {
+      /**
+       * Required only when the autoplay option is true.
+       *
+       * @type {boolean}
+       */
+      required: Splide.options.autoplay,
 
-      if (img && img.src) {
-        cover(img, uncover);
-      }
-    });
-  }
-  /**
-   * 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".
-   */
+      /**
+       * 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);
 
-  function cover(img, uncover) {
-    applyStyle(img.parentElement, {
-      background: uncover ? '' : "center/cover no-repeat url(\"" + img.src + "\")"
-    });
-    applyStyle(img, {
-      display: uncover ? '' : 'none'
-    });
-  }
+            if (Elements.bar) {
+              applyStyle(Elements.bar, {
+                width: rate * 100 + "%"
+              });
+            }
+          });
+          bind();
+          this.play();
+        }
+      },
 
-  return Cover;
-});
-;// CONCATENATED MODULE: ./src/js/components/arrows/path.js
-/**
- * Export vector path for an arrow.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+      /**
+       * Start autoplay.
+       *
+       * @param {number} flag - A pause flag to be removed.
+       */
+      play: function play(flag) {
+        if (flag === void 0) {
+          flag = 0;
+        }
 
-/**
- * Namespace definition for SVG element.
- *
- * @type {string}
- */
-var XML_NAME_SPACE = 'http://www.w3.org/2000/svg';
-/**
- * The arrow vector path.
- *
- * @type {number}
- */
+        flags = flags.filter(function (f) {
+          return f !== flag;
+        });
 
-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}
- */
+        if (!flags.length) {
+          Splide.emit(name + ":play");
+          interval.play(Splide.options.resetProgress);
+        }
+      },
 
-var SIZE = 40;
-;// CONCATENATED MODULE: ./src/js/components/arrows/index.js
-/**
- * The component for appending prev/next arrows.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+      /**
+       * 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);
+        }
 
-/**
- * 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.
- */
+        if (flags.length === 1) {
+          Splide.emit(name + ":pause");
+        }
+      }
+    };
+    /**
+     * Listen some events.
+     */
 
-/* harmony default export */ var arrows = (function (Splide, Components, name) {
-  /**
-   * Previous arrow element.
-   *
-   * @type {Element|undefined}
-   */
-  var prev;
-  /**
-   * Next arrow element.
-   *
-   * @type {Element|undefined}
-   */
+    function bind() {
+      var options = Splide.options;
+      var sibling = Splide.sibling;
+      var elms = [Splide.root, sibling ? sibling.root : null];
 
-  var next;
-  /**
-   * Store the class list.
-   *
-   * @type {Object}
-   */
+      if (options.pauseOnHover) {
+        switchOn(elms, 'mouseleave', PAUSE_FLAGS.HOVER, true);
+        switchOn(elms, 'mouseenter', PAUSE_FLAGS.HOVER, false);
+      }
 
-  var classes = Splide.classes;
-  /**
-   * Hold the root element.
-   *
-   * @type {Element}
-   */
+      if (options.pauseOnFocus) {
+        switchOn(elms, 'focusout', PAUSE_FLAGS.FOCUS, true);
+        switchOn(elms, 'focusin', PAUSE_FLAGS.FOCUS, false);
+      }
 
-  var root = Splide.root;
-  /**
-   * Whether arrows are created programmatically or not.
-   *
-   * @type {boolean}
-   */
+      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);
+      }
+
+      if (Elements.pause) {
+        switchOn([Elements.pause], 'click', PAUSE_FLAGS.MANUAL, 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);
+      });
+    }
 
-  var created;
+    return Autoplay;
+  };
   /**
-   * Hold the Elements component.
+   * The component for change an img element to background image of its wrapper.
    *
-   * @type {Object}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var Elements = Components.Elements;
   /**
-   * Arrows component object.
+   * The component for change an img element to background image of its wrapper.
    *
-   * @type {Object}
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
+   *
+   * @return {Object} - The component object.
    */
 
-  var Arrows = {
+
+  var Cover = function Cover(Splide, Components) {
     /**
-     * Required when the arrows option is true.
+     * Hold options.
      *
-     * @type {boolean}
+     * @type {Object}
      */
-    required: Splide.options.arrows,
-
+    var options = Splide.options;
     /**
-     * Called when the component is mounted.
+     * Cover component object.
+     *
+     * @type {Object}
      */
-    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();
-      }
+    var Cover = {
+      /**
+       * Required only when "cover" option is true.
+       *
+       * @type {boolean}
+       */
+      required: options.cover,
 
-      this.arrows = {
-        prev: prev,
-        next: next
-      };
-    },
+      /**
+       * 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);
+        });
+      },
 
+      /**
+       * Destroy.
+       */
+      destroy: function destroy() {
+        apply(true);
+      }
+    };
     /**
-     * Called after all components are mounted.
+     * Apply "cover" to all slides.
+     *
+     * @param {boolean} uncover - If true, "cover" will be clear.
      */
-    mounted: function mounted() {
-      Splide.emit(name + ":mounted", prev, next);
-    },
 
+    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);
+        }
+      });
+    }
     /**
-     * Destroy.
+     * 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".
      */
-    destroy: function destroy() {
-      removeAttribute([prev, next], 'disabled');
 
-      if (created) {
-        dom_remove(prev.parentElement);
-      }
+
+    function cover(img, uncover) {
+      applyStyle(img.parentElement, {
+        background: uncover ? '' : "center/cover no-repeat url(\"" + img.src + "\")"
+      });
+      applyStyle(img, {
+        display: uncover ? '' : 'none'
+      });
     }
-  };
-  /**
-   * 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);
-  }
+    return Cover;
+  };
   /**
-   * Update a disabled attribute.
+   * Export vector path for an arrow.
+   *
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-
-  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.
+   * Namespace definition for SVG element.
+   *
+   * @type {string}
    */
 
 
-  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);
-  }
+  var XML_NAME_SPACE = 'http://www.w3.org/2000/svg';
   /**
-   * Create an arrow element.
-   *
-   * @param {boolean} prev - Determine to create a prev arrow or next arrow.
+   * The arrow vector path.
    *
-   * @return {Element} - A created arrow element.
+   * @type {number}
    */
 
-
-  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);
-  }
-
-  return Arrows;
-});
-;// CONCATENATED MODULE: ./src/js/components/pagination/index.js
-/**
- * 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.
- */
-
-/* harmony default export */ var pagination = (function (Splide, Components, name) {
+  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';
   /**
-   * Store all data for pagination.
-   * - list: A list element.
-   * - items: An array that contains objects(li, button, index, page).
+   * SVG width and height.
    *
-   * @type {Object}
+   * @type {number}
    */
-  var data = {};
+
+  var SIZE = 40;
   /**
-   * Hold the Elements component.
+   * The component for appending prev/next arrows.
    *
-   * @type {Object}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var Elements = Components.Elements;
   /**
-   * Pagination component object.
+   * The component for appending prev/next arrows.
    *
-   * @type {Object}
+   * @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 = {
+  var Arrows = function Arrows(Splide, Components, name) {
     /**
-     * Called when the component is mounted.
+     * Previous arrow element.
+     *
+     * @type {Element|undefined}
      */
-    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();
-        }
-      });
-    },
-
+    var prev;
     /**
-     * Called after all components are mounted.
+     * Next arrow element.
+     *
+     * @type {Element|undefined}
      */
-    mounted: function mounted() {
-      if (Splide.options.pagination) {
-        var index = Splide.index;
-        Splide.emit(name + ":mounted", data, this.getItem(index));
-        updateAttributes(index, -1);
-      }
-    },
 
+    var next;
     /**
-     * Destroy the pagination.
-     * Be aware that node.remove() is not supported by IE.
+     * Store the class list.
+     *
+     * @type {Object}
      */
-    destroy: function destroy() {
-      dom_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 classes = Splide.classes;
+    /**
+     * Hold the root element.
+     *
+     * @type {Element}
+     */
 
+    var root = Splide.root;
     /**
-     * Return an item by index.
+     * Whether arrows are created programmatically or not.
      *
-     * @param {number} index - A slide index.
+     * @type {boolean}
+     */
+
+    var created;
+    /**
+     * Hold the Elements component.
      *
-     * @return {Object|undefined} - An item object on success or undefined on failure.
+     * @type {Object}
      */
-    getItem: function getItem(index) {
-      return data.items[Components.Controller.toPage(index)];
-    },
 
+    var Elements = Components.Elements;
     /**
-     * Return object containing pagination data.
+     * Arrows component object.
      *
-     * @return {Object} - Pagination data including list and items.
+     * @type {Object}
      */
-    get data() {
-      return data;
-    }
 
-  };
-  /**
-   * Update attributes.
-   *
-   * @param {number} index     - Active index.
-   * @param {number} prevIndex - Prev index.
-   */
+    var Arrows = {
+      /**
+       * Required when the arrows option is true.
+       *
+       * @type {boolean}
+       */
+      required: Splide.options.arrows,
 
-  function updateAttributes(index, prevIndex) {
-    var prev = Pagination.getItem(prevIndex);
-    var curr = Pagination.getItem(index);
-    var active = STATUS_CLASSES.active;
+      /**
+       * 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) {
-      removeClass(prev.button, active);
-    }
+        if (prev && next) {
+          bind();
+        }
 
-    if (curr) {
-      addClass(curr.button, active);
-    }
+        this.arrows = {
+          prev: prev,
+          next: next
+        };
+      },
 
-    Splide.emit(name + ":updated", data, prev, curr);
-  }
-  /**
-   * Create a wrapper and button elements.
-   *
-   * @return {Object} - An object contains all data.
-   */
+      /**
+       * Called after all components are mounted.
+       */
+      mounted: function mounted() {
+        Splide.emit(name + ":mounted", prev, next);
+      },
 
+      /**
+       * Destroy.
+       */
+      destroy: function destroy() {
+        removeAttribute([prev, next], 'disabled');
 
-  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
+        if (created) {
+          _remove(prev.parentElement);
+        }
+      }
     };
-  }
+    /**
+     * Listen to native and custom events.
+     */
 
-  return Pagination;
-});
-;// CONCATENATED MODULE: ./src/js/components/lazyload/index.js
-/**
- * The component for loading slider images lazily.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+    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.
+     */
+
 
-/**
- * The name for a data attribute of src.
- *
- * @type {string}
- */
+    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.
+     */
 
-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.
- */
+    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);
+    }
 
-/* harmony default export */ var lazyload = (function (Splide, Components, name) {
-  /**
-   * Next index for sequential loading.
-   *
-   * @type {number}
-   */
-  var nextIndex;
+    return Arrows;
+  };
   /**
-   * Store objects containing an img element and a Slide object.
+   * The component for handling pagination
    *
-   * @type {Object[]}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var images;
   /**
-   * Store the options.
+   * The event name for updating some attributes of pagination nodes.
    *
-   * @type {Object}
+   * @type {string}
    */
 
-  var options = Splide.options;
+
+  var ATTRIBUTES_UPDATE_EVENT = 'move.page';
   /**
-   * Whether to load images sequentially or not.
+   * The event name for recreating pagination.
    *
-   * @type {boolean}
+   * @type {string}
    */
 
-  var isSequential = options.lazyLoad === 'sequential';
+  var UPDATE_EVENT = 'updated.page refresh.page';
   /**
-   * Lazyload component object.
+   * The component for handling pagination
    *
-   * @type {Object}
+   * @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 = {
+  var Pagination = function Pagination(Splide, Components, name) {
     /**
-     * Mount only when the lazyload option is provided.
+     * Store all data for pagination.
+     * - list: A list element.
+     * - items: An array that contains objects(li, button, index, page).
      *
-     * @type {boolean}
+     * @type {Object}
+     */
+    var data = {};
+    /**
+     * Hold the Elements component.
+     *
+     * @type {Object}
      */
-    required: options.lazyLoad,
 
+    var Elements = Components.Elements;
     /**
-     * Called when the component is mounted.
+     * Pagination component object.
+     *
+     * @type {Object}
      */
-    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'
-              });
-            }
-          });
+
+    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();
+          }
         });
+      },
 
-        if (isSequential) {
-          loadNext();
+      /**
+       * 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)];
+      },
 
-      if (!isSequential) {
-        Splide.on("mounted refresh moved." + name, check);
+      /**
+       * Return object containing pagination data.
+       *
+       * @return {Object} - Pagination data including list and items.
+       */
+      get data() {
+        return data;
       }
-    },
 
+    };
     /**
-     * Destroy.
+     * Update attributes.
+     *
+     * @param {number} index     - Active index.
+     * @param {number} prevIndex - Prev index.
      */
-    destroy: init
-  };
-  /**
-   * 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 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 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;
+      if (curr) {
+        addClass(curr.button, active);
       }
 
-      return true;
-    }); // Unbind if all images are loaded.
+      Splide.emit(name + ":updated", data, prev, curr);
+    }
+    /**
+     * Create a wrapper and button elements.
+     *
+     * @return {Object} - An object contains all data.
+     */
+
 
-    if (!images[0]) {
-      Splide.off("moved." + name);
+    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
+      };
     }
-  }
+
+    return Pagination;
+  };
   /**
-   * 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.
+   * The component for loading slider images lazily.
    *
-   * @param {Element} img   - An image element.
-   * @param {Object}  Slide - A Slide object.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-
-  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) || '');
-  }
   /**
-   * Start loading a next image in images array.
+   * The name for a data attribute of src.
+   *
+   * @type {string}
    */
 
 
-  function loadNext() {
-    if (nextIndex < images.length) {
-      var image = images[nextIndex];
-      load(image.img, image.Slide);
-    }
-
-    nextIndex++;
-  }
+  var SRC_DATA_NAME = 'data-splide-lazy';
   /**
-   * Called just after the image was loaded or loading was aborted by some error.
+   * The name for a data attribute of srcset.
    *
-   * @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.
+   * @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.
+   */
 
-  function loaded(img, spinner, Slide, error) {
-    removeClass(Slide.slide, STATUS_CLASSES.loading);
+  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[]}
+     */
 
-    if (!error) {
-      dom_remove(spinner);
-      applyStyle(img, {
-        display: ''
-      });
-      Splide.emit(name + ":loaded", img).emit('resize');
-    }
+    var images;
+    /**
+     * Store the options.
+     *
+     * @type {Object}
+     */
 
-    if (isSequential) {
-      loadNext();
-    }
-  }
+    var options = Splide.options;
+    /**
+     * Whether to load images sequentially or not.
+     *
+     * @type {boolean}
+     */
 
-  return Lazyload;
-});
-;// CONCATENATED MODULE: ./src/js/constants/a11y.js
-/**
- * Export aria attribute names.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+    var isSequential = options.lazyLoad === 'sequential';
+    /**
+     * Lazyload component object.
+     *
+     * @type {Object}
+     */
 
-/**
- * Attribute name for aria-current.
- *
- * @type {string}
- */
-var ARIA_CURRENRT = 'aria-current';
-/**
- * Attribute name for aria-control.
- *
- * @type {string}
- */
+    var Lazyload = {
+      /**
+       * Mount only when the lazyload option is provided.
+       *
+       * @type {boolean}
+       */
+      required: options.lazyLoad,
 
-var ARIA_CONTROLS = 'aria-controls';
-/**
- * Attribute name for aria-control.
- *
- * @type {string}
- */
+      /**
+       * 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'
+                });
+              }
+            });
+          });
 
-var ARIA_LABEL = 'aria-label';
-/**
- * Attribute name for aria-labelledby.
- *
- * @type {string}
- */
+          if (isSequential) {
+            loadNext();
+          }
+        });
 
-var ARIA_LABELLEDBY = 'aria-labelledby';
-/**
- * Attribute name for aria-hidden.
- *
- * @type {string}
- */
+        if (!isSequential) {
+          Splide.on("mounted refresh moved." + name, check);
+        }
+      },
 
-var ARIA_HIDDEN = 'aria-hidden';
-/**
- * Attribute name for tab-index.
- *
- * @type {string}
- */
+      /**
+       * Destroy.
+       */
+      destroy: init
+    };
+    /**
+     * Initialize parameters.
+     */
 
-var TAB_INDEX = 'tabindex';
-;// CONCATENATED MODULE: ./src/js/components/keyboard/index.js
-/**
- * The component for controlling slides via keyboard.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+    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.
+     */
 
 
-/**
- * Map a key to a slide control.
- *
- * @type {Object}
- */
+    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 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.
- */
+        return true;
+      }); // Unbind if all images are loaded.
 
-/* harmony default export */ var keyboard = (function (Splide) {
-  /**
-   * Hold the target element.
-   *
-   * @type {Element|Document|undefined}
-   */
-  var target;
-  return {
+      if (!images[0]) {
+        Splide.off("moved." + name);
+      }
+    }
     /**
-     * Called when the component is mounted.
+     * 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.
      */
-    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 load(img, Slide) {
+      addClass(Slide.slide, STATUS_CLASSES.loading);
+      var spinner = create('span', {
+        class: Splide.classes.spinner
       });
-    }
-  };
-});
-;// CONCATENATED MODULE: ./src/js/components/a11y/index.js
-/**
- * The component for enhancing accessibility.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
-
+      append(img.parentElement, spinner);
 
+      img.onload = function () {
+        loaded(img, spinner, Slide, false);
+      };
 
-/**
- * The component for enhancing accessibility.
- *
- * @param {Splide} Splide     - A Splide instance.
- * @param {Object} Components - An object containing components.
- *
- * @return {Object} - The component object.
- */
+      img.onerror = function () {
+        loaded(img, spinner, Slide, true);
+      };
 
-/* harmony default export */ var a11y = (function (Splide, Components) {
-  /**
-   * Hold a i18n object.
-   *
-   * @type {Object}
-   */
-  var i18n = Splide.i18n;
-  /**
-   * Hold the Elements component.
-   *
-   * @type {Object}
-   */
+      setAttribute(img, 'srcset', getAttribute(img, SRCSET_DATA_NAME) || '');
+      setAttribute(img, 'src', getAttribute(img, SRC_DATA_NAME) || '');
+    }
+    /**
+     * Start loading a next image in images array.
+     */
 
-  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}
-   */
+    function loadNext() {
+      if (nextIndex < images.length) {
+        var image = images[nextIndex];
+        load(image.img, image.Slide);
+      }
 
-  var A11y = {
+      nextIndex++;
+    }
     /**
-     * Required only when the accessibility option is true.
+     * Called just after the image was loaded or loading was aborted by some error.
      *
-     * @type {boolean}
+     * @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.
      */
-    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 loaded(img, spinner, Slide, error) {
+      removeClass(Slide.slide, STATUS_CLASSES.loading);
+
+      if (!error) {
+        _remove(spinner);
+
+        applyStyle(img, {
+          display: ''
         });
+        Splide.emit(name + ":loaded", img).emit('resize');
       }
 
-      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);
+      if (isSequential) {
+        loadNext();
+      }
     }
+
+    return Lazyload;
   };
   /**
-   * Update slide attributes when it gets visible or hidden.
+   * Export aria attribute names.
    *
-   * @param {Element} slide   - A slide element.
-   * @param {Boolean} visible - True when the slide gets visible, or false when hidden.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  function updateSlide(slide, visible) {
-    setAttribute(slide, ARIA_HIDDEN, !visible);
-
-    if (Splide.options.slideFocus) {
-      setAttribute(slide, TAB_INDEX, visible ? 0 : -1);
-    }
-  }
   /**
-   * Initialize arrows if they are available.
-   * Append screen reader elements and add aria-controls attribute.
+   * Attribute name for aria-current.
    *
-   * @param {Element} prev - Previous arrow element.
-   * @param {Element} next - Next arrow element.
+   * @type {string}
    */
 
 
-  function initArrows(prev, next) {
-    var controls = Elements.track.id;
-    setAttribute(prev, ARIA_CONTROLS, controls);
-    setAttribute(next, ARIA_CONTROLS, controls);
-  }
+  var ARIA_CURRENRT = 'aria-current';
   /**
-   * Update arrow attributes.
+   * Attribute name for aria-control.
    *
-   * @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.
+   * @type {string}
    */
 
-
-  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);
-  }
+  var ARIA_CONTROLS = 'aria-controls';
   /**
-   * Initialize pagination if it's available.
-   * Append a screen reader element and add aria-controls/label attribute to each item.
+   * Attribute name for aria-control.
    *
-   * @param {Object} data       - Data object containing all items.
-   * @param {Object} activeItem - An initial active item.
+   * @type {string}
    */
 
-
-  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;
-      });
-      setAttribute(button, ARIA_CONTROLS, controls.join(' '));
-      setAttribute(button, ARIA_LABEL, label);
-    });
-  }
+  var ARIA_LABEL = 'aria-label';
   /**
-   * Update pagination attributes.
+   * Attribute name for aria-hidden.
    *
-   * @param {Object}  data - Data object containing all items.
-   * @param {Element} prev - A previous active element.
-   * @param {Element} curr - A current active element.
+   * @type {string}
    */
 
-
-  function updatePagination(data, prev, curr) {
-    if (prev) {
-      removeAttribute(prev.button, ARIA_CURRENRT);
-    }
-
-    if (curr) {
-      setAttribute(curr.button, ARIA_CURRENRT, true);
-    }
-  }
+  var ARIA_HIDDEN = 'aria-hidden';
   /**
-   * Initialize autoplay buttons.
+   * Attribute name for tab-index.
+   *
+   * @type {string}
    */
 
-
-  function initAutoplay() {
-    ['play', 'pause'].forEach(function (name) {
-      var elm = Elements[name];
-
-      if (elm) {
-        if (!isButton(elm)) {
-          setAttribute(elm, 'role', 'button');
-        }
-
-        setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
-        setAttribute(elm, ARIA_LABEL, i18n[name]);
-      }
-    });
-  }
+  var TAB_INDEX = 'tabindex';
   /**
-   * Initialize navigation slider.
-   * Add button role, aria-label, aria-controls to slide elements and append screen reader text to them.
+   * The component for controlling slides via keyboard.
    *
-   * @param {Splide} main - A main Splide instance.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
+  /**
+   * Map a key to a slide control.
+   *
+   * @type {Object}
+   */
 
-  function initNavigation(main) {
-    Elements.each(function (Slide) {
-      var slide = Slide.slide;
-      var realIndex = Slide.realIndex;
+  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.
+   */
 
-      if (!isButton(slide)) {
-        setAttribute(slide, 'role', 'button');
-      }
+  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);
+          }
 
-      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);
+          if (keyboard) {
+            if (keyboard === 'focused') {
+              target = root;
+              setAttribute(root, TAB_INDEX, 0);
+            } else {
+              target = document;
+            }
 
-      if (mainSlide) {
-        setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
+            Splide.on('keydown', function (e) {
+              if (map[e.key]) {
+                Splide.go(map[e.key]);
+              }
+            }, target);
+          }
+        });
       }
-    });
-  }
+    };
+  };
   /**
-   * Update navigation attributes.
+   * The component for enhancing accessibility.
    *
-   * @param {Object}  Slide  - A target Slide object.
-   * @param {boolean} active - True if the slide is active or false if inactive.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-
-  function updateNavigation(_ref, active) {
-    var slide = _ref.slide;
-
-    if (active) {
-      setAttribute(slide, ARIA_CURRENRT, true);
-    } else {
-      removeAttribute(slide, ARIA_CURRENRT);
-    }
-  }
   /**
-   * Check if the given element is button or not.
+   * The component for enhancing accessibility.
    *
-   * @param {Element} elm - An element to be checked.
+   * @param {Splide} Splide     - A Splide instance.
+   * @param {Object} Components - An object containing components.
    *
-   * @return {boolean} - True if the given element is button.
+   * @return {Object} - The component object.
    */
 
 
-  function isButton(elm) {
-    return elm.tagName === 'BUTTON';
-  }
+  var A11y = function A11y(Splide, Components) {
+    /**
+     * Hold a i18n object.
+     *
+     * @type {Object}
+     */
+    var i18n = Splide.i18n;
+    /**
+     * Hold the Elements component.
+     *
+     * @type {Object}
+     */
 
-  return A11y;
-});
-;// CONCATENATED MODULE: ./src/js/components/sync/index.js
-/**
- * The component for synchronizing a slider with another.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+    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}
+     */
 
-/**
- * The event name for sync.
- *
- * @type {string}
- */
+    var A11y = {
+      /**
+       * Required only when the accessibility option is true.
+       *
+       * @type {boolean}
+       */
+      required: Splide.options.accessibility,
 
-var SYNC_EVENT = 'move.sync';
-/**
- * The event names for click navigation.
- * @type {string}
- */
+      /**
+       * 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);
+        });
 
-var CLICK_EVENTS = 'mouseup touchend';
-/**
- * The keys for triggering the navigation button.
- *
- * @type {String[]}
- */
+        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);
+          });
+        }
 
-var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
-/**
- * The component for synchronizing a slider with another.
- *
- * @param {Splide} Splide - A Splide instance.
- *
- * @return {Object} - The component object.
- */
+        initAutoplay();
+      },
 
-/* harmony default export */ var sync = (function (Splide) {
-  /**
-   * Keep the sibling Splide instance.
-   *
-   * @type {Splide}
-   */
-  var sibling = Splide.sibling;
-  /**
-   * Whether the sibling slider is navigation or not.
-   *
-   * @type {Splide|boolean}
-   */
+      /**
+       * 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.
+     */
 
-  var isNavigation = sibling && sibling.options.isNavigation;
-  /**
-   * Layout component object.
-   *
-   * @type {Object}
-   */
+    function updateSlide(slide, visible) {
+      setAttribute(slide, ARIA_HIDDEN, !visible);
 
-  var Sync = {
+      if (Splide.options.slideFocus) {
+        setAttribute(slide, TAB_INDEX, visible ? 0 : -1);
+      }
+    }
     /**
-     * Required only when the sub slider is available.
+     * Initialize arrows if they are available.
+     * Append screen reader elements and add aria-controls attribute.
      *
-     * @type {boolean}
+     * @param {Element} prev - Previous arrow element.
+     * @param {Element} next - Next arrow element.
      */
-    required: !!sibling,
 
+
+    function initArrows(prev, next) {
+      var controls = Elements.track.id;
+      setAttribute(prev, ARIA_CONTROLS, controls);
+      setAttribute(next, ARIA_CONTROLS, controls);
+    }
     /**
-     * Called when the component is mounted.
+     * 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.
      */
-    mount: function mount() {
-      syncMain();
-      syncSibling();
 
-      if (isNavigation) {
-        bind();
-        Splide.on('refresh', function () {
-          setTimeout(function () {
-            bind();
-            sibling.emit('navigation:updated', Splide);
-          });
-        });
-      }
-    },
 
+    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);
+    }
     /**
-     * Called after all components are mounted.
+     * 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.
      */
-    mounted: function mounted() {
-      if (isNavigation) {
-        sibling.emit('navigation:mounted', Splide);
+
+
+    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;
+        });
+        setAttribute(button, ARIA_CONTROLS, controls.join(' '));
+        setAttribute(button, ARIA_LABEL, label);
+      });
     }
-  };
-  /**
-   * Listen the primary slider event to move secondary one.
-   * Must unbind a handler at first to avoid infinite loop.
-   */
+    /**
+     * 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 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.
-   */
 
+    function updatePagination(data, prev, curr) {
+      if (prev) {
+        removeAttribute(prev.button, ARIA_CURRENRT);
+      }
 
-  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.
-   */
+      if (curr) {
+        setAttribute(curr.button, ARIA_CURRENRT, true);
+      }
+    }
+    /**
+     * Initialize autoplay buttons.
+     */
 
 
-  function bind() {
-    sibling.Components.Elements.each(function (_ref) {
-      var slide = _ref.slide,
-          index = _ref.index;
+    function initAutoplay() {
+      ['play', 'pause'].forEach(function (name) {
+        var elm = Elements[name];
 
-      /*
-       * 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.
-       */
+        if (elm) {
+          if (!isButton(elm)) {
+            setAttribute(elm, 'role', 'button');
+          }
 
-      Splide.off('keyup', slide).on('keyup', function (e) {
-        if (TRIGGER_KEYS.indexOf(e.key) > -1) {
-          e.preventDefault();
-          moveSibling(index);
+          setAttribute(elm, ARIA_CONTROLS, Elements.track.id);
+          setAttribute(elm, ARIA_LABEL, i18n[name]);
         }
-      }, 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.
-   */
+    }
+    /**
+     * 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;
 
-  function moveSibling(index) {
-    if (Splide.State.is(IDLE)) {
-      sibling.go(index);
+        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);
+
+        if (mainSlide) {
+          setAttribute(slide, ARIA_CONTROLS, mainSlide.slide.id);
+        }
+      });
     }
-  }
+    /**
+     * Update navigation attributes.
+     *
+     * @param {Object}  Slide  - A target Slide object.
+     * @param {boolean} active - True if the slide is active or false if inactive.
+     */
 
-  return Sync;
-});
-;// CONCATENATED MODULE: ./src/js/components/breakpoints/index.js
-/**
- * The component for updating options according to a current window width.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
 
+    function updateNavigation(_ref6, active) {
+      var slide = _ref6.slide;
 
-/**
- * Interval time for throttle.
- *
- * @type {number}
- */
+      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.
+     */
 
-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.
- */
 
-/* harmony default export */ var breakpoints = (function (Splide) {
-  /**
-   * Store breakpoints.
-   *
-   * @type {Object|boolean}
-   */
-  var breakpoints = Splide.options.breakpoints;
+    function isButton(elm) {
+      return elm.tagName === 'BUTTON';
+    }
+
+    return A11y;
+  };
   /**
-   * The check function whose frequency of call is reduced.
+   * The component for synchronizing a slider with another.
    *
-   * @type {Function}
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-  var throttledCheck = throttle(check, THROTTLE);
   /**
-   * Keep initial options.
+   * The event name for sync.
    *
-   * @type {Object}
+   * @type {string}
    */
 
-  var initialOptions;
+
+  var SYNC_EVENT = 'move.sync';
   /**
-   * An array containing objects of point and MediaQueryList.
-   *
-   * @type {Object[]}
+   * The event names for click navigation.
+   * @type {string}
    */
 
-  var map = [];
+  var CLICK_EVENTS = 'mouseup touchend';
   /**
-   * Hold the previous breakpoint.
+   * The keys for triggering the navigation button.
    *
-   * @type {number|undefined}
+   * @type {String[]}
    */
 
-  var prevPoint;
+  var TRIGGER_KEYS = [' ', 'Enter', 'Spacebar'];
   /**
-   * Breakpoints component object.
+   * The component for synchronizing a slider with another.
    *
-   * @type {Object}
+   * @param {Splide} Splide - A Splide instance.
+   *
+   * @return {Object} - The component object.
    */
 
-  var Breakpoints = {
+  var Sync = function Sync(Splide) {
     /**
-     * Required only when the breakpoints definition is provided and browser supports matchMedia.
+     * Keep the sibling Splide instance.
      *
-     * @type {boolean}
+     * @type {Splide}
+     */
+    var sibling = Splide.sibling;
+    /**
+     * Whether the sibling slider is navigation or not.
+     *
+     * @type {Splide|boolean}
      */
-    required: breakpoints && matchMedia,
 
+    var isNavigation = sibling && sibling.options.isNavigation;
     /**
-     * Called when the component is mounted.
+     * Layout component object.
+     *
+     * @type {Object}
      */
-    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)")
-        };
-      });
-      /*
-       * To keep monitoring resize event after destruction without "completely",
-       * use native addEventListener instead of Splide.on.
+
+    var Sync = {
+      /**
+       * Required only when the sub slider is available.
+       *
+       * @type {boolean}
        */
+      required: !!sibling,
 
-      this.destroy(true);
-      addEventListener('resize', throttledCheck); // Keep initial options to apply them when no breakpoint matches.
+      /**
+       * 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);
+            });
+          });
+        }
+      },
 
-      initialOptions = Splide.options;
-      check();
-    },
+      /**
+       * Called after all components are mounted.
+       */
+      mounted: function mounted() {
+        if (isNavigation) {
+          sibling.emit('navigation:mounted', Splide);
+        }
+      }
+    };
+    /**
+     * 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();
+      });
+    }
     /**
-     * Destroy.
-     *
-     * @param {boolean} completely - Whether to destroy Splide completely.
+     * Listen the secondary slider event to move primary one.
+     * Must unbind a handler at first to avoid infinite loop.
      */
-    destroy: function destroy(completely) {
-      if (completely) {
-        removeEventListener('resize', throttledCheck);
-      }
+
+
+    function syncSibling() {
+      sibling.on(SYNC_EVENT, function (newIndex, prevIndex, destIndex) {
+        Splide.off(SYNC_EVENT).go(Splide.is(LOOP) ? destIndex : newIndex, false);
+        syncMain();
+      });
     }
-  };
-  /**
-   * Check the breakpoint.
-   */
+    /**
+     * Listen some events on each slide.
+     */
 
-  function check() {
-    var point = getPoint();
 
-    if (point !== prevPoint) {
-      prevPoint = point;
-      var State = Splide.State;
-      var options = breakpoints[point] || initialOptions;
-      var destroy = options.destroy;
+    function bind() {
+      sibling.Components.Elements.each(function (_ref7) {
+        var slide = _ref7.slide,
+            index = _ref7.index;
 
-      if (destroy) {
-        Splide.options = initialOptions;
-        Splide.destroy(destroy === 'completely');
-      } else {
-        if (State.is(DESTROYED)) {
-          Splide.mount();
-        }
+        /*
+         * 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.
+     */
 
-        Splide.options = options;
+
+    function moveSibling(index) {
+      if (Splide.State.is(IDLE)) {
+        sibling.go(index);
       }
     }
-  }
+
+    return Sync;
+  };
   /**
-   * Return the breakpoint matching current window width.
-   * Note that Array.prototype.find is not supported by IE.
+   * The component for updating options according to a current window width.
    *
-   * @return {number|string} - A breakpoint as number or string. -1 if no point matches.
+   * @author    Naotoshi Fujita
+   * @copyright Naotoshi Fujita. All rights reserved.
    */
 
-
-  function getPoint() {
-    var item = map.filter(function (item) {
-      return item.mql.matches;
-    })[0];
-    return item ? item.point : -1;
-  }
-
-  return Breakpoints;
-});
-;// CONCATENATED MODULE: ./src/js/components/index.js
-/**
- * Export components.
- *
- * @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[]}
+     */
 
+    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)")
+          };
+        });
+        /*
+         * 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();
+      },
 
+      /**
+       * Destroy.
+       *
+       * @param {boolean} completely - Whether to destroy Splide completely.
+       */
+      destroy: function destroy(completely) {
+        if (completely) {
+          removeEventListener('resize', throttledCheck);
+        }
+      }
+    };
+    /**
+     * 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();
+          }
 
-var COMPLETE = {
-  Options: options,
-  Breakpoints: breakpoints,
-  Controller: controller,
-  Elements: components_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
-};
-var LIGHT = {
-  Options: options,
-  Controller: controller,
-  Elements: components_elements,
-  Track: track,
-  Clones: clones,
-  Layout: layout,
-  Drag: drag,
-  Click: click,
-  Arrows: arrows,
-  Pagination: pagination,
-  A11y: a11y
-};
-;// CONCATENATED MODULE: ./build/complete/complete.js
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+          Splide.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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-/**
- * Export "Splide" class for frontend with full components.
- *
- * @author    Naotoshi Fujita
- * @copyright Naotoshi Fujita. All rights reserved.
- */
+    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
+   */
 
-/**
- * Export Splide with all components.
- */
+  var Splide = /*#__PURE__*/function (_Splide$) {
+    _inheritsLoose(Splide, _Splide$);
 
-var complete_Splide = /*#__PURE__*/function (_Core) {
-  _inheritsLoose(Splide, _Core);
+    function Splide(root, options) {
+      return _Splide$.call(this, root, options, COMPLETE) || this;
+    }
 
-  function Splide(root, options) {
-    return _Core.call(this, root, options, COMPLETE) || this;
-  }
+    return Splide;
+  }(Splide$1);
 
   return Splide;
-}(Splide); // Register the class as a global variable for non-ES6 environment.
-
-window.Splide = complete_Splide;
-/******/ })()
-;
+});
+//# sourceMappingURL=splide.js.map

gulp/build-css.js

@@ -52,4 +52,4 @@ function copy() {
 	} );
 }
 
-module.exports = buildCss;
+exports.buildCss = buildCss;

gulp/build-js.js

@@ -1,36 +0,0 @@
-const gulp          = require( 'gulp' );
-const webpack       = require( 'webpack' );
-const webpackStream = require( 'webpack-stream' );
-const gzip          = require( 'gulp-gzip' );
-
-
-const js = {
-	complete: {
-		path: '../build/complete/config',
-		dest: './dist/js',
-	},
-	minified: {
-		path: '../build/complete/config-min',
-		dest: './dist/js',
-		gzip: true,
-	},
-	module: {
-		path: '../build/module/config',
-		dest: './dist/js',
-	},
-};
-
-function buildJs( done ) {
-	Object.values( js ).forEach( settings => {
-		const stream = webpackStream( { config: require( settings.path ) }, webpack )
-			.pipe( gulp.dest( settings.dest ) );
-
-		if ( settings.gzip ) {
-			stream.pipe( gzip() ).pipe( gulp.dest( settings.dest ) );
-		}
-	} );
-
-	done();
-}
-
-module.exports = buildJs;

gulp/build-script.js

@@ -0,0 +1,100 @@
+const { parallel, src, dest } = require( 'gulp' );
+const rollup  = require( 'rollup' ).rollup;
+const uglify  = require( 'rollup-plugin-uglify' ).uglify;
+const babel   = require( '@rollup/plugin-babel' );
+const resolve = require( '@rollup/plugin-node-resolve' ).nodeResolve;
+const gzip    = require( 'gulp-gzip' );
+const path    = require( 'path' );
+const banner  = require( './constants/banner' );
+
+
+function buildScript( type, minify ) {
+	const file  = buildFilename( type, minify );
+	const input = `./src/js/build/${ type }/${ type }.js`;
+
+	const plugins = [
+		resolve(),
+		babel.getBabelOutputPlugin( {
+			configFile: path.resolve( __dirname, '../.babelrc' ),
+			allowAllFormats: true,
+		} ),
+	];
+
+	if ( minify ) {
+		plugins.push(
+			uglify( {
+				output: {
+					comments: /^!/,
+				},
+				// mangle: {
+				// 	properties: {
+				// 		regex: /^_(private)_/,
+				// 	},
+				// },
+			} ),
+		);
+	}
+
+	return rollup( { input, plugins } )
+		.then( bundle => {
+			return bundle.write( {
+				banner,
+				file,
+				format   : 'umd',
+				name     : 'Splide',
+				sourcemap: ! minify,
+			} );
+		} ).then( () => {
+			if ( minify ) {
+				return src( file )
+					.pipe( gzip() )
+					.pipe( dest( './dist/js/' ) );
+			}
+		} );
+}
+
+function buildFilename( type, minify ) {
+	if ( type === 'default' ) {
+		return `./dist/js/splide${ minify ? '.min' : '' }.js`;
+	}
+
+	return `./dist/js/splide-${ type }${ minify ? '.min' : '' }.js`;
+}
+
+function buildModule( format ) {
+	return rollup( {
+		input  : './src/js/build/module/module.js',
+		plugins: [
+			resolve(),
+			babel.getBabelOutputPlugin( {
+				presets: [
+					[
+						'@babel/preset-env',
+						{
+							modules: false,
+							loose  : true,
+						}
+					]
+				],
+				allowAllFormats: true,
+			} ),
+		]
+	} ).then( bundle => {
+		return bundle.write( {
+			banner,
+			file  : `./dist/js/splide.${ format }.js`,
+			format,
+			exports: 'named',
+		} );
+	} );
+}
+
+exports.buildScript = parallel(
+	function jsDefault() { return buildScript( 'default' ) },
+	function jsMinified() { return buildScript( 'default', true ) },
+);
+
+exports.buildModule = parallel(
+	function moduleCjs() { return buildModule( 'cjs' ) },
+	function moduleEsm() { return buildModule( 'esm' ) },
+);

build/banner.js → gulp/constants/banner.js

@@ -1,8 +1,8 @@
-const info = require( '../package' );
+const info = require( '../../package.json' );
 
 module.exports = `/*!
  * Splide.js
  * Version  : ${ info.version }
  * License  : ${ info.license }
  * Copyright: 2020 ${ info.author }
- */`;
+ */`;

gulpfile.js

@@ -1,7 +1,8 @@
 const { parallel } = require( 'gulp' );
-const buildCss = require( './gulp/build-css' );
-const buildJs  = require( './gulp/build-js' );
+const { buildCss } = require( './gulp/build-css' );
+const { buildScript, buildModule } = require( './gulp/build-script' );
 
-exports[ 'build:js' ]  = buildJs;
-exports[ 'build:css' ] = buildCss;
-exports[ 'build:all' ] = parallel( buildJs, buildCss );
+exports[ 'build:js' ]     = buildScript;
+exports[ 'build:module' ] = buildModule;
+exports[ 'build:css' ]    = buildCss;
+exports[ 'build:all' ]    = parallel( buildScript, buildModule, buildCss );

package-lock.json

@@ -1603,6 +1603,41 @@
         }
       }
     },
+    "@rollup/plugin-babel": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz",
+      "integrity": "sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.10.4",
+        "@rollup/pluginutils": "^3.1.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "13.0.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.0.4.tgz",
+      "integrity": "sha512-eYq4TFy40O8hjeDs+sIxEH/jc9lyuI2k9DM557WN6rO5OpnC2qXMBNj4IKH1oHrnAazL49C5p0tgP0/VpqJ+/w==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
     "@sinonjs/commons": {
       "version": "1.8.3",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
@@ -1751,6 +1786,15 @@
       "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==",
       "dev": true
     },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -2910,6 +2954,12 @@
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
       "dev": true
     },
+    "builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
+      "dev": true
+    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -4457,6 +4507,12 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true
     },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -5578,6 +5634,16 @@
           "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
           "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==",
           "dev": true
+        },
+        "rollup": {
+          "version": "0.68.2",
+          "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.68.2.tgz",
+          "integrity": "sha512-WgjNCXYv7ZbtStIap1+tz4pd2zwz0XYN//OILwEY6dINIFLVizK1iWdu+ZtUURL/OKnp8Lv2w8FBds8YihzX7Q==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "0.0.39",
+            "@types/node": "*"
+          }
         }
       }
     },
@@ -6204,6 +6270,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
     "is-negated-glob": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
@@ -10025,13 +10097,12 @@
       }
     },
     "rollup": {
-      "version": "0.68.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.68.2.tgz",
-      "integrity": "sha512-WgjNCXYv7ZbtStIap1+tz4pd2zwz0XYN//OILwEY6dINIFLVizK1iWdu+ZtUURL/OKnp8Lv2w8FBds8YihzX7Q==",
+      "version": "2.56.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.2.tgz",
+      "integrity": "sha512-s8H00ZsRi29M2/lGdm1u8DJpJ9ML8SUOpVVBd33XNeEeL3NVaTiUcSBHzBdF3eAyR0l7VSpsuoVUGrRHq7aPwQ==",
       "dev": true,
       "requires": {
-        "@types/estree": "0.0.39",
-        "@types/node": "*"
+        "fsevents": "~2.3.2"
       }
     },
     "rollup-plugin-hypothetical": {
@@ -10040,6 +10111,45 @@
       "integrity": "sha512-MlxPQTkMtiRUtyhIJ7FpBvTzWtar8eFBA+V7/J6Deg9fSgIIHwL6bJKK1Wl1uWSWtOrWhOmtsMwb9F6aagP/Pg==",
       "dev": true
     },
+    "rollup-plugin-uglify": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.4.tgz",
+      "integrity": "sha512-ddgqkH02klveu34TF0JqygPwZnsbhHVI6t8+hGTcYHngPkQb5MIHI0XiztXIN/d6V9j+efwHAqEL7LspSxQXGw==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "jest-worker": "^24.0.0",
+        "serialize-javascript": "^2.1.2",
+        "uglify-js": "^3.4.9"
+      },
+      "dependencies": {
+        "jest-worker": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
+          "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
+          "dev": true,
+          "requires": {
+            "merge-stream": "^2.0.0",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "serialize-javascript": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -11236,6 +11346,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "uglify-js": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.1.tgz",
+      "integrity": "sha512-JhS3hmcVaXlp/xSo3PKY5R0JqKs5M3IV+exdLHW99qKvKivPO4Z8qbej6mte17SOPqAOVMjt/XGgWacnFSzM3g==",
+      "dev": true
+    },
     "unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "2.4.22",
+  "version": "2.4.23",
   "description": "Splide is a lightweight and powerful slider/carousel without any dependencies.",
   "author": "Naotoshi Fujita",
   "license": "MIT",
@@ -26,6 +26,8 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
@@ -39,14 +41,14 @@
     "gulp-rename": "^2.0.0",
     "gulp-rollup": "^2.17.0",
     "jest": "^27.0.6",
-    "merge-stream": "^2.0.0",
     "postcss": "^8.3.6",
-    "through2": "^4.0.2",
-    "webpack": "^5.50.0",
-    "webpack-stream": "^6.1.2"
+    "rollup": "^2.56.2",
+    "rollup-plugin-uglify": "^6.0.4",
+    "through2": "^4.0.2"
   },
   "scripts": {
-    "build:js": "gulp build:js",
+		"build:js": "gulp build:js",
+		"build:module": "gulp build:module",
     "build:css": "gulp build:css",
     "build:all": "gulp build:all",
     "jest": "jest --clearCache && jest",

src/js/build/default/default.js

@@ -0,0 +1,14 @@
+import { default as Core } from '../../splide';
+import { COMPLETE } from '../../components';
+
+
+/**
+ * Exports the Splide class with all components.
+ *
+ * @since 1.0.0
+ */
+export default class Splide extends Core {
+	constructor( root, options ) {
+		super( root, options, COMPLETE );
+	}
+}

src/js/build/module/module.js

@@ -0,0 +1,16 @@
+import { default as Core } from '../../splide';
+import { COMPLETE } from '../../components';
+
+
+/**
+ * Exports the Splide class with all components.
+ *
+ * @since 1.0.0
+ */
+export class Splide extends Core {
+	constructor( root, options ) {
+		super( root, options, COMPLETE );
+	}
+}
+
+export { Splide as default };