The Splide JS is a lightweight, powerful and flexible JavaScript slider plugin that helps you to create multi item carousel. It comes with built-in touch support and accessibility ready features to render a powerful slider in HTML DOM.<\/p>\n
1. First of all, create a div element with a unique id and class name “splide”. Similarly, create another div element inside it with a class name “slide__track”, define ul tag inside it with a class name “splide__list”. Inside the list, place your images as follows:<\/p>\n
<div id=\"splide\" class=\"splide\">\r\n <div class=\"splide__track\">\r\n <ul class=\"splide__list\">\r\n <li class=\"splide__slide\"><img src=\"https:\/\/brandontran.com\/images\/cardboard-castle-10.jpg\"><\/li>\r\n <li class=\"splide__slide\"><img src=\"https:\/\/brandontran.com\/images\/cardboard-castle-5.jpg\"><\/li>\r\n <li class=\"splide__slide\"><img src=\"https:\/\/brandontran.com\/images\/cardboard-castle-4.jpg\"><\/li>\r\n <li class=\"splide__slide\"><img src=\"https:\/\/brandontran.com\/images\/cardboard-castle-3.jpg\"><\/li>\r\n <\/ul>\r\n <\/div>\r\n<\/div>\r\n<\/pre>\n2. Now, add the following CSS styles for the slider.<\/p>\n
.splide {\r\n padding: 20px 0;\r\n}\r\n\r\n.splide__slide img {\r\n display: block;\r\n width: 100%;\r\n border-radius: 8px;\r\n transition: transform 400ms;\r\n transform: scale(0.9);\r\n transform-origin: center center;\r\n}\r\n\r\n.splide__slide.is-active img {\r\n transform: scale(1);\r\n}\r\n\r\n.splide .splide__arrow {\r\n top: 0;\r\n bottom: 0;\r\n height: 100%;\r\n transform: none;\r\n border-radius: unset;\r\n width: 50px;\r\n opacity: 0.9;\r\n}\r\n.splide .splide__arrow svg {\r\n filter: invert(1);\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n.splide__arrow.splide__arrow--prev {\r\n left: 0;\r\n background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);\r\n}\r\n\r\n.splide__arrow.splide__arrow--next {\r\n right: 0;\r\n background: linear-gradient(270deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n background-color: black;\r\n color: #fff;\r\n text-align: center;\r\n font-family: Arial;\r\n}\r\n\r\na {\r\n color: #fff;\r\n padding: 4px 8px;\r\n}\r\n\r\nsection {\r\n max-width: 700px;\r\n margin: 0 auto;\r\n}\r\n\r\n.left {\r\n text-align: left;\r\n}<\/pre>\n3. Finally, add the following JavaScript splide JS function and done.<\/p>\n
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); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; } \/*! * Splide.js * Version : 4.1.4 * License : MIT * Copyright: 2022 Naotoshi Fujita *\/ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Splide = factory()); })(this, function () { 'use strict'; var MEDIA_PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\"; var CREATED = 1; var MOUNTED = 2; var IDLE = 3; var MOVING = 4; var SCROLLING = 5; var DRAGGING = 6; var DESTROYED = 7; var STATES = { CREATED: CREATED, MOUNTED: MOUNTED, IDLE: IDLE, MOVING: MOVING, SCROLLING: SCROLLING, DRAGGING: DRAGGING, DESTROYED: DESTROYED }; function empty(array) { array.length = 0; } function slice(arrayLike, start, end) { return Array.prototype.slice.call(arrayLike, start, end); } function apply(func) { return func.bind.apply(func, [null].concat(slice(arguments, 1))); } var nextTick = setTimeout; var noop = function noop() {}; function raf(func) { return requestAnimationFrame(func); } function typeOf(type, subject) { return typeof subject === type; } function isObject(subject) { return !isNull(subject) && typeOf(\"object\", subject); } var isArray = Array.isArray; var isFunction = apply(typeOf, \"function\"); var isString = apply(typeOf, \"string\"); var isUndefined = apply(typeOf, \"undefined\"); function isNull(subject) { return subject === null; } function isHTMLElement(subject) { try { return subject instanceof (subject.ownerDocument.defaultView || window).HTMLElement; } catch (e) { return false; } } function toArray(value) { return isArray(value) ? value : [value]; } function forEach(values, iteratee) { toArray(values).forEach(iteratee); } function includes(array, value) { return array.indexOf(value) > -1;\r\n }\r\n\r\n function push(array, items) {\r\n array.push.apply(array, toArray(items));\r\n return array;\r\n }\r\n\r\n function toggleClass(elm, classes, add) {\r\n if (elm) {\r\n forEach(classes, function (name) {\r\n if (name) {\r\n elm.classList[add ? \"add\" : \"remove\"](name);\r\n }\r\n });\r\n }\r\n }\r\n\r\n function addClass(elm, classes) {\r\n toggleClass(elm, isString(classes) ? classes.split(\" \") : classes, true);\r\n }\r\n\r\n function append(parent, children) {\r\n forEach(children, parent.appendChild.bind(parent));\r\n }\r\n\r\n function before(nodes, ref) {\r\n forEach(nodes, function (node) {\r\n var parent = (ref || node).parentNode;\r\n\r\n if (parent) {\r\n parent.insertBefore(node, ref);\r\n }\r\n });\r\n }\r\n\r\n function matches(elm, selector) {\r\n return isHTMLElement(elm) && (elm[\"msMatchesSelector\"] || elm.matches).call(elm, selector);\r\n }\r\n\r\n function children(parent, selector) {\r\n var children2 = parent ? slice(parent.children) : [];\r\n return selector ? children2.filter(function (child) {\r\n return matches(child, selector);\r\n }) : children2;\r\n }\r\n\r\n function child(parent, selector) {\r\n return selector ? children(parent, selector)[0] : parent.firstElementChild;\r\n }\r\n\r\n var ownKeys = Object.keys;\r\n\r\n function forOwn(object, iteratee, right) {\r\n if (object) {\r\n (right ? ownKeys(object).reverse() : ownKeys(object)).forEach(function (key) {\r\n key !== \"__proto__\" && iteratee(object[key], key);\r\n });\r\n }\r\n\r\n return object;\r\n }\r\n\r\n function assign(object) {\r\n slice(arguments, 1).forEach(function (source) {\r\n forOwn(source, function (value, key) {\r\n object[key] = source[key];\r\n });\r\n });\r\n return object;\r\n }\r\n\r\n function merge(object) {\r\n slice(arguments, 1).forEach(function (source) {\r\n forOwn(source, function (value, key) {\r\n if (isArray(value)) {\r\n object[key] = value.slice();\r\n } else if (isObject(value)) {\r\n object[key] = merge({}, isObject(object[key]) ? object[key] : {}, value);\r\n } else {\r\n object[key] = value;\r\n }\r\n });\r\n });\r\n return object;\r\n }\r\n\r\n function omit(object, keys) {\r\n forEach(keys || ownKeys(object), function (key) {\r\n delete object[key];\r\n });\r\n }\r\n\r\n function removeAttribute(elms, attrs) {\r\n forEach(elms, function (elm) {\r\n forEach(attrs, function (attr) {\r\n elm && elm.removeAttribute(attr);\r\n });\r\n });\r\n }\r\n\r\n function setAttribute(elms, attrs, value) {\r\n if (isObject(attrs)) {\r\n forOwn(attrs, function (value2, name) {\r\n setAttribute(elms, name, value2);\r\n });\r\n } else {\r\n forEach(elms, function (elm) {\r\n isNull(value) || value === \"\" ? removeAttribute(elm, attrs) : elm.setAttribute(attrs, String(value));\r\n });\r\n }\r\n }\r\n\r\n function create(tag, attrs, parent) {\r\n var elm = document.createElement(tag);\r\n\r\n if (attrs) {\r\n isString(attrs) ? addClass(elm, attrs) : setAttribute(elm, attrs);\r\n }\r\n\r\n parent && append(parent, elm);\r\n return elm;\r\n }\r\n\r\n function style(elm, prop, value) {\r\n if (isUndefined(value)) {\r\n return getComputedStyle(elm)[prop];\r\n }\r\n\r\n if (!isNull(value)) {\r\n elm.style[prop] = \"\" + value;\r\n }\r\n }\r\n\r\n function display(elm, display2) {\r\n style(elm, \"display\", display2);\r\n }\r\n\r\n function focus(elm) {\r\n elm[\"setActive\"] && elm[\"setActive\"]() || elm.focus({\r\n preventScroll: true\r\n });\r\n }\r\n\r\n function getAttribute(elm, attr) {\r\n return elm.getAttribute(attr);\r\n }\r\n\r\n function hasClass(elm, className) {\r\n return elm && elm.classList.contains(className);\r\n }\r\n\r\n function rect(target) {\r\n return target.getBoundingClientRect();\r\n }\r\n\r\n function remove(nodes) {\r\n forEach(nodes, function (node) {\r\n if (node && node.parentNode) {\r\n node.parentNode.removeChild(node);\r\n }\r\n });\r\n }\r\n\r\n function parseHtml(html) {\r\n return child(new DOMParser().parseFromString(html, \"text\/html\").body);\r\n }\r\n\r\n function prevent(e, stopPropagation) {\r\n e.preventDefault();\r\n\r\n if (stopPropagation) {\r\n e.stopPropagation();\r\n e.stopImmediatePropagation();\r\n }\r\n }\r\n\r\n function query(parent, selector) {\r\n return parent && parent.querySelector(selector);\r\n }\r\n\r\n function queryAll(parent, selector) {\r\n return selector ? slice(parent.querySelectorAll(selector)) : [];\r\n }\r\n\r\n function removeClass(elm, classes) {\r\n toggleClass(elm, classes, false);\r\n }\r\n\r\n function timeOf(e) {\r\n return e.timeStamp;\r\n }\r\n\r\n function unit(value) {\r\n return isString(value) ? value : value ? value + \"px\" : \"\";\r\n }\r\n\r\n var PROJECT_CODE = \"splide\";\r\n var DATA_ATTRIBUTE = \"data-\" + PROJECT_CODE;\r\n\r\n function assert(condition, message) {\r\n if (!condition) {\r\n throw new Error(\"[\" + PROJECT_CODE + \"] \" + (message || \"\"));\r\n }\r\n }\r\n\r\n var min = Math.min,\r\n max = Math.max,\r\n floor = Math.floor,\r\n ceil = Math.ceil,\r\n abs = Math.abs;\r\n\r\n function approximatelyEqual(x, y, epsilon) {\r\n return abs(x - y) < epsilon;\r\n }\r\n\r\n function between(number, x, y, exclusive) {\r\n var minimum = min(x, y);\r\n var maximum = max(x, y);\r\n return exclusive ? minimum < number && number < maximum : minimum <= number && number <= maximum; } function clamp(number, x, y) { var minimum = min(x, y); var maximum = max(x, y); return min(max(minimum, number), maximum); } function sign(x) { return +(x > 0) - +(x < 0);\r\n }\r\n\r\n function format(string, replacements) {\r\n forEach(replacements, function (replacement) {\r\n string = string.replace(\"%s\", \"\" + replacement);\r\n });\r\n return string;\r\n }\r\n\r\n function pad(number) {\r\n return number < 10 ? \"0\" + number : \"\" + number; } var ids = {}; function uniqueId(prefix) { return \"\" + prefix + pad(ids[prefix] = (ids[prefix] || 0) + 1); } function EventBinder() { var listeners = []; function bind(targets, events, callback, options) { forEachEvent(targets, events, function (target, event, namespace) { var isEventTarget = (\"addEventListener\" in target); var remover = isEventTarget ? target.removeEventListener.bind(target, event, callback, options) : target[\"removeListener\"].bind(target, callback); isEventTarget ? target.addEventListener(event, callback, options) : target[\"addListener\"](callback); listeners.push([target, event, namespace, callback, remover]); }); } function unbind(targets, events, callback) { forEachEvent(targets, events, function (target, event, namespace) { listeners = listeners.filter(function (listener) { if (listener[0] === target && listener[1] === event && listener[2] === namespace && (!callback || listener[3] === callback)) { listener[4](); return false; } return true; }); }); } function dispatch(target, type, detail) { var e; var bubbles = true; if (typeof CustomEvent === \"function\") { e = new CustomEvent(type, { bubbles: bubbles, detail: detail }); } else { e = document.createEvent(\"CustomEvent\"); e.initCustomEvent(type, bubbles, false, detail); } target.dispatchEvent(e); return e; } function forEachEvent(targets, events, iteratee) { forEach(targets, function (target) { target && forEach(events, function (events2) { events2.split(\" \").forEach(function (eventNS) { var fragment = eventNS.split(\".\"); iteratee(target, fragment[0], fragment[1]); }); }); }); } function destroy() { listeners.forEach(function (data) { data[4](); }); empty(listeners); } return { bind: bind, unbind: unbind, dispatch: dispatch, destroy: destroy }; } var EVENT_MOUNTED = \"mounted\"; var EVENT_READY = \"ready\"; var EVENT_MOVE = \"move\"; var EVENT_MOVED = \"moved\"; var EVENT_CLICK = \"click\"; var EVENT_ACTIVE = \"active\"; var EVENT_INACTIVE = \"inactive\"; var EVENT_VISIBLE = \"visible\"; var EVENT_HIDDEN = \"hidden\"; var EVENT_REFRESH = \"refresh\"; var EVENT_UPDATED = \"updated\"; var EVENT_RESIZE = \"resize\"; var EVENT_RESIZED = \"resized\"; var EVENT_DRAG = \"drag\"; var EVENT_DRAGGING = \"dragging\"; var EVENT_DRAGGED = \"dragged\"; var EVENT_SCROLL = \"scroll\"; var EVENT_SCROLLED = \"scrolled\"; var EVENT_OVERFLOW = \"overflow\"; var EVENT_DESTROY = \"destroy\"; var EVENT_ARROWS_MOUNTED = \"arrows:mounted\"; var EVENT_ARROWS_UPDATED = \"arrows:updated\"; var EVENT_PAGINATION_MOUNTED = \"pagination:mounted\"; var EVENT_PAGINATION_UPDATED = \"pagination:updated\"; var EVENT_NAVIGATION_MOUNTED = \"navigation:mounted\"; var EVENT_AUTOPLAY_PLAY = \"autoplay:play\"; var EVENT_AUTOPLAY_PLAYING = \"autoplay:playing\"; var EVENT_AUTOPLAY_PAUSE = \"autoplay:pause\"; var EVENT_LAZYLOAD_LOADED = \"lazyload:loaded\"; var EVENT_SLIDE_KEYDOWN = \"sk\"; var EVENT_SHIFTED = \"sh\"; var EVENT_END_INDEX_CHANGED = \"ei\"; function EventInterface(Splide2) { var bus = Splide2 ? Splide2.event.bus : document.createDocumentFragment(); var binder = EventBinder(); function on(events, callback) { binder.bind(bus, toArray(events).join(\" \"), function (e) { callback.apply(callback, isArray(e.detail) ? e.detail : []); }); } function emit(event) { binder.dispatch(bus, event, slice(arguments, 1)); } if (Splide2) { Splide2.event.on(EVENT_DESTROY, binder.destroy); } return assign(binder, { bus: bus, on: on, off: apply(binder.unbind, bus), emit: emit }); } function RequestInterval(interval, onInterval, onUpdate, limit) { var now = Date.now; var startTime; var rate = 0; var id; var paused = true; var count = 0; function update() { if (!paused) { rate = interval ? min((now() - startTime) \/ interval, 1) : 1; onUpdate && onUpdate(rate); if (rate >= 1) {\r\n onInterval();\r\n startTime = now();\r\n\r\n if (limit && ++count >= limit) {\r\n return pause();\r\n }\r\n }\r\n\r\n id = raf(update);\r\n }\r\n }\r\n\r\n function start(resume) {\r\n resume || cancel();\r\n startTime = now() - (resume ? rate * interval : 0);\r\n paused = false;\r\n id = raf(update);\r\n }\r\n\r\n function pause() {\r\n paused = true;\r\n }\r\n\r\n function rewind() {\r\n startTime = now();\r\n rate = 0;\r\n\r\n if (onUpdate) {\r\n onUpdate(rate);\r\n }\r\n }\r\n\r\n function cancel() {\r\n id && cancelAnimationFrame(id);\r\n rate = 0;\r\n id = 0;\r\n paused = true;\r\n }\r\n\r\n function set(time) {\r\n interval = time;\r\n }\r\n\r\n function isPaused() {\r\n return paused;\r\n }\r\n\r\n return {\r\n start: start,\r\n rewind: rewind,\r\n pause: pause,\r\n cancel: cancel,\r\n set: set,\r\n isPaused: isPaused\r\n };\r\n }\r\n\r\n function State(initialState) {\r\n var state = initialState;\r\n\r\n function set(value) {\r\n state = value;\r\n }\r\n\r\n function is(states) {\r\n return includes(toArray(states), state);\r\n }\r\n\r\n return {\r\n set: set,\r\n is: is\r\n };\r\n }\r\n\r\n function Throttle(func, duration) {\r\n var interval = RequestInterval(duration || 0, func, null, 1);\r\n return function () {\r\n interval.isPaused() && interval.start();\r\n };\r\n }\r\n\r\n function Media(Splide2, Components2, options) {\r\n var state = Splide2.state;\r\n var breakpoints = options.breakpoints || {};\r\n var reducedMotion = options.reducedMotion || {};\r\n var binder = EventBinder();\r\n var queries = [];\r\n\r\n function setup() {\r\n var isMin = options.mediaQuery === \"min\";\r\n ownKeys(breakpoints).sort(function (n, m) {\r\n return isMin ? +n - +m : +m - +n;\r\n }).forEach(function (key) {\r\n register(breakpoints[key], \"(\" + (isMin ? \"min\" : \"max\") + \"-width:\" + key + \"px)\");\r\n });\r\n register(reducedMotion, MEDIA_PREFERS_REDUCED_MOTION);\r\n update();\r\n }\r\n\r\n function destroy(completely) {\r\n if (completely) {\r\n binder.destroy();\r\n }\r\n }\r\n\r\n function register(options2, query) {\r\n var queryList = matchMedia(query);\r\n binder.bind(queryList, \"change\", update);\r\n queries.push([options2, queryList]);\r\n }\r\n\r\n function update() {\r\n var destroyed = state.is(DESTROYED);\r\n var direction = options.direction;\r\n var merged = queries.reduce(function (merged2, entry) {\r\n return merge(merged2, entry[1].matches ? entry[0] : {});\r\n }, {});\r\n omit(options);\r\n set(merged);\r\n\r\n if (options.destroy) {\r\n Splide2.destroy(options.destroy === \"completely\");\r\n } else if (destroyed) {\r\n destroy(true);\r\n Splide2.mount();\r\n } else {\r\n direction !== options.direction && Splide2.refresh();\r\n }\r\n }\r\n\r\n function reduce(enable) {\r\n if (matchMedia(MEDIA_PREFERS_REDUCED_MOTION).matches) {\r\n enable ? merge(options, reducedMotion) : omit(options, ownKeys(reducedMotion));\r\n }\r\n }\r\n\r\n function set(opts, base, notify) {\r\n merge(options, opts);\r\n base && merge(Object.getPrototypeOf(options), opts);\r\n\r\n if (notify || !state.is(CREATED)) {\r\n Splide2.emit(EVENT_UPDATED, options);\r\n }\r\n }\r\n\r\n return {\r\n setup: setup,\r\n destroy: destroy,\r\n reduce: reduce,\r\n set: set\r\n };\r\n }\r\n\r\n var ARROW = \"Arrow\";\r\n var ARROW_LEFT = ARROW + \"Left\";\r\n var ARROW_RIGHT = ARROW + \"Right\";\r\n var ARROW_UP = ARROW + \"Up\";\r\n var ARROW_DOWN = ARROW + \"Down\";\r\n var RTL = \"rtl\";\r\n var TTB = \"ttb\";\r\n var ORIENTATION_MAP = {\r\n width: [\"height\"],\r\n left: [\"top\", \"right\"],\r\n right: [\"bottom\", \"left\"],\r\n x: [\"y\"],\r\n X: [\"Y\"],\r\n Y: [\"X\"],\r\n ArrowLeft: [ARROW_UP, ARROW_RIGHT],\r\n ArrowRight: [ARROW_DOWN, ARROW_LEFT]\r\n };\r\n\r\n function Direction(Splide2, Components2, options) {\r\n function resolve(prop, axisOnly, direction) {\r\n direction = direction || options.direction;\r\n var index = direction === RTL && !axisOnly ? 1 : direction === TTB ? 0 : -1;\r\n return ORIENTATION_MAP[prop] && ORIENTATION_MAP[prop][index] || prop.replace(\/width|left|right\/i, function (match, offset) {\r\n var replacement = ORIENTATION_MAP[match.toLowerCase()][index] || match;\r\n return offset > 0 ? replacement.charAt(0).toUpperCase() + replacement.slice(1) : replacement;\r\n });\r\n }\r\n\r\n function orient(value) {\r\n return value * (options.direction === RTL ? 1 : -1);\r\n }\r\n\r\n return {\r\n resolve: resolve,\r\n orient: orient\r\n };\r\n }\r\n\r\n var ROLE = \"role\";\r\n var TAB_INDEX = \"tabindex\";\r\n var DISABLED = \"disabled\";\r\n var ARIA_PREFIX = \"aria-\";\r\n var ARIA_CONTROLS = ARIA_PREFIX + \"controls\";\r\n var ARIA_CURRENT = ARIA_PREFIX + \"current\";\r\n var ARIA_SELECTED = ARIA_PREFIX + \"selected\";\r\n var ARIA_LABEL = ARIA_PREFIX + \"label\";\r\n var ARIA_LABELLEDBY = ARIA_PREFIX + \"labelledby\";\r\n var ARIA_HIDDEN = ARIA_PREFIX + \"hidden\";\r\n var ARIA_ORIENTATION = ARIA_PREFIX + \"orientation\";\r\n var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + \"roledescription\";\r\n var ARIA_LIVE = ARIA_PREFIX + \"live\";\r\n var ARIA_BUSY = ARIA_PREFIX + \"busy\";\r\n var ARIA_ATOMIC = ARIA_PREFIX + \"atomic\";\r\n var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];\r\n var CLASS_PREFIX = PROJECT_CODE + \"__\";\r\n var STATUS_CLASS_PREFIX = \"is-\";\r\n var CLASS_ROOT = PROJECT_CODE;\r\n var CLASS_TRACK = CLASS_PREFIX + \"track\";\r\n var CLASS_LIST = CLASS_PREFIX + \"list\";\r\n var CLASS_SLIDE = CLASS_PREFIX + \"slide\";\r\n var CLASS_CLONE = CLASS_SLIDE + \"--clone\";\r\n var CLASS_CONTAINER = CLASS_SLIDE + \"__container\";\r\n var CLASS_ARROWS = CLASS_PREFIX + \"arrows\";\r\n var CLASS_ARROW = CLASS_PREFIX + \"arrow\";\r\n var CLASS_ARROW_PREV = CLASS_ARROW + \"--prev\";\r\n var CLASS_ARROW_NEXT = CLASS_ARROW + \"--next\";\r\n var CLASS_PAGINATION = CLASS_PREFIX + \"pagination\";\r\n var CLASS_PAGINATION_PAGE = CLASS_PAGINATION + \"__page\";\r\n var CLASS_PROGRESS = CLASS_PREFIX + \"progress\";\r\n var CLASS_PROGRESS_BAR = CLASS_PROGRESS + \"__bar\";\r\n var CLASS_TOGGLE = CLASS_PREFIX + \"toggle\";\r\n var CLASS_SPINNER = CLASS_PREFIX + \"spinner\";\r\n var CLASS_SR = CLASS_PREFIX + \"sr\";\r\n var CLASS_INITIALIZED = STATUS_CLASS_PREFIX + \"initialized\";\r\n var CLASS_ACTIVE = STATUS_CLASS_PREFIX + \"active\";\r\n var CLASS_PREV = STATUS_CLASS_PREFIX + \"prev\";\r\n var CLASS_NEXT = STATUS_CLASS_PREFIX + \"next\";\r\n var CLASS_VISIBLE = STATUS_CLASS_PREFIX + \"visible\";\r\n var CLASS_LOADING = STATUS_CLASS_PREFIX + \"loading\";\r\n var CLASS_FOCUS_IN = STATUS_CLASS_PREFIX + \"focus-in\";\r\n var CLASS_OVERFLOW = STATUS_CLASS_PREFIX + \"overflow\";\r\n var STATUS_CLASSES = [CLASS_ACTIVE, CLASS_VISIBLE, CLASS_PREV, CLASS_NEXT, CLASS_LOADING, CLASS_FOCUS_IN, CLASS_OVERFLOW];\r\n var CLASSES = {\r\n slide: CLASS_SLIDE,\r\n clone: CLASS_CLONE,\r\n arrows: CLASS_ARROWS,\r\n arrow: CLASS_ARROW,\r\n prev: CLASS_ARROW_PREV,\r\n next: CLASS_ARROW_NEXT,\r\n pagination: CLASS_PAGINATION,\r\n page: CLASS_PAGINATION_PAGE,\r\n spinner: CLASS_SPINNER\r\n };\r\n\r\n function closest(from, selector) {\r\n if (isFunction(from.closest)) {\r\n return from.closest(selector);\r\n }\r\n\r\n var elm = from;\r\n\r\n while (elm && elm.nodeType === 1) {\r\n if (matches(elm, selector)) {\r\n break;\r\n }\r\n\r\n elm = elm.parentElement;\r\n }\r\n\r\n return elm;\r\n }\r\n\r\n var FRICTION = 5;\r\n var LOG_INTERVAL = 200;\r\n var POINTER_DOWN_EVENTS = \"touchstart mousedown\";\r\n var POINTER_MOVE_EVENTS = \"touchmove mousemove\";\r\n var POINTER_UP_EVENTS = \"touchend touchcancel mouseup click\";\r\n\r\n function Elements(Splide2, Components2, options) {\r\n var _EventInterface = EventInterface(Splide2),\r\n on = _EventInterface.on,\r\n bind = _EventInterface.bind;\r\n\r\n var root = Splide2.root;\r\n var i18n = options.i18n;\r\n var elements = {};\r\n var slides = [];\r\n var rootClasses = [];\r\n var trackClasses = [];\r\n var track;\r\n var list;\r\n var isUsingKey;\r\n\r\n function setup() {\r\n collect();\r\n init();\r\n update();\r\n }\r\n\r\n function mount() {\r\n on(EVENT_REFRESH, destroy);\r\n on(EVENT_REFRESH, setup);\r\n on(EVENT_UPDATED, update);\r\n bind(document, POINTER_DOWN_EVENTS + \" keydown\", function (e) {\r\n isUsingKey = e.type === \"keydown\";\r\n }, {\r\n capture: true\r\n });\r\n bind(root, \"focusin\", function () {\r\n toggleClass(root, CLASS_FOCUS_IN, !!isUsingKey);\r\n });\r\n }\r\n\r\n function destroy(completely) {\r\n var attrs = ALL_ATTRIBUTES.concat(\"style\");\r\n empty(slides);\r\n removeClass(root, rootClasses);\r\n removeClass(track, trackClasses);\r\n removeAttribute([track, list], attrs);\r\n removeAttribute(root, completely ? attrs : [\"style\", ARIA_ROLEDESCRIPTION]);\r\n }\r\n\r\n function update() {\r\n removeClass(root, rootClasses);\r\n removeClass(track, trackClasses);\r\n rootClasses = getClasses(CLASS_ROOT);\r\n trackClasses = getClasses(CLASS_TRACK);\r\n addClass(root, rootClasses);\r\n addClass(track, trackClasses);\r\n setAttribute(root, ARIA_LABEL, options.label);\r\n setAttribute(root, ARIA_LABELLEDBY, options.labelledby);\r\n }\r\n\r\n function collect() {\r\n track = find(\".\" + CLASS_TRACK);\r\n list = child(track, \".\" + CLASS_LIST);\r\n assert(track && list, \"A track\/list element is missing.\");\r\n push(slides, children(list, \".\" + CLASS_SLIDE + \":not(.\" + CLASS_CLONE + \")\"));\r\n forOwn({\r\n arrows: CLASS_ARROWS,\r\n pagination: CLASS_PAGINATION,\r\n prev: CLASS_ARROW_PREV,\r\n next: CLASS_ARROW_NEXT,\r\n bar: CLASS_PROGRESS_BAR,\r\n toggle: CLASS_TOGGLE\r\n }, function (className, key) {\r\n elements[key] = find(\".\" + className);\r\n });\r\n assign(elements, {\r\n root: root,\r\n track: track,\r\n list: list,\r\n slides: slides\r\n });\r\n }\r\n\r\n function init() {\r\n var id = root.id || uniqueId(PROJECT_CODE);\r\n var role = options.role;\r\n root.id = id;\r\n track.id = track.id || id + \"-track\";\r\n list.id = list.id || id + \"-list\";\r\n\r\n if (!getAttribute(root, ROLE) && root.tagName !== \"SECTION\" && role) {\r\n setAttribute(root, ROLE, role);\r\n }\r\n\r\n setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);\r\n setAttribute(list, ROLE, \"presentation\");\r\n }\r\n\r\n function find(selector) {\r\n var elm = query(root, selector);\r\n return elm && closest(elm, \".\" + CLASS_ROOT) === root ? elm : void 0;\r\n }\r\n\r\n function getClasses(base) {\r\n return [base + \"--\" + options.type, base + \"--\" + options.direction, options.drag && base + \"--draggable\", options.isNavigation && base + \"--nav\", base === CLASS_ROOT && CLASS_ACTIVE];\r\n }\r\n\r\n return assign(elements, {\r\n setup: setup,\r\n mount: mount,\r\n destroy: destroy\r\n });\r\n }\r\n\r\n var SLIDE = \"slide\";\r\n var LOOP = \"loop\";\r\n var FADE = \"fade\";\r\n\r\n function Slide$1(Splide2, index, slideIndex, slide) {\r\n var event = EventInterface(Splide2);\r\n var on = event.on,\r\n emit = event.emit,\r\n bind = event.bind;\r\n var Components = Splide2.Components,\r\n root = Splide2.root,\r\n options = Splide2.options;\r\n var isNavigation = options.isNavigation,\r\n updateOnMove = options.updateOnMove,\r\n i18n = options.i18n,\r\n pagination = options.pagination,\r\n slideFocus = options.slideFocus;\r\n var resolve = Components.Direction.resolve;\r\n var styles = getAttribute(slide, \"style\");\r\n var label = getAttribute(slide, ARIA_LABEL);\r\n var isClone = slideIndex > -1;\r\n var container = child(slide, \".\" + CLASS_CONTAINER);\r\n var destroyed;\r\n\r\n function mount() {\r\n if (!isClone) {\r\n slide.id = root.id + \"-slide\" + pad(index + 1);\r\n setAttribute(slide, ROLE, pagination ? \"tabpanel\" : \"group\");\r\n setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);\r\n setAttribute(slide, ARIA_LABEL, label || format(i18n.slideLabel, [index + 1, Splide2.length]));\r\n }\r\n\r\n listen();\r\n }\r\n\r\n function listen() {\r\n bind(slide, \"click\", apply(emit, EVENT_CLICK, self));\r\n bind(slide, \"keydown\", apply(emit, EVENT_SLIDE_KEYDOWN, self));\r\n on([EVENT_MOVED, EVENT_SHIFTED, EVENT_SCROLLED], update);\r\n on(EVENT_NAVIGATION_MOUNTED, initNavigation);\r\n\r\n if (updateOnMove) {\r\n on(EVENT_MOVE, onMove);\r\n }\r\n }\r\n\r\n function destroy() {\r\n destroyed = true;\r\n event.destroy();\r\n removeClass(slide, STATUS_CLASSES);\r\n removeAttribute(slide, ALL_ATTRIBUTES);\r\n setAttribute(slide, \"style\", styles);\r\n setAttribute(slide, ARIA_LABEL, label || \"\");\r\n }\r\n\r\n function initNavigation() {\r\n var controls = Splide2.splides.map(function (target) {\r\n var Slide2 = target.splide.Components.Slides.getAt(index);\r\n return Slide2 ? Slide2.slide.id : \"\";\r\n }).join(\" \");\r\n setAttribute(slide, ARIA_LABEL, format(i18n.slideX, (isClone ? slideIndex : index) + 1));\r\n setAttribute(slide, ARIA_CONTROLS, controls);\r\n setAttribute(slide, ROLE, slideFocus ? \"button\" : \"\");\r\n slideFocus && removeAttribute(slide, ARIA_ROLEDESCRIPTION);\r\n }\r\n\r\n function onMove() {\r\n if (!destroyed) {\r\n update();\r\n }\r\n }\r\n\r\n function update() {\r\n if (!destroyed) {\r\n var curr = Splide2.index;\r\n updateActivity();\r\n updateVisibility();\r\n toggleClass(slide, CLASS_PREV, index === curr - 1);\r\n toggleClass(slide, CLASS_NEXT, index === curr + 1);\r\n }\r\n }\r\n\r\n function updateActivity() {\r\n var active = isActive();\r\n\r\n if (active !== hasClass(slide, CLASS_ACTIVE)) {\r\n toggleClass(slide, CLASS_ACTIVE, active);\r\n setAttribute(slide, ARIA_CURRENT, isNavigation && active || \"\");\r\n emit(active ? EVENT_ACTIVE : EVENT_INACTIVE, self);\r\n }\r\n }\r\n\r\n function updateVisibility() {\r\n var visible = isVisible();\r\n var hidden = !visible && (!isActive() || isClone);\r\n\r\n if (!Splide2.state.is([MOVING, SCROLLING])) {\r\n setAttribute(slide, ARIA_HIDDEN, hidden || \"\");\r\n }\r\n\r\n setAttribute(queryAll(slide, options.focusableNodes || \"\"), TAB_INDEX, hidden ? -1 : \"\");\r\n\r\n if (slideFocus) {\r\n setAttribute(slide, TAB_INDEX, hidden ? -1 : 0);\r\n }\r\n\r\n if (visible !== hasClass(slide, CLASS_VISIBLE)) {\r\n toggleClass(slide, CLASS_VISIBLE, visible);\r\n emit(visible ? EVENT_VISIBLE : EVENT_HIDDEN, self);\r\n }\r\n\r\n if (!visible && document.activeElement === slide) {\r\n var Slide2 = Components.Slides.getAt(Splide2.index);\r\n Slide2 && focus(Slide2.slide);\r\n }\r\n }\r\n\r\n function style$1(prop, value, useContainer) {\r\n style(useContainer && container || slide, prop, value);\r\n }\r\n\r\n function isActive() {\r\n var curr = Splide2.index;\r\n return curr === index || options.cloneStatus && curr === slideIndex;\r\n }\r\n\r\n function isVisible() {\r\n if (Splide2.is(FADE)) {\r\n return isActive();\r\n }\r\n\r\n var trackRect = rect(Components.Elements.track);\r\n var slideRect = rect(slide);\r\n var left = resolve(\"left\", true);\r\n var right = resolve(\"right\", true);\r\n return floor(trackRect[left]) <= ceil(slideRect[left]) && floor(slideRect[right]) <= ceil(trackRect[right]);\r\n }\r\n\r\n function isWithin(from, distance) {\r\n var diff = abs(from - index);\r\n\r\n if (!isClone && (options.rewind || Splide2.is(LOOP))) {\r\n diff = min(diff, Splide2.length - diff);\r\n }\r\n\r\n return diff <= distance; } var self = { index: index, slideIndex: slideIndex, slide: slide, container: container, isClone: isClone, mount: mount, destroy: destroy, update: update, style: style$1, isWithin: isWithin }; return self; } function Slides(Splide2, Components2, options) { var _EventInterface2 = EventInterface(Splide2), on = _EventInterface2.on, emit = _EventInterface2.emit, bind = _EventInterface2.bind; var _Components2$Elements = Components2.Elements, slides = _Components2$Elements.slides, list = _Components2$Elements.list; var Slides2 = []; function mount() { init(); on(EVENT_REFRESH, destroy); on(EVENT_REFRESH, init); } function init() { slides.forEach(function (slide, index) { register(slide, index, -1); }); } function destroy() { forEach$1(function (Slide2) { Slide2.destroy(); }); empty(Slides2); } function update() { forEach$1(function (Slide2) { Slide2.update(); }); } function register(slide, index, slideIndex) { var object = Slide$1(Splide2, index, slideIndex, slide); object.mount(); Slides2.push(object); Slides2.sort(function (Slide1, Slide2) { return Slide1.index - Slide2.index; }); } function get(excludeClones) { return excludeClones ? filter(function (Slide2) { return !Slide2.isClone; }) : Slides2; } function getIn(page) { var Controller = Components2.Controller; var index = Controller.toIndex(page); var max = Controller.hasFocus() ? 1 : options.perPage; return filter(function (Slide2) { return between(Slide2.index, index, index + max - 1); }); } function getAt(index) { return filter(index)[0]; } function add(items, index) { forEach(items, function (slide) { if (isString(slide)) { slide = parseHtml(slide); } if (isHTMLElement(slide)) { var ref = slides[index]; ref ? before(slide, ref) : append(list, slide); addClass(slide, options.classes.slide); observeImages(slide, apply(emit, EVENT_RESIZE)); } }); emit(EVENT_REFRESH); } function remove$1(matcher) { remove(filter(matcher).map(function (Slide2) { return Slide2.slide; })); emit(EVENT_REFRESH); } function forEach$1(iteratee, excludeClones) { get(excludeClones).forEach(iteratee); } function filter(matcher) { return Slides2.filter(isFunction(matcher) ? matcher : function (Slide2) { return isString(matcher) ? matches(Slide2.slide, matcher) : includes(toArray(matcher), Slide2.index); }); } function style(prop, value, useContainer) { forEach$1(function (Slide2) { Slide2.style(prop, value, useContainer); }); } function observeImages(elm, callback) { var images = queryAll(elm, \"img\"); var length = images.length; if (length) { images.forEach(function (img) { bind(img, \"load error\", function () { if (! --length) { callback(); } }); }); } else { callback(); } } function getLength(excludeClones) { return excludeClones ? slides.length : Slides2.length; } function isEnough() { return Slides2.length > options.perPage;\r\n }\r\n\r\n return {\r\n mount: mount,\r\n destroy: destroy,\r\n update: update,\r\n register: register,\r\n get: get,\r\n getIn: getIn,\r\n getAt: getAt,\r\n add: add,\r\n remove: remove$1,\r\n forEach: forEach$1,\r\n filter: filter,\r\n style: style,\r\n getLength: getLength,\r\n isEnough: isEnough\r\n };\r\n }\r\n\r\n function Layout(Splide2, Components2, options) {\r\n var _EventInterface3 = EventInterface(Splide2),\r\n on = _EventInterface3.on,\r\n bind = _EventInterface3.bind,\r\n emit = _EventInterface3.emit;\r\n\r\n var Slides = Components2.Slides;\r\n var resolve = Components2.Direction.resolve;\r\n var _Components2$Elements2 = Components2.Elements,\r\n root = _Components2$Elements2.root,\r\n track = _Components2$Elements2.track,\r\n list = _Components2$Elements2.list;\r\n var getAt = Slides.getAt,\r\n styleSlides = Slides.style;\r\n var vertical;\r\n var rootRect;\r\n var overflow;\r\n\r\n function mount() {\r\n init();\r\n bind(window, \"resize load\", Throttle(apply(emit, EVENT_RESIZE)));\r\n on([EVENT_UPDATED, EVENT_REFRESH], init);\r\n on(EVENT_RESIZE, resize);\r\n }\r\n\r\n function init() {\r\n vertical = options.direction === TTB;\r\n style(root, \"maxWidth\", unit(options.width));\r\n style(track, resolve(\"paddingLeft\"), cssPadding(false));\r\n style(track, resolve(\"paddingRight\"), cssPadding(true));\r\n resize(true);\r\n }\r\n\r\n function resize(force) {\r\n var newRect = rect(root);\r\n\r\n if (force || rootRect.width !== newRect.width || rootRect.height !== newRect.height) {\r\n style(track, \"height\", cssTrackHeight());\r\n styleSlides(resolve(\"marginRight\"), unit(options.gap));\r\n styleSlides(\"width\", cssSlideWidth());\r\n styleSlides(\"height\", cssSlideHeight(), true);\r\n rootRect = newRect;\r\n emit(EVENT_RESIZED);\r\n\r\n if (overflow !== (overflow = isOverflow())) {\r\n toggleClass(root, CLASS_OVERFLOW, overflow);\r\n emit(EVENT_OVERFLOW, overflow);\r\n }\r\n }\r\n }\r\n\r\n function cssPadding(right) {\r\n var padding = options.padding;\r\n var prop = resolve(right ? \"right\" : \"left\");\r\n return padding && unit(padding[prop] || (isObject(padding) ? 0 : padding)) || \"0px\";\r\n }\r\n\r\n function cssTrackHeight() {\r\n var height = \"\";\r\n\r\n if (vertical) {\r\n height = cssHeight();\r\n assert(height, \"height or heightRatio is missing.\");\r\n height = \"calc(\" + height + \" - \" + cssPadding(false) + \" - \" + cssPadding(true) + \")\";\r\n }\r\n\r\n return height;\r\n }\r\n\r\n function cssHeight() {\r\n return unit(options.height || rect(list).width * options.heightRatio);\r\n }\r\n\r\n function cssSlideWidth() {\r\n return options.autoWidth ? null : unit(options.fixedWidth) || (vertical ? \"\" : cssSlideSize());\r\n }\r\n\r\n function cssSlideHeight() {\r\n return unit(options.fixedHeight) || (vertical ? options.autoHeight ? null : cssSlideSize() : cssHeight());\r\n }\r\n\r\n function cssSlideSize() {\r\n var gap = unit(options.gap);\r\n return \"calc((100%\" + (gap && \" + \" + gap) + \")\/\" + (options.perPage || 1) + (gap && \" - \" + gap) + \")\";\r\n }\r\n\r\n function listSize() {\r\n return rect(list)[resolve(\"width\")];\r\n }\r\n\r\n function slideSize(index, withoutGap) {\r\n var Slide = getAt(index || 0);\r\n return Slide ? rect(Slide.slide)[resolve(\"width\")] + (withoutGap ? 0 : getGap()) : 0;\r\n }\r\n\r\n function totalSize(index, withoutGap) {\r\n var Slide = getAt(index);\r\n\r\n if (Slide) {\r\n var right = rect(Slide.slide)[resolve(\"right\")];\r\n var left = rect(list)[resolve(\"left\")];\r\n return abs(right - left) + (withoutGap ? 0 : getGap());\r\n }\r\n\r\n return 0;\r\n }\r\n\r\n function sliderSize(withoutGap) {\r\n return totalSize(Splide2.length - 1) - totalSize(0) + slideSize(0, withoutGap);\r\n }\r\n\r\n function getGap() {\r\n var Slide = getAt(0);\r\n return Slide && parseFloat(style(Slide.slide, resolve(\"marginRight\"))) || 0;\r\n }\r\n\r\n function getPadding(right) {\r\n return parseFloat(style(track, resolve(\"padding\" + (right ? \"Right\" : \"Left\")))) || 0;\r\n }\r\n\r\n function isOverflow() {\r\n return Splide2.is(FADE) || sliderSize(true) > listSize();\r\n }\r\n\r\n return {\r\n mount: mount,\r\n resize: resize,\r\n listSize: listSize,\r\n slideSize: slideSize,\r\n sliderSize: sliderSize,\r\n totalSize: totalSize,\r\n getPadding: getPadding,\r\n isOverflow: isOverflow\r\n };\r\n }\r\n\r\n var MULTIPLIER = 2;\r\n\r\n function Clones(Splide2, Components2, options) {\r\n var event = EventInterface(Splide2);\r\n var on = event.on;\r\n var Elements = Components2.Elements,\r\n Slides = Components2.Slides;\r\n var resolve = Components2.Direction.resolve;\r\n var clones = [];\r\n var cloneCount;\r\n\r\n function mount() {\r\n on(EVENT_REFRESH, remount);\r\n on([EVENT_UPDATED, EVENT_RESIZE], observe);\r\n\r\n if (cloneCount = computeCloneCount()) {\r\n generate(cloneCount);\r\n Components2.Layout.resize(true);\r\n }\r\n }\r\n\r\n function remount() {\r\n destroy();\r\n mount();\r\n }\r\n\r\n function destroy() {\r\n remove(clones);\r\n empty(clones);\r\n event.destroy();\r\n }\r\n\r\n function observe() {\r\n var count = computeCloneCount();\r\n\r\n if (cloneCount !== count) {\r\n if (cloneCount < count || !count) {\r\n event.emit(EVENT_REFRESH);\r\n }\r\n }\r\n }\r\n\r\n function generate(count) {\r\n var slides = Slides.get().slice();\r\n var length = slides.length;\r\n\r\n if (length) {\r\n while (slides.length < count) {\r\n push(slides, slides);\r\n }\r\n\r\n push(slides.slice(-count), slides.slice(0, count)).forEach(function (Slide, index) {\r\n var isHead = index < count; var clone = cloneDeep(Slide.slide, index); isHead ? before(clone, slides[0].slide) : append(Elements.list, clone); push(clones, clone); Slides.register(clone, index - count + (isHead ? 0 : length), Slide.index); }); } } function cloneDeep(elm, index) { var clone = elm.cloneNode(true); addClass(clone, options.classes.clone); clone.id = Splide2.root.id + \"-clone\" + pad(index + 1); return clone; } function computeCloneCount() { var clones2 = options.clones; if (!Splide2.is(LOOP)) { clones2 = 0; } else if (isUndefined(clones2)) { var fixedSize = options[resolve(\"fixedWidth\")] && Components2.Layout.slideSize(0); var fixedCount = fixedSize && ceil(rect(Elements.track)[resolve(\"width\")] \/ fixedSize); clones2 = fixedCount || options[resolve(\"autoWidth\")] && Splide2.length || options.perPage * MULTIPLIER; } return clones2; } return { mount: mount, destroy: destroy }; } function Move(Splide2, Components2, options) { var _EventInterface4 = EventInterface(Splide2), on = _EventInterface4.on, emit = _EventInterface4.emit; var set = Splide2.state.set; var _Components2$Layout = Components2.Layout, slideSize = _Components2$Layout.slideSize, getPadding = _Components2$Layout.getPadding, totalSize = _Components2$Layout.totalSize, listSize = _Components2$Layout.listSize, sliderSize = _Components2$Layout.sliderSize; var _Components2$Directio = Components2.Direction, resolve = _Components2$Directio.resolve, orient = _Components2$Directio.orient; var _Components2$Elements3 = Components2.Elements, list = _Components2$Elements3.list, track = _Components2$Elements3.track; var Transition; function mount() { Transition = Components2.Transition; on([EVENT_MOUNTED, EVENT_RESIZED, EVENT_UPDATED, EVENT_REFRESH], reposition); } function reposition() { if (!Components2.Controller.isBusy()) { Components2.Scroll.cancel(); jump(Splide2.index); Components2.Slides.update(); } } function move(dest, index, prev, callback) { if (dest !== index && canShift(dest > prev)) {\r\n cancel();\r\n translate(shift(getPosition(), dest > prev), true);\r\n }\r\n\r\n set(MOVING);\r\n emit(EVENT_MOVE, index, prev, dest);\r\n Transition.start(index, function () {\r\n set(IDLE);\r\n emit(EVENT_MOVED, index, prev, dest);\r\n callback && callback();\r\n });\r\n }\r\n\r\n function jump(index) {\r\n translate(toPosition(index, true));\r\n }\r\n\r\n function translate(position, preventLoop) {\r\n if (!Splide2.is(FADE)) {\r\n var destination = preventLoop ? position : loop(position);\r\n style(list, \"transform\", \"translate\" + resolve(\"X\") + \"(\" + destination + \"px)\");\r\n position !== destination && emit(EVENT_SHIFTED);\r\n }\r\n }\r\n\r\n function loop(position) {\r\n if (Splide2.is(LOOP)) {\r\n var index = toIndex(position);\r\n var exceededMax = index > Components2.Controller.getEnd();\r\n var exceededMin = index < 0;\r\n\r\n if (exceededMin || exceededMax) {\r\n position = shift(position, exceededMax);\r\n }\r\n }\r\n\r\n return position;\r\n }\r\n\r\n function shift(position, backwards) {\r\n var excess = position - getLimit(backwards);\r\n var size = sliderSize();\r\n position -= orient(size * (ceil(abs(excess) \/ size) || 1)) * (backwards ? 1 : -1);\r\n return position;\r\n }\r\n\r\n function cancel() {\r\n translate(getPosition(), true);\r\n Transition.cancel();\r\n }\r\n\r\n function toIndex(position) {\r\n var Slides = Components2.Slides.get();\r\n var index = 0;\r\n var minDistance = Infinity;\r\n\r\n for (var i = 0; i < Slides.length; i++) {\r\n var slideIndex = Slides[i].index;\r\n var distance = abs(toPosition(slideIndex, true) - position);\r\n\r\n if (distance <= minDistance) { minDistance = distance; index = slideIndex; } else { break; } } return index; } function toPosition(index, trimming) { var position = orient(totalSize(index - 1) - offset(index)); return trimming ? trim(position) : position; } function getPosition() { var left = resolve(\"left\"); return rect(list)[left] - rect(track)[left] + orient(getPadding(false)); } function trim(position) { if (options.trimSpace && Splide2.is(SLIDE)) { position = clamp(position, 0, orient(sliderSize(true) - listSize())); } return position; } function offset(index) { var focus = options.focus; return focus === \"center\" ? (listSize() - slideSize(index, true)) \/ 2 : +focus * slideSize(index) || 0; } function getLimit(max) { return toPosition(max ? Components2.Controller.getEnd() : 0, !!options.trimSpace); } function canShift(backwards) { var shifted = orient(shift(getPosition(), backwards)); return backwards ? shifted >= 0 : shifted <= list[resolve(\"scrollWidth\")] - rect(track)[resolve(\"width\")];\r\n }\r\n\r\n function exceededLimit(max, position) {\r\n position = isUndefined(position) ? getPosition() : position;\r\n var exceededMin = max !== true && orient(position) < orient(getLimit(false)); var exceededMax = max !== false && orient(position) > orient(getLimit(true));\r\n return exceededMin || exceededMax;\r\n }\r\n\r\n return {\r\n mount: mount,\r\n move: move,\r\n jump: jump,\r\n translate: translate,\r\n shift: shift,\r\n cancel: cancel,\r\n toIndex: toIndex,\r\n toPosition: toPosition,\r\n getPosition: getPosition,\r\n getLimit: getLimit,\r\n exceededLimit: exceededLimit,\r\n reposition: reposition\r\n };\r\n }\r\n\r\n function Controller(Splide2, Components2, options) {\r\n var _EventInterface5 = EventInterface(Splide2),\r\n on = _EventInterface5.on,\r\n emit = _EventInterface5.emit;\r\n\r\n var Move = Components2.Move;\r\n var getPosition = Move.getPosition,\r\n getLimit = Move.getLimit,\r\n toPosition = Move.toPosition;\r\n var _Components2$Slides = Components2.Slides,\r\n isEnough = _Components2$Slides.isEnough,\r\n getLength = _Components2$Slides.getLength;\r\n var omitEnd = options.omitEnd;\r\n var isLoop = Splide2.is(LOOP);\r\n var isSlide = Splide2.is(SLIDE);\r\n var getNext = apply(getAdjacent, false);\r\n var getPrev = apply(getAdjacent, true);\r\n var currIndex = options.start || 0;\r\n var endIndex;\r\n var prevIndex = currIndex;\r\n var slideCount;\r\n var perMove;\r\n var perPage;\r\n\r\n function mount() {\r\n init();\r\n on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], init);\r\n on(EVENT_RESIZED, onResized);\r\n }\r\n\r\n function init() {\r\n slideCount = getLength(true);\r\n perMove = options.perMove;\r\n perPage = options.perPage;\r\n endIndex = getEnd();\r\n var index = clamp(currIndex, 0, omitEnd ? endIndex : slideCount - 1);\r\n\r\n if (index !== currIndex) {\r\n currIndex = index;\r\n Move.reposition();\r\n }\r\n }\r\n\r\n function onResized() {\r\n if (endIndex !== getEnd()) {\r\n emit(EVENT_END_INDEX_CHANGED);\r\n }\r\n }\r\n\r\n function go(control, allowSameIndex, callback) {\r\n if (!isBusy()) {\r\n var dest = parse(control);\r\n var index = loop(dest);\r\n\r\n if (index > -1 && (allowSameIndex || index !== currIndex)) {\r\n setIndex(index);\r\n Move.move(dest, index, prevIndex, callback);\r\n }\r\n }\r\n }\r\n\r\n function scroll(destination, duration, snap, callback) {\r\n Components2.Scroll.scroll(destination, duration, snap, function () {\r\n var index = loop(Move.toIndex(getPosition()));\r\n setIndex(omitEnd ? min(index, endIndex) : index);\r\n callback && callback();\r\n });\r\n }\r\n\r\n function parse(control) {\r\n var index = currIndex;\r\n\r\n if (isString(control)) {\r\n var _ref = control.match(\/([+\\-<>])(\\d+)?\/) || [],\r\n indicator = _ref[1],\r\n number = _ref[2];\r\n\r\n if (indicator === \"+\" || indicator === \"-\") {\r\n index = computeDestIndex(currIndex + +(\"\" + indicator + (+number || 1)), currIndex);\r\n } else if (indicator === \">\") {\r\n index = number ? toIndex(+number) : getNext(true);\r\n } else if (indicator === \"<\") {\r\n index = getPrev(true);\r\n }\r\n } else {\r\n index = isLoop ? control : clamp(control, 0, endIndex);\r\n }\r\n\r\n return index;\r\n }\r\n\r\n function getAdjacent(prev, destination) {\r\n var number = perMove || (hasFocus() ? 1 : perPage);\r\n var dest = computeDestIndex(currIndex + number * (prev ? -1 : 1), currIndex, !(perMove || hasFocus()));\r\n\r\n if (dest === -1 && isSlide) {\r\n if (!approximatelyEqual(getPosition(), getLimit(!prev), 1)) {\r\n return prev ? 0 : endIndex;\r\n }\r\n }\r\n\r\n return destination ? dest : loop(dest);\r\n }\r\n\r\n function computeDestIndex(dest, from, snapPage) {\r\n if (isEnough() || hasFocus()) {\r\n var index = computeMovableDestIndex(dest);\r\n\r\n if (index !== dest) {\r\n from = dest;\r\n dest = index;\r\n snapPage = false;\r\n }\r\n\r\n if (dest < 0 || dest > endIndex) {\r\n if (!perMove && (between(0, dest, from, true) || between(endIndex, from, dest, true))) {\r\n dest = toIndex(toPage(dest));\r\n } else {\r\n if (isLoop) {\r\n dest = snapPage ? dest < 0 ? -(slideCount % perPage || perPage) : slideCount : dest;\r\n } else if (options.rewind) {\r\n dest = dest < 0 ? endIndex : 0;\r\n } else {\r\n dest = -1;\r\n }\r\n }\r\n } else {\r\n if (snapPage && dest !== from) {\r\n dest = toIndex(toPage(from) + (dest < from ? -1 : 1));\r\n }\r\n }\r\n } else {\r\n dest = -1;\r\n }\r\n\r\n return dest;\r\n }\r\n\r\n function computeMovableDestIndex(dest) {\r\n if (isSlide && options.trimSpace === \"move\" && dest !== currIndex) {\r\n var position = getPosition();\r\n\r\n while (position === toPosition(dest, true) && between(dest, 0, Splide2.length - 1, !options.rewind)) {\r\n dest < currIndex ? --dest : ++dest; } } return dest; } function loop(index) { return isLoop ? (index + slideCount) % slideCount || 0 : index; } function getEnd() { var end = slideCount - (hasFocus() || isLoop && perMove ? 1 : perPage); while (omitEnd && end-- > 0) {\r\n if (toPosition(slideCount - 1, true) !== toPosition(end, true)) {\r\n end++;\r\n break;\r\n }\r\n }\r\n\r\n return clamp(end, 0, slideCount - 1);\r\n }\r\n\r\n function toIndex(page) {\r\n return clamp(hasFocus() ? page : perPage * page, 0, endIndex);\r\n }\r\n\r\n function toPage(index) {\r\n return hasFocus() ? min(index, endIndex) : floor((index >= endIndex ? slideCount - 1 : index) \/ perPage);\r\n }\r\n\r\n function toDest(destination) {\r\n var closest = Move.toIndex(destination);\r\n return isSlide ? clamp(closest, 0, endIndex) : closest;\r\n }\r\n\r\n function setIndex(index) {\r\n if (index !== currIndex) {\r\n prevIndex = currIndex;\r\n currIndex = index;\r\n }\r\n }\r\n\r\n function getIndex(prev) {\r\n return prev ? prevIndex : currIndex;\r\n }\r\n\r\n function hasFocus() {\r\n return !isUndefined(options.focus) || options.isNavigation;\r\n }\r\n\r\n function isBusy() {\r\n return Splide2.state.is([MOVING, SCROLLING]) && !!options.waitForTransition;\r\n }\r\n\r\n return {\r\n mount: mount,\r\n go: go,\r\n scroll: scroll,\r\n getNext: getNext,\r\n getPrev: getPrev,\r\n getAdjacent: getAdjacent,\r\n getEnd: getEnd,\r\n setIndex: setIndex,\r\n getIndex: getIndex,\r\n toIndex: toIndex,\r\n toPage: toPage,\r\n toDest: toDest,\r\n hasFocus: hasFocus,\r\n isBusy: isBusy\r\n };\r\n }\r\n\r\n var XML_NAME_SPACE = \"http:\/\/www.w3.org\/2000\/svg\";\r\n 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\";\r\n var SIZE = 40;\r\n\r\n function Arrows(Splide2, Components2, options) {\r\n var event = EventInterface(Splide2);\r\n var on = event.on,\r\n bind = event.bind,\r\n emit = event.emit;\r\n var classes = options.classes,\r\n i18n = options.i18n;\r\n var Elements = Components2.Elements,\r\n Controller = Components2.Controller;\r\n var placeholder = Elements.arrows,\r\n track = Elements.track;\r\n var wrapper = placeholder;\r\n var prev = Elements.prev;\r\n var next = Elements.next;\r\n var created;\r\n var wrapperClasses;\r\n var arrows = {};\r\n\r\n function mount() {\r\n init();\r\n on(EVENT_UPDATED, remount);\r\n }\r\n\r\n function remount() {\r\n destroy();\r\n mount();\r\n }\r\n\r\n function init() {\r\n var enabled = options.arrows;\r\n\r\n if (enabled && !(prev && next)) {\r\n createArrows();\r\n }\r\n\r\n if (prev && next) {\r\n assign(arrows, {\r\n prev: prev,\r\n next: next\r\n });\r\n display(wrapper, enabled ? \"\" : \"none\");\r\n addClass(wrapper, wrapperClasses = CLASS_ARROWS + \"--\" + options.direction);\r\n\r\n if (enabled) {\r\n listen();\r\n update();\r\n setAttribute([prev, next], ARIA_CONTROLS, track.id);\r\n emit(EVENT_ARROWS_MOUNTED, prev, next);\r\n }\r\n }\r\n }\r\n\r\n function destroy() {\r\n event.destroy();\r\n removeClass(wrapper, wrapperClasses);\r\n\r\n if (created) {\r\n remove(placeholder ? [prev, next] : wrapper);\r\n prev = next = null;\r\n } else {\r\n removeAttribute([prev, next], ALL_ATTRIBUTES);\r\n }\r\n }\r\n\r\n function listen() {\r\n on([EVENT_MOUNTED, EVENT_MOVED, EVENT_REFRESH, EVENT_SCROLLED, EVENT_END_INDEX_CHANGED], update);\r\n bind(next, \"click\", apply(go, \">\"));\r\n bind(prev, \"click\", apply(go, \"<\"));\r\n }\r\n\r\n function go(control) {\r\n Controller.go(control, true);\r\n }\r\n\r\n function createArrows() {\r\n wrapper = placeholder || create(\"div\", classes.arrows);\r\n prev = createArrow(true);\r\n next = createArrow(false);\r\n created = true;\r\n append(wrapper, [prev, next]);\r\n !placeholder && before(wrapper, track);\r\n }\r\n\r\n function createArrow(prev2) {\r\n var arrow = \"<button class=\"\\""\" type=\"\\"button\\"\">\";\r\n return parseHtml(arrow);\r\n }\r\n\r\n function update() {\r\n if (prev && next) {\r\n var index = Splide2.index;\r\n var prevIndex = Controller.getPrev();\r\n var nextIndex = Controller.getNext();\r\n var prevLabel = prevIndex > -1 && index < prevIndex ? i18n.last : i18n.prev; var nextLabel = nextIndex > -1 && index > nextIndex ? i18n.first : i18n.next;\r\n prev.disabled = prevIndex < 0;\r\n next.disabled = nextIndex < 0; setAttribute(prev, ARIA_LABEL, prevLabel); setAttribute(next, ARIA_LABEL, nextLabel); emit(EVENT_ARROWS_UPDATED, prev, next, prevIndex, nextIndex); } } return { arrows: arrows, mount: mount, destroy: destroy, update: update }; } var INTERVAL_DATA_ATTRIBUTE = DATA_ATTRIBUTE + \"-interval\"; function Autoplay(Splide2, Components2, options) { var _EventInterface6 = EventInterface(Splide2), on = _EventInterface6.on, bind = _EventInterface6.bind, emit = _EventInterface6.emit; var interval = RequestInterval(options.interval, Splide2.go.bind(Splide2, \">\"), onAnimationFrame);\r\n var isPaused = interval.isPaused;\r\n var Elements = Components2.Elements,\r\n _Components2$Elements4 = Components2.Elements,\r\n root = _Components2$Elements4.root,\r\n toggle = _Components2$Elements4.toggle;\r\n var autoplay = options.autoplay;\r\n var hovered;\r\n var focused;\r\n var stopped = autoplay === \"pause\";\r\n\r\n function mount() {\r\n if (autoplay) {\r\n listen();\r\n toggle && setAttribute(toggle, ARIA_CONTROLS, Elements.track.id);\r\n stopped || play();\r\n update();\r\n }\r\n }\r\n\r\n function listen() {\r\n if (options.pauseOnHover) {\r\n bind(root, \"mouseenter mouseleave\", function (e) {\r\n hovered = e.type === \"mouseenter\";\r\n autoToggle();\r\n });\r\n }\r\n\r\n if (options.pauseOnFocus) {\r\n bind(root, \"focusin focusout\", function (e) {\r\n focused = e.type === \"focusin\";\r\n autoToggle();\r\n });\r\n }\r\n\r\n if (toggle) {\r\n bind(toggle, \"click\", function () {\r\n stopped ? play() : pause(true);\r\n });\r\n }\r\n\r\n on([EVENT_MOVE, EVENT_SCROLL, EVENT_REFRESH], interval.rewind);\r\n on(EVENT_MOVE, onMove);\r\n }\r\n\r\n function play() {\r\n if (isPaused() && Components2.Slides.isEnough()) {\r\n interval.start(!options.resetProgress);\r\n focused = hovered = stopped = false;\r\n update();\r\n emit(EVENT_AUTOPLAY_PLAY);\r\n }\r\n }\r\n\r\n function pause(stop) {\r\n if (stop === void 0) {\r\n stop = true;\r\n }\r\n\r\n stopped = !!stop;\r\n update();\r\n\r\n if (!isPaused()) {\r\n interval.pause();\r\n emit(EVENT_AUTOPLAY_PAUSE);\r\n }\r\n }\r\n\r\n function autoToggle() {\r\n if (!stopped) {\r\n hovered || focused ? pause(false) : play();\r\n }\r\n }\r\n\r\n function update() {\r\n if (toggle) {\r\n toggleClass(toggle, CLASS_ACTIVE, !stopped);\r\n setAttribute(toggle, ARIA_LABEL, options.i18n[stopped ? \"play\" : \"pause\"]);\r\n }\r\n }\r\n\r\n function onAnimationFrame(rate) {\r\n var bar = Elements.bar;\r\n bar && style(bar, \"width\", rate * 100 + \"%\");\r\n emit(EVENT_AUTOPLAY_PLAYING, rate);\r\n }\r\n\r\n function onMove(index) {\r\n var Slide = Components2.Slides.getAt(index);\r\n interval.set(Slide && +getAttribute(Slide.slide, INTERVAL_DATA_ATTRIBUTE) || options.interval);\r\n }\r\n\r\n return {\r\n mount: mount,\r\n destroy: interval.cancel,\r\n play: play,\r\n pause: pause,\r\n isPaused: isPaused\r\n };\r\n }\r\n\r\n function Cover(Splide2, Components2, options) {\r\n var _EventInterface7 = EventInterface(Splide2),\r\n on = _EventInterface7.on;\r\n\r\n function mount() {\r\n if (options.cover) {\r\n on(EVENT_LAZYLOAD_LOADED, apply(toggle, true));\r\n on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true));\r\n }\r\n }\r\n\r\n function cover(cover2) {\r\n Components2.Slides.forEach(function (Slide) {\r\n var img = child(Slide.container || Slide.slide, \"img\");\r\n\r\n if (img && img.src) {\r\n toggle(cover2, img, Slide);\r\n }\r\n });\r\n }\r\n\r\n function toggle(cover2, img, Slide) {\r\n Slide.style(\"background\", cover2 ? \"center\/cover no-repeat url(\\\"\" + img.src + \"\\\")\" : \"\", true);\r\n display(img, cover2 ? \"none\" : \"\");\r\n }\r\n\r\n return {\r\n mount: mount,\r\n destroy: apply(cover, false)\r\n };\r\n }\r\n\r\n var BOUNCE_DIFF_THRESHOLD = 10;\r\n var BOUNCE_DURATION = 600;\r\n var FRICTION_FACTOR = 0.6;\r\n var BASE_VELOCITY = 1.5;\r\n var MIN_DURATION = 800;\r\n\r\n function Scroll(Splide2, Components2, options) {\r\n var _EventInterface8 = EventInterface(Splide2),\r\n on = _EventInterface8.on,\r\n emit = _EventInterface8.emit;\r\n\r\n var set = Splide2.state.set;\r\n var Move = Components2.Move;\r\n var getPosition = Move.getPosition,\r\n getLimit = Move.getLimit,\r\n exceededLimit = Move.exceededLimit,\r\n translate = Move.translate;\r\n var isSlide = Splide2.is(SLIDE);\r\n var interval;\r\n var callback;\r\n var friction = 1;\r\n\r\n function mount() {\r\n on(EVENT_MOVE, clear);\r\n on([EVENT_UPDATED, EVENT_REFRESH], cancel);\r\n }\r\n\r\n function scroll(destination, duration, snap, onScrolled, noConstrain) {\r\n var from = getPosition();\r\n clear();\r\n\r\n if (snap && (!isSlide || !exceededLimit())) {\r\n var size = Components2.Layout.sliderSize();\r\n var offset = sign(destination) * size * floor(abs(destination) \/ size) || 0;\r\n destination = Move.toPosition(Components2.Controller.toDest(destination % size)) + offset;\r\n }\r\n\r\n var noDistance = approximatelyEqual(from, destination, 1);\r\n friction = 1;\r\n duration = noDistance ? 0 : duration || max(abs(destination - from) \/ BASE_VELOCITY, MIN_DURATION);\r\n callback = onScrolled;\r\n interval = RequestInterval(duration, onEnd, apply(update, from, destination, noConstrain), 1);\r\n set(SCROLLING);\r\n emit(EVENT_SCROLL);\r\n interval.start();\r\n }\r\n\r\n function onEnd() {\r\n set(IDLE);\r\n callback && callback();\r\n emit(EVENT_SCROLLED);\r\n }\r\n\r\n function update(from, to, noConstrain, rate) {\r\n var position = getPosition();\r\n var target = from + (to - from) * easing(rate);\r\n var diff = (target - position) * friction;\r\n translate(position + diff);\r\n\r\n if (isSlide && !noConstrain && exceededLimit()) {\r\n friction *= FRICTION_FACTOR;\r\n\r\n if (abs(diff) < BOUNCE_DIFF_THRESHOLD) { scroll(getLimit(exceededLimit(true)), BOUNCE_DURATION, false, callback, true); } } } function clear() { if (interval) { interval.cancel(); } } function cancel() { if (interval && !interval.isPaused()) { clear(); onEnd(); } } function easing(t) { var easingFunc = options.easingFunc; return easingFunc ? easingFunc(t) : 1 - Math.pow(1 - t, 4); } return { mount: mount, destroy: clear, scroll: scroll, cancel: cancel }; } var SCROLL_LISTENER_OPTIONS = { passive: false, capture: true }; function Drag(Splide2, Components2, options) { var _EventInterface9 = EventInterface(Splide2), on = _EventInterface9.on, emit = _EventInterface9.emit, bind = _EventInterface9.bind, unbind = _EventInterface9.unbind; var state = Splide2.state; var Move = Components2.Move, Scroll = Components2.Scroll, Controller = Components2.Controller, track = Components2.Elements.track, reduce = Components2.Media.reduce; var _Components2$Directio2 = Components2.Direction, resolve = _Components2$Directio2.resolve, orient = _Components2$Directio2.orient; var getPosition = Move.getPosition, exceededLimit = Move.exceededLimit; var basePosition; var baseEvent; var prevBaseEvent; var isFree; var dragging; var exceeded = false; var clickPrevented; var disabled; var target; function mount() { bind(track, POINTER_MOVE_EVENTS, noop, SCROLL_LISTENER_OPTIONS); bind(track, POINTER_UP_EVENTS, noop, SCROLL_LISTENER_OPTIONS); bind(track, POINTER_DOWN_EVENTS, onPointerDown, SCROLL_LISTENER_OPTIONS); bind(track, \"click\", onClick, { capture: true }); bind(track, \"dragstart\", prevent); on([EVENT_MOUNTED, EVENT_UPDATED], init); } function init() { var drag = options.drag; disable(!drag); isFree = drag === \"free\"; } function onPointerDown(e) { clickPrevented = false; if (!disabled) { var isTouch = isTouchEvent(e); if (isDraggable(e.target) && (isTouch || !e.button)) { if (!Controller.isBusy()) { target = isTouch ? track : window; dragging = state.is([MOVING, SCROLLING]); prevBaseEvent = null; bind(target, POINTER_MOVE_EVENTS, onPointerMove, SCROLL_LISTENER_OPTIONS); bind(target, POINTER_UP_EVENTS, onPointerUp, SCROLL_LISTENER_OPTIONS); Move.cancel(); Scroll.cancel(); save(e); } else { prevent(e, true); } } } } function onPointerMove(e) { if (!state.is(DRAGGING)) { state.set(DRAGGING); emit(EVENT_DRAG); } if (e.cancelable) { if (dragging) { Move.translate(basePosition + constrain(diffCoord(e))); var expired = diffTime(e) > LOG_INTERVAL;\r\n var hasExceeded = exceeded !== (exceeded = exceededLimit());\r\n\r\n if (expired || hasExceeded) {\r\n save(e);\r\n }\r\n\r\n clickPrevented = true;\r\n emit(EVENT_DRAGGING);\r\n prevent(e);\r\n } else if (isSliderDirection(e)) {\r\n dragging = shouldStart(e);\r\n prevent(e);\r\n }\r\n }\r\n }\r\n\r\n function onPointerUp(e) {\r\n if (state.is(DRAGGING)) {\r\n state.set(IDLE);\r\n emit(EVENT_DRAGGED);\r\n }\r\n\r\n if (dragging) {\r\n move(e);\r\n prevent(e);\r\n }\r\n\r\n unbind(target, POINTER_MOVE_EVENTS, onPointerMove);\r\n unbind(target, POINTER_UP_EVENTS, onPointerUp);\r\n dragging = false;\r\n }\r\n\r\n function onClick(e) {\r\n if (!disabled && clickPrevented) {\r\n prevent(e, true);\r\n }\r\n }\r\n\r\n function save(e) {\r\n prevBaseEvent = baseEvent;\r\n baseEvent = e;\r\n basePosition = getPosition();\r\n }\r\n\r\n function move(e) {\r\n var velocity = computeVelocity(e);\r\n var destination = computeDestination(velocity);\r\n var rewind = options.rewind && options.rewindByDrag;\r\n reduce(false);\r\n\r\n if (isFree) {\r\n Controller.scroll(destination, 0, options.snap);\r\n } else if (Splide2.is(FADE)) {\r\n Controller.go(orient(sign(velocity)) < 0 ? rewind ? \"<\" : \"-\" : rewind ? \">\" : \"+\");\r\n } else if (Splide2.is(SLIDE) && exceeded && rewind) {\r\n Controller.go(exceededLimit(true) ? \">\" : \"<\"); } else { Controller.go(Controller.toDest(destination), true); } reduce(true); } function shouldStart(e) { var thresholds = options.dragMinThreshold; var isObj = isObject(thresholds); var mouse = isObj && thresholds.mouse || 0; var touch = (isObj ? thresholds.touch : +thresholds) || 10; return abs(diffCoord(e)) > (isTouchEvent(e) ? touch : mouse);\r\n }\r\n\r\n function isSliderDirection(e) {\r\n return abs(diffCoord(e)) > abs(diffCoord(e, true));\r\n }\r\n\r\n function computeVelocity(e) {\r\n if (Splide2.is(LOOP) || !exceeded) {\r\n var time = diffTime(e);\r\n\r\n if (time && time < LOG_INTERVAL) {\r\n return diffCoord(e) \/ time;\r\n }\r\n }\r\n\r\n return 0;\r\n }\r\n\r\n function computeDestination(velocity) {\r\n return getPosition() + sign(velocity) * min(abs(velocity) * (options.flickPower || 600), isFree ? Infinity : Components2.Layout.listSize() * (options.flickMaxPages || 1));\r\n }\r\n\r\n function diffCoord(e, orthogonal) {\r\n return coordOf(e, orthogonal) - coordOf(getBaseEvent(e), orthogonal);\r\n }\r\n\r\n function diffTime(e) {\r\n return timeOf(e) - timeOf(getBaseEvent(e));\r\n }\r\n\r\n function getBaseEvent(e) {\r\n return baseEvent === e && prevBaseEvent || baseEvent;\r\n }\r\n\r\n function coordOf(e, orthogonal) {\r\n return (isTouchEvent(e) ? e.changedTouches[0] : e)[\"page\" + resolve(orthogonal ? \"Y\" : \"X\")];\r\n }\r\n\r\n function constrain(diff) {\r\n return diff \/ (exceeded && Splide2.is(SLIDE) ? FRICTION : 1);\r\n }\r\n\r\n function isDraggable(target2) {\r\n var noDrag = options.noDrag;\r\n return !matches(target2, \".\" + CLASS_PAGINATION_PAGE + \", .\" + CLASS_ARROW) && (!noDrag || !matches(target2, noDrag));\r\n }\r\n\r\n function isTouchEvent(e) {\r\n return typeof TouchEvent !== \"undefined\" && e instanceof TouchEvent;\r\n }\r\n\r\n function isDragging() {\r\n return dragging;\r\n }\r\n\r\n function disable(value) {\r\n disabled = value;\r\n }\r\n\r\n return {\r\n mount: mount,\r\n disable: disable,\r\n isDragging: isDragging\r\n };\r\n }\r\n\r\n var NORMALIZATION_MAP = {\r\n Spacebar: \" \",\r\n Right: ARROW_RIGHT,\r\n Left: ARROW_LEFT,\r\n Up: ARROW_UP,\r\n Down: ARROW_DOWN\r\n };\r\n\r\n function normalizeKey(key) {\r\n key = isString(key) ? key : key.key;\r\n return NORMALIZATION_MAP[key] || key;\r\n }\r\n\r\n var KEYBOARD_EVENT = \"keydown\";\r\n\r\n function Keyboard(Splide2, Components2, options) {\r\n var _EventInterface10 = EventInterface(Splide2),\r\n on = _EventInterface10.on,\r\n bind = _EventInterface10.bind,\r\n unbind = _EventInterface10.unbind;\r\n\r\n var root = Splide2.root;\r\n var resolve = Components2.Direction.resolve;\r\n var target;\r\n var disabled;\r\n\r\n function mount() {\r\n init();\r\n on(EVENT_UPDATED, destroy);\r\n on(EVENT_UPDATED, init);\r\n on(EVENT_MOVE, onMove);\r\n }\r\n\r\n function init() {\r\n var keyboard = options.keyboard;\r\n\r\n if (keyboard) {\r\n target = keyboard === \"global\" ? window : root;\r\n bind(target, KEYBOARD_EVENT, onKeydown);\r\n }\r\n }\r\n\r\n function destroy() {\r\n unbind(target, KEYBOARD_EVENT);\r\n }\r\n\r\n function disable(value) {\r\n disabled = value;\r\n }\r\n\r\n function onMove() {\r\n var _disabled = disabled;\r\n disabled = true;\r\n nextTick(function () {\r\n disabled = _disabled;\r\n });\r\n }\r\n\r\n function onKeydown(e) {\r\n if (!disabled) {\r\n var key = normalizeKey(e);\r\n\r\n if (key === resolve(ARROW_LEFT)) {\r\n Splide2.go(\"<\"); } else if (key === resolve(ARROW_RIGHT)) { Splide2.go(\">\");\r\n }\r\n }\r\n }\r\n\r\n return {\r\n mount: mount,\r\n destroy: destroy,\r\n disable: disable\r\n };\r\n }\r\n\r\n var SRC_DATA_ATTRIBUTE = DATA_ATTRIBUTE + \"-lazy\";\r\n var SRCSET_DATA_ATTRIBUTE = SRC_DATA_ATTRIBUTE + \"-srcset\";\r\n var IMAGE_SELECTOR = \"[\" + SRC_DATA_ATTRIBUTE + \"], [\" + SRCSET_DATA_ATTRIBUTE + \"]\";\r\n\r\n function LazyLoad(Splide2, Components2, options) {\r\n var _EventInterface11 = EventInterface(Splide2),\r\n on = _EventInterface11.on,\r\n off = _EventInterface11.off,\r\n bind = _EventInterface11.bind,\r\n emit = _EventInterface11.emit;\r\n\r\n var isSequential = options.lazyLoad === \"sequential\";\r\n var events = [EVENT_MOVED, EVENT_SCROLLED];\r\n var entries = [];\r\n\r\n function mount() {\r\n if (options.lazyLoad) {\r\n init();\r\n on(EVENT_REFRESH, init);\r\n }\r\n }\r\n\r\n function init() {\r\n empty(entries);\r\n register();\r\n\r\n if (isSequential) {\r\n loadNext();\r\n } else {\r\n off(events);\r\n on(events, check);\r\n check();\r\n }\r\n }\r\n\r\n function register() {\r\n Components2.Slides.forEach(function (Slide) {\r\n queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {\r\n var src = getAttribute(img, SRC_DATA_ATTRIBUTE);\r\n var srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);\r\n\r\n if (src !== img.src || srcset !== img.srcset) {\r\n var className = options.classes.spinner;\r\n var parent = img.parentElement;\r\n var spinner = child(parent, \".\" + className) || create(\"span\", className, parent);\r\n entries.push([img, Slide, spinner]);\r\n img.src || display(img, \"none\");\r\n }\r\n });\r\n });\r\n }\r\n\r\n function check() {\r\n entries = entries.filter(function (data) {\r\n var distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;\r\n return data[1].isWithin(Splide2.index, distance) ? load(data) : true;\r\n });\r\n entries.length || off(events);\r\n }\r\n\r\n function load(data) {\r\n var img = data[0];\r\n addClass(data[1].slide, CLASS_LOADING);\r\n bind(img, \"load error\", apply(onLoad, data));\r\n setAttribute(img, \"src\", getAttribute(img, SRC_DATA_ATTRIBUTE));\r\n setAttribute(img, \"srcset\", getAttribute(img, SRCSET_DATA_ATTRIBUTE));\r\n removeAttribute(img, SRC_DATA_ATTRIBUTE);\r\n removeAttribute(img, SRCSET_DATA_ATTRIBUTE);\r\n }\r\n\r\n function onLoad(data, e) {\r\n var img = data[0],\r\n Slide = data[1];\r\n removeClass(Slide.slide, CLASS_LOADING);\r\n\r\n if (e.type !== \"error\") {\r\n remove(data[2]);\r\n display(img, \"\");\r\n emit(EVENT_LAZYLOAD_LOADED, img, Slide);\r\n emit(EVENT_RESIZE);\r\n }\r\n\r\n isSequential && loadNext();\r\n }\r\n\r\n function loadNext() {\r\n entries.length && load(entries.shift());\r\n }\r\n\r\n return {\r\n mount: mount,\r\n destroy: apply(empty, entries),\r\n check: check\r\n };\r\n }\r\n\r\n function Pagination(Splide2, Components2, options) {\r\n var event = EventInterface(Splide2);\r\n var on = event.on,\r\n emit = event.emit,\r\n bind = event.bind;\r\n var Slides = Components2.Slides,\r\n Elements = Components2.Elements,\r\n Controller = Components2.Controller;\r\n var hasFocus = Controller.hasFocus,\r\n getIndex = Controller.getIndex,\r\n go = Controller.go;\r\n var resolve = Components2.Direction.resolve;\r\n var placeholder = Elements.pagination;\r\n var items = [];\r\n var list;\r\n var paginationClasses;\r\n\r\n function mount() {\r\n destroy();\r\n on([EVENT_UPDATED, EVENT_REFRESH, EVENT_END_INDEX_CHANGED], mount);\r\n var enabled = options.pagination;\r\n placeholder && display(placeholder, enabled ? \"\" : \"none\");\r\n\r\n if (enabled) {\r\n on([EVENT_MOVE, EVENT_SCROLL, EVENT_SCROLLED], update);\r\n createPagination();\r\n update();\r\n emit(EVENT_PAGINATION_MOUNTED, {\r\n list: list,\r\n items: items\r\n }, getAt(Splide2.index));\r\n }\r\n }\r\n\r\n function destroy() {\r\n if (list) {\r\n remove(placeholder ? slice(list.children) : list);\r\n removeClass(list, paginationClasses);\r\n empty(items);\r\n list = null;\r\n }\r\n\r\n event.destroy();\r\n }\r\n\r\n function createPagination() {\r\n var length = Splide2.length;\r\n var classes = options.classes,\r\n i18n = options.i18n,\r\n perPage = options.perPage;\r\n var max = hasFocus() ? Controller.getEnd() + 1 : ceil(length \/ perPage);\r\n list = placeholder || create(\"ul\", classes.pagination, Elements.track.parentElement);\r\n addClass(list, paginationClasses = CLASS_PAGINATION + \"--\" + getDirection());\r\n setAttribute(list, ROLE, \"tablist\");\r\n setAttribute(list, ARIA_LABEL, i18n.select);\r\n setAttribute(list, ARIA_ORIENTATION, getDirection() === TTB ? \"vertical\" : \"\");\r\n\r\n for (var i = 0; i < max; i++) { var li = create(\"li\", null, list); var button = create(\"button\", { class: classes.page, type: \"button\" }, li); var controls = Slides.getIn(i).map(function (Slide) { return Slide.slide.id; }); var text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;\r\n bind(button, \"click\", apply(onClick, i));\r\n\r\n if (options.paginationKeyboard) {\r\n bind(button, \"keydown\", apply(onKeydown, i));\r\n }\r\n\r\n setAttribute(li, ROLE, \"presentation\");\r\n setAttribute(button, ROLE, \"tab\");\r\n setAttribute(button, ARIA_CONTROLS, controls.join(\" \"));\r\n setAttribute(button, ARIA_LABEL, format(text, i + 1));\r\n setAttribute(button, TAB_INDEX, -1);\r\n items.push({\r\n li: li,\r\n button: button,\r\n page: i\r\n });\r\n }\r\n }\r\n\r\n function onClick(page) {\r\n go(\">\" + page, true);\r\n }\r\n\r\n function onKeydown(page, e) {\r\n var length = items.length;\r\n var key = normalizeKey(e);\r\n var dir = getDirection();\r\n var nextPage = -1;\r\n\r\n if (key === resolve(ARROW_RIGHT, false, dir)) {\r\n nextPage = ++page % length;\r\n } else if (key === resolve(ARROW_LEFT, false, dir)) {\r\n nextPage = (--page + length) % length;\r\n } else if (key === \"Home\") {\r\n nextPage = 0;\r\n } else if (key === \"End\") {\r\n nextPage = length - 1;\r\n }\r\n\r\n var item = items[nextPage];\r\n\r\n if (item) {\r\n focus(item.button);\r\n go(\">\" + nextPage);\r\n prevent(e, true);\r\n }\r\n }\r\n\r\n function getDirection() {\r\n return options.paginationDirection || options.direction;\r\n }\r\n\r\n function getAt(index) {\r\n return items[Controller.toPage(index)];\r\n }\r\n\r\n function update() {\r\n var prev = getAt(getIndex(true));\r\n var curr = getAt(getIndex());\r\n\r\n if (prev) {\r\n var button = prev.button;\r\n removeClass(button, CLASS_ACTIVE);\r\n removeAttribute(button, ARIA_SELECTED);\r\n setAttribute(button, TAB_INDEX, -1);\r\n }\r\n\r\n if (curr) {\r\n var _button = curr.button;\r\n addClass(_button, CLASS_ACTIVE);\r\n setAttribute(_button, ARIA_SELECTED, true);\r\n setAttribute(_button, TAB_INDEX, \"\");\r\n }\r\n\r\n emit(EVENT_PAGINATION_UPDATED, {\r\n list: list,\r\n items: items\r\n }, prev, curr);\r\n }\r\n\r\n return {\r\n items: items,\r\n mount: mount,\r\n destroy: destroy,\r\n getAt: getAt,\r\n update: update\r\n };\r\n }\r\n\r\n var TRIGGER_KEYS = [\" \", \"Enter\"];\r\n\r\n function Sync(Splide2, Components2, options) {\r\n var isNavigation = options.isNavigation,\r\n slideFocus = options.slideFocus;\r\n var events = [];\r\n\r\n function mount() {\r\n Splide2.splides.forEach(function (target) {\r\n if (!target.isParent) {\r\n sync(Splide2, target.splide);\r\n sync(target.splide, Splide2);\r\n }\r\n });\r\n\r\n if (isNavigation) {\r\n navigate();\r\n }\r\n }\r\n\r\n function destroy() {\r\n events.forEach(function (event) {\r\n event.destroy();\r\n });\r\n empty(events);\r\n }\r\n\r\n function remount() {\r\n destroy();\r\n mount();\r\n }\r\n\r\n function sync(splide, target) {\r\n var event = EventInterface(splide);\r\n event.on(EVENT_MOVE, function (index, prev, dest) {\r\n target.go(target.is(LOOP) ? dest : index);\r\n });\r\n events.push(event);\r\n }\r\n\r\n function navigate() {\r\n var event = EventInterface(Splide2);\r\n var on = event.on;\r\n on(EVENT_CLICK, onClick);\r\n on(EVENT_SLIDE_KEYDOWN, onKeydown);\r\n on([EVENT_MOUNTED, EVENT_UPDATED], update);\r\n events.push(event);\r\n event.emit(EVENT_NAVIGATION_MOUNTED, Splide2.splides);\r\n }\r\n\r\n function update() {\r\n setAttribute(Components2.Elements.list, ARIA_ORIENTATION, options.direction === TTB ? \"vertical\" : \"\");\r\n }\r\n\r\n function onClick(Slide) {\r\n Splide2.go(Slide.index);\r\n }\r\n\r\n function onKeydown(Slide, e) {\r\n if (includes(TRIGGER_KEYS, normalizeKey(e))) {\r\n onClick(Slide);\r\n prevent(e);\r\n }\r\n }\r\n\r\n return {\r\n setup: apply(Components2.Media.set, {\r\n slideFocus: isUndefined(slideFocus) ? isNavigation : slideFocus\r\n }, true),\r\n mount: mount,\r\n destroy: destroy,\r\n remount: remount\r\n };\r\n }\r\n\r\n function Wheel(Splide2, Components2, options) {\r\n var _EventInterface12 = EventInterface(Splide2),\r\n bind = _EventInterface12.bind;\r\n\r\n var lastTime = 0;\r\n\r\n function mount() {\r\n if (options.wheel) {\r\n bind(Components2.Elements.track, \"wheel\", onWheel, SCROLL_LISTENER_OPTIONS);\r\n }\r\n }\r\n\r\n function onWheel(e) {\r\n if (e.cancelable) {\r\n var deltaY = e.deltaY;\r\n var backwards = deltaY < 0; var timeStamp = timeOf(e); var _min = options.wheelMinThreshold || 0; var sleep = options.wheelSleep || 0; if (abs(deltaY) > _min && timeStamp - lastTime > sleep) {\r\n Splide2.go(backwards ? \"<\" : \">\");\r\n lastTime = timeStamp;\r\n }\r\n\r\n shouldPrevent(backwards) && prevent(e);\r\n }\r\n }\r\n\r\n function shouldPrevent(backwards) {\r\n return !options.releaseWheel || Splide2.state.is(MOVING) || Components2.Controller.getAdjacent(backwards) !== -1;\r\n }\r\n\r\n return {\r\n mount: mount\r\n };\r\n }\r\n\r\n var SR_REMOVAL_DELAY = 90;\r\n\r\n function Live(Splide2, Components2, options) {\r\n var _EventInterface13 = EventInterface(Splide2),\r\n on = _EventInterface13.on;\r\n\r\n var track = Components2.Elements.track;\r\n var enabled = options.live && !options.isNavigation;\r\n var sr = create(\"span\", CLASS_SR);\r\n var interval = RequestInterval(SR_REMOVAL_DELAY, apply(toggle, false));\r\n\r\n function mount() {\r\n if (enabled) {\r\n disable(!Components2.Autoplay.isPaused());\r\n setAttribute(track, ARIA_ATOMIC, true);\r\n sr.textContent = \"\\u2026\";\r\n on(EVENT_AUTOPLAY_PLAY, apply(disable, true));\r\n on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));\r\n on([EVENT_MOVED, EVENT_SCROLLED], apply(toggle, true));\r\n }\r\n }\r\n\r\n function toggle(active) {\r\n setAttribute(track, ARIA_BUSY, active);\r\n\r\n if (active) {\r\n append(track, sr);\r\n interval.start();\r\n } else {\r\n remove(sr);\r\n interval.cancel();\r\n }\r\n }\r\n\r\n function destroy() {\r\n removeAttribute(track, [ARIA_LIVE, ARIA_ATOMIC, ARIA_BUSY]);\r\n remove(sr);\r\n }\r\n\r\n function disable(disabled) {\r\n if (enabled) {\r\n setAttribute(track, ARIA_LIVE, disabled ? \"off\" : \"polite\");\r\n }\r\n }\r\n\r\n return {\r\n mount: mount,\r\n disable: disable,\r\n destroy: destroy\r\n };\r\n }\r\n\r\n var ComponentConstructors = \/*#__PURE__*\/Object.freeze({\r\n __proto__: null,\r\n Media: Media,\r\n Direction: Direction,\r\n Elements: Elements,\r\n Slides: Slides,\r\n Layout: Layout,\r\n Clones: Clones,\r\n Move: Move,\r\n Controller: Controller,\r\n Arrows: Arrows,\r\n Autoplay: Autoplay,\r\n Cover: Cover,\r\n Scroll: Scroll,\r\n Drag: Drag,\r\n Keyboard: Keyboard,\r\n LazyLoad: LazyLoad,\r\n Pagination: Pagination,\r\n Sync: Sync,\r\n Wheel: Wheel,\r\n Live: Live\r\n });\r\n var I18N = {\r\n prev: \"Previous slide\",\r\n next: \"Next slide\",\r\n first: \"Go to first slide\",\r\n last: \"Go to last slide\",\r\n slideX: \"Go to slide %s\",\r\n pageX: \"Go to page %s\",\r\n play: \"Start autoplay\",\r\n pause: \"Pause autoplay\",\r\n carousel: \"carousel\",\r\n slide: \"slide\",\r\n select: \"Select a slide to show\",\r\n slideLabel: \"%s of %s\"\r\n };\r\n var DEFAULTS = {\r\n type: \"slide\",\r\n role: \"region\",\r\n speed: 400,\r\n perPage: 1,\r\n cloneStatus: true,\r\n arrows: true,\r\n pagination: true,\r\n paginationKeyboard: true,\r\n interval: 5e3,\r\n pauseOnHover: true,\r\n pauseOnFocus: true,\r\n resetProgress: true,\r\n easing: \"cubic-bezier(0.25, 1, 0.5, 1)\",\r\n drag: true,\r\n direction: \"ltr\",\r\n trimSpace: true,\r\n focusableNodes: \"a, button, textarea, input, select, iframe\",\r\n live: true,\r\n classes: CLASSES,\r\n i18n: I18N,\r\n reducedMotion: {\r\n speed: 0,\r\n rewindSpeed: 0,\r\n autoplay: \"pause\"\r\n }\r\n };\r\n\r\n function Fade(Splide2, Components2, options) {\r\n var Slides = Components2.Slides;\r\n\r\n function mount() {\r\n EventInterface(Splide2).on([EVENT_MOUNTED, EVENT_REFRESH], init);\r\n }\r\n\r\n function init() {\r\n Slides.forEach(function (Slide) {\r\n Slide.style(\"transform\", \"translateX(-\" + 100 * Slide.index + \"%)\");\r\n });\r\n }\r\n\r\n function start(index, done) {\r\n Slides.style(\"transition\", \"opacity \" + options.speed + \"ms \" + options.easing);\r\n nextTick(done);\r\n }\r\n\r\n return {\r\n mount: mount,\r\n start: start,\r\n cancel: noop\r\n };\r\n }\r\n\r\n function Slide(Splide2, Components2, options) {\r\n var Move = Components2.Move,\r\n Controller = Components2.Controller,\r\n Scroll = Components2.Scroll;\r\n var list = Components2.Elements.list;\r\n var transition = apply(style, list, \"transition\");\r\n var endCallback;\r\n\r\n function mount() {\r\n EventInterface(Splide2).bind(list, \"transitionend\", function (e) {\r\n if (e.target === list && endCallback) {\r\n cancel();\r\n endCallback();\r\n }\r\n });\r\n }\r\n\r\n function start(index, done) {\r\n var destination = Move.toPosition(index, true);\r\n var position = Move.getPosition();\r\n var speed = getSpeed(index);\r\n\r\n if (abs(destination - position) >= 1 && speed >= 1) {\r\n if (options.useScroll) {\r\n Scroll.scroll(destination, speed, false, done);\r\n } else {\r\n transition(\"transform \" + speed + \"ms \" + options.easing);\r\n Move.translate(destination, true);\r\n endCallback = done;\r\n }\r\n } else {\r\n Move.jump(index);\r\n done();\r\n }\r\n }\r\n\r\n function cancel() {\r\n transition(\"\");\r\n Scroll.cancel();\r\n }\r\n\r\n function getSpeed(index) {\r\n var rewindSpeed = options.rewindSpeed;\r\n\r\n if (Splide2.is(SLIDE) && rewindSpeed) {\r\n var prev = Controller.getIndex(true);\r\n var end = Controller.getEnd();\r\n\r\n if (prev === 0 && index >= end || prev >= end && index === 0) {\r\n return rewindSpeed;\r\n }\r\n }\r\n\r\n return options.speed;\r\n }\r\n\r\n return {\r\n mount: mount,\r\n start: start,\r\n cancel: cancel\r\n };\r\n }\r\n\r\n var _Splide = \/*#__PURE__*\/function () {\r\n function _Splide(target, options) {\r\n this.event = EventInterface();\r\n this.Components = {};\r\n this.state = State(CREATED);\r\n this.splides = [];\r\n this._o = {};\r\n this._E = {};\r\n var root = isString(target) ? query(document, target) : target;\r\n assert(root, root + \" is invalid.\");\r\n this.root = root;\r\n options = merge({\r\n label: getAttribute(root, ARIA_LABEL) || \"\",\r\n labelledby: getAttribute(root, ARIA_LABELLEDBY) || \"\"\r\n }, DEFAULTS, _Splide.defaults, options || {});\r\n\r\n try {\r\n merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));\r\n } catch (e) {\r\n assert(false, \"Invalid JSON\");\r\n }\r\n\r\n this._o = Object.create(merge({}, options));\r\n }\r\n\r\n var _proto = _Splide.prototype;\r\n\r\n _proto.mount = function mount(Extensions, Transition) {\r\n var _this = this;\r\n\r\n var state = this.state,\r\n Components2 = this.Components;\r\n assert(state.is([CREATED, DESTROYED]), \"Already mounted!\");\r\n state.set(CREATED);\r\n this._C = Components2;\r\n this._T = Transition || this._T || (this.is(FADE) ? Fade : Slide);\r\n this._E = Extensions || this._E;\r\n var Constructors = assign({}, ComponentConstructors, this._E, {\r\n Transition: this._T\r\n });\r\n forOwn(Constructors, function (Component, key) {\r\n var component = Component(_this, Components2, _this._o);\r\n Components2[key] = component;\r\n component.setup && component.setup();\r\n });\r\n forOwn(Components2, function (component) {\r\n component.mount && component.mount();\r\n });\r\n this.emit(EVENT_MOUNTED);\r\n addClass(this.root, CLASS_INITIALIZED);\r\n state.set(IDLE);\r\n this.emit(EVENT_READY);\r\n return this;\r\n };\r\n\r\n _proto.sync = function sync(splide) {\r\n this.splides.push({\r\n splide: splide\r\n });\r\n splide.splides.push({\r\n splide: this,\r\n isParent: true\r\n });\r\n\r\n if (this.state.is(IDLE)) {\r\n this._C.Sync.remount();\r\n\r\n splide.Components.Sync.remount();\r\n }\r\n\r\n return this;\r\n };\r\n\r\n _proto.go = function go(control) {\r\n this._C.Controller.go(control);\r\n\r\n return this;\r\n };\r\n\r\n _proto.on = function on(events, callback) {\r\n this.event.on(events, callback);\r\n return this;\r\n };\r\n\r\n _proto.off = function off(events) {\r\n this.event.off(events);\r\n return this;\r\n };\r\n\r\n _proto.emit = function emit(event) {\r\n var _this$event;\r\n\r\n (_this$event = this.event).emit.apply(_this$event, [event].concat(slice(arguments, 1)));\r\n\r\n return this;\r\n };\r\n\r\n _proto.add = function add(slides, index) {\r\n this._C.Slides.add(slides, index);\r\n\r\n return this;\r\n };\r\n\r\n _proto.remove = function remove(matcher) {\r\n this._C.Slides.remove(matcher);\r\n\r\n return this;\r\n };\r\n\r\n _proto.is = function is(type) {\r\n return this._o.type === type;\r\n };\r\n\r\n _proto.refresh = function refresh() {\r\n this.emit(EVENT_REFRESH);\r\n return this;\r\n };\r\n\r\n _proto.destroy = function destroy(completely) {\r\n if (completely === void 0) {\r\n completely = true;\r\n }\r\n\r\n var event = this.event,\r\n state = this.state;\r\n\r\n if (state.is(CREATED)) {\r\n EventInterface(this).on(EVENT_READY, this.destroy.bind(this, completely));\r\n } else {\r\n forOwn(this._C, function (component) {\r\n component.destroy && component.destroy(completely);\r\n }, true);\r\n event.emit(EVENT_DESTROY);\r\n event.destroy();\r\n completely && empty(this.splides);\r\n state.set(DESTROYED);\r\n }\r\n\r\n return this;\r\n };\r\n\r\n _createClass(_Splide, [{\r\n key: \"options\",\r\n get: function get() {\r\n return this._o;\r\n },\r\n set: function set(options) {\r\n this._C.Media.set(options, true, true);\r\n }\r\n }, {\r\n key: \"length\",\r\n get: function get() {\r\n return this._C.Slides.getLength(true);\r\n }\r\n }, {\r\n key: \"index\",\r\n get: function get() {\r\n return this._C.Controller.getIndex();\r\n }\r\n }]);\r\n\r\n return _Splide;\r\n }();\r\n\r\n var Splide = _Splide;\r\n Splide.defaults = {};\r\n Splide.STATES = STATES;\r\n return Splide;\r\n});\r\n<\/button><\/pre>\nThat’s all! hopefully, you have successfully integrated this Multi Item Carousel JavaScript code snippet into your project. If you have any questions or facing any issues, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Splide JS is a lightweight, powerful and flexible JavaScript slider plugin that helps you to create multi item carousel….<\/p>\n","protected":false},"author":1,"featured_media":7564,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"class_list":["post-6689","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carousel"],"acf":[],"yoast_head":"\n
Multi Item Carousel JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Multi Item Carousel JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Multi Item Carousel JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Multi Item Carousel JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-17T16:47:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:48:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"37 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Multi Item Carousel JavaScript\",\"datePublished\":\"2024-01-17T16:47:00+00:00\",\"dateModified\":\"2024-01-22T09:48:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\"},\"wordCount\":147,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png\",\"articleSection\":[\"Carousel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\",\"url\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\",\"name\":\"Multi Item Carousel JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png\",\"datePublished\":\"2024-01-17T16:47:00+00:00\",\"dateModified\":\"2024-01-22T09:48:51+00:00\",\"description\":\"Here is a free code snippet to create a Multi Item Carousel JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Multi Item Carousel JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Carousel\",\"item\":\"https:\/\/codehim.com\/category\/carousel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Multi Item Carousel JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Multi Item Carousel JavaScript — CodeHim","description":"Here is a free code snippet to create a Multi Item Carousel JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Multi Item Carousel JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Multi Item Carousel JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-17T16:47:00+00:00","article_modified_time":"2024-01-22T09:48:51+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"37 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Multi Item Carousel JavaScript","datePublished":"2024-01-17T16:47:00+00:00","dateModified":"2024-01-22T09:48:51+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/"},"wordCount":147,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png","articleSection":["Carousel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/","url":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/","name":"Multi Item Carousel JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png","datePublished":"2024-01-17T16:47:00+00:00","dateModified":"2024-01-22T09:48:51+00:00","description":"Here is a free code snippet to create a Multi Item Carousel JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2022\/05\/Multi-Item-Carousel-JavaScript.png","width":1280,"height":960,"caption":"Multi Item Carousel JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/carousel\/multi-item-carousel-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Carousel","item":"https:\/\/codehim.com\/category\/carousel\/"},{"@type":"ListItem","position":3,"name":"Multi Item Carousel JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":10907,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=6689"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/6689\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/7564"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=6689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=6689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=6689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}