@egjs/flicking 4.2.5 → 4.4.1

package/dist/flicking.js

@@ -4,13 +4,13 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.2.5
+version: 4.4.1
 */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes')) :
-    typeof define === 'function' && define.amd ? define(['@egjs/component', '@egjs/axes'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Flicking = factory(global.eg.Component, global.eg.Axes));
-}(this, (function (Component, Axes) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@egjs/axes'), require('@egjs/imready')) :
+    typeof define === 'function' && define.amd ? define(['@egjs/component', '@egjs/axes', '@egjs/imready'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Flicking = factory(global.eg.Component, global.eg.Axes, global.eg.ImReady));
+})(this, (function (Component, Axes, ImReady) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -276,6 +276,7 @@ version: 4.2.5
      * <ko>프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우</ko>
      * @property {number} NOT_INITIALIZED When the {@link Flicking#init} is not called before but is needed<ko>{@link Flicking#init}의 호출이 필요하나, 아직 호출되지 않았을 경우</ko>
      * @property {number} NO_ACTIVE When there're no active panel that flicking has selected. This may be due to the absence of any panels<ko>현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다</ko>
+     * @property {number} NOT_ALLOWED_IN_VIRTUAL When the non-allowed method is called while the virtual option is enabled<ko>virtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우</ko>
      */
     var CODE = {
       WRONG_TYPE: 0,
@@ -291,7 +292,8 @@ version: 4.2.5
       ANIMATION_ALREADY_PLAYING: 10,
       NOT_ALLOWED_IN_FRAMEWORK: 11,
       NOT_INITIALIZED: 12,
-      NO_ACTIVE: 13
+      NO_ACTIVE: 13,
+      NOT_ALLOWED_IN_VIRTUAL: 14
     };
     var MESSAGE = {
       WRONG_TYPE: function (wrongVal, correctTypes) {
@@ -305,9 +307,7 @@ version: 4.2.5
       VAL_MUST_NOT_NULL: function (val, name) {
         return name + " should be provided. Given: " + val;
       },
-      NOT_ATTACHED_TO_FLICKING: function (name) {
-        return name + " is not attached to the Flicking instance. \"init()\" should be called first.";
-      },
+      NOT_ATTACHED_TO_FLICKING: "This module is not attached to the Flicking instance. \"init()\" should be called first.",
       WRONG_OPTION: function (optionName, val) {
         return "Option \"" + optionName + "\" is not in correct format, given: " + val;
       },
@@ -323,7 +323,8 @@ version: 4.2.5
       ANIMATION_ALREADY_PLAYING: "Animation is already playing.",
       NOT_ALLOWED_IN_FRAMEWORK: "This behavior is not allowed in the frameworks like React, Vue, or Angular.",
       NOT_INITIALIZED: "Flicking is not initialized yet, call init() first.",
-      NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels."
+      NO_ACTIVE: "There's no active panel that Flicking has selected. This may be due to the absence of any panels.",
+      NOT_ALLOWED_IN_VIRTUAL: "This behavior is not allowed when the virtual option is enabled"
     };
 
     /*
@@ -419,6 +420,11 @@ version: 4.2.5
       FREE_SCROLL: "freeScroll",
       STRICT: "strict"
     };
+    var CLASS = {
+      VERTICAL: "vertical",
+      HIDDEN: "flicking-hidden",
+      DEFAULT_VIRTUAL: "flicking-panel"
+    };
 
     var Constants = {
         __proto__: null,
@@ -426,6 +432,7 @@ version: 4.2.5
         ALIGN: ALIGN,
         DIRECTION: DIRECTION,
         MOVE_TYPE: MOVE_TYPE,
+        CLASS: CLASS,
         ERROR_CODE: CODE
     };
 
@@ -473,9 +480,9 @@ version: 4.2.5
     var clamp = function (x, min, max) {
       return Math.max(Math.min(x, max), min);
     };
-    var getFlickingAttached = function (val, nameToThrowOnError) {
+    var getFlickingAttached = function (val) {
       if (!val) {
-        throw new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING(nameToThrowOnError), CODE.NOT_ATTACHED_TO_FLICKING);
+        throw new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING, CODE.NOT_ATTACHED_TO_FLICKING);
       }
 
       return val;
@@ -591,6 +598,12 @@ version: 4.2.5
 
       return parsed;
     };
+    var parseCSSSizeValue = function (val) {
+      return isString(val) ? val : val + "px";
+    };
+    var parsePanelAlign = function (align) {
+      return typeof align === "object" ? align.panel : align;
+    };
     var getDirection = function (start, end) {
       if (start === end) return DIRECTION.NONE;
       return start < end ? DIRECTION.NEXT : DIRECTION.PREV;
@@ -684,6 +697,17 @@ version: 4.2.5
 
       return null;
     };
+    var findRight = function (array, checker) {
+      for (var idx = array.length - 1; idx >= 0; idx--) {
+        var val = array[idx];
+
+        if (checker(val)) {
+          return val;
+        }
+      }
+
+      return null;
+    };
     var findIndex = function (array, checker) {
       for (var idx = 0; idx < array.length; idx++) {
         if (checker(array[idx])) {
@@ -700,6 +724,26 @@ version: 4.2.5
     var getStyle = function (el) {
       return window.getComputedStyle(el) || el.currentStyle;
     };
+    var setSize = function (el, _a) {
+      var width = _a.width,
+          height = _a.height;
+
+      if (width != null) {
+        if (isString(width)) {
+          el.style.width = width;
+        } else {
+          el.style.width = width + "px";
+        }
+      }
+
+      if (height != null) {
+        if (isString(height)) {
+          el.style.height = height;
+        } else {
+          el.style.height = height + "px";
+        }
+      }
+    };
     var isBetween = function (val, min, max) {
       return val >= min && val <= max;
     };
@@ -712,11 +756,52 @@ version: 4.2.5
         return index;
       }
     };
+    var range = function (end) {
+      var arr = new Array(end);
+
+      for (var i = 0; i < end; i++) {
+        arr[i] = i;
+      }
+
+      return arr;
+    };
     var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
       obj.__proto__ = proto;
       return obj;
     };
 
+    var Utils = {
+        __proto__: null,
+        merge: merge,
+        getElement: getElement,
+        checkExistence: checkExistence,
+        clamp: clamp,
+        getFlickingAttached: getFlickingAttached,
+        toArray: toArray,
+        parseAlign: parseAlign$1,
+        parseBounce: parseBounce,
+        parseArithmeticSize: parseArithmeticSize,
+        parseArithmeticExpression: parseArithmeticExpression,
+        parseCSSSizeValue: parseCSSSizeValue,
+        parsePanelAlign: parsePanelAlign,
+        getDirection: getDirection,
+        parseElement: parseElement,
+        getMinusCompensatedIndex: getMinusCompensatedIndex,
+        includes: includes,
+        isString: isString,
+        circulatePosition: circulatePosition,
+        find: find,
+        findRight: findRight,
+        findIndex: findIndex,
+        getProgress: getProgress,
+        getStyle: getStyle,
+        setSize: setSize,
+        isBetween: isBetween,
+        circulateIndex: circulateIndex,
+        range: range,
+        setPrototypeOf: setPrototypeOf
+    };
+
     /*
      * Copyright (c) 2015 NAVER Corp.
      * egjs projects are licensed under the MIT license
@@ -740,7 +825,9 @@ version: 4.2.5
      * ```
      */
 
-    var FlickingError = function (_super) {
+    var FlickingError =
+    /*#__PURE__*/
+    function (_super) {
       __extends(FlickingError, _super);
       /**
        * @param message Error message<ko>에러 메시지</ko>
@@ -769,7 +856,9 @@ version: 4.2.5
      * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
      */
 
-    var Viewport = function () {
+    var Viewport =
+    /*#__PURE__*/
+    function () {
       /**
        * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
        */
@@ -892,10 +981,10 @@ version: 4.2.5
         this._width = el.clientWidth;
         this._height = el.clientHeight;
         this._padding = {
-          left: parseFloat(elStyle.paddingLeft),
-          right: parseFloat(elStyle.paddingRight),
-          top: parseFloat(elStyle.paddingTop),
-          bottom: parseFloat(elStyle.paddingBottom)
+          left: elStyle.paddingLeft ? parseFloat(elStyle.paddingLeft) : 0,
+          right: elStyle.paddingRight ? parseFloat(elStyle.paddingRight) : 0,
+          top: elStyle.paddingTop ? parseFloat(elStyle.paddingTop) : 0,
+          bottom: elStyle.paddingBottom ? parseFloat(elStyle.paddingBottom) : 0
         };
         this._isBorderBoxSizing = elStyle.boxSizing === "border-box";
       };
@@ -903,6 +992,412 @@ version: 4.2.5
       return Viewport;
     }();
 
+    var AutoResizer =
+    /*#__PURE__*/
+    function () {
+      function AutoResizer(flicking) {
+        var _this = this;
+
+        this._onResize = function () {
+          void _this._flicking.resize();
+        }; // eslint-disable-next-line @typescript-eslint/member-ordering
+
+
+        this._skipFirstResize = function () {
+          var isFirstResize = true;
+          return function () {
+            if (isFirstResize) {
+              isFirstResize = false;
+              return;
+            }
+
+            _this._onResize();
+          };
+        }();
+
+        this._flicking = flicking;
+        this._enabled = false;
+        this._resizeObserver = null;
+      }
+
+      var __proto = AutoResizer.prototype;
+      Object.defineProperty(__proto, "enabled", {
+        get: function () {
+          return this._enabled;
+        },
+        enumerable: false,
+        configurable: true
+      });
+
+      __proto.enable = function () {
+        var flicking = this._flicking;
+        var viewport = flicking.viewport;
+
+        if (this._enabled) {
+          this.disable();
+        }
+
+        if (flicking.useResizeObserver && !!window.ResizeObserver) {
+          var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
+          var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
+          resizeObserver.observe(flicking.viewport.element);
+          this._resizeObserver = resizeObserver;
+        } else {
+          window.addEventListener("resize", this._onResize);
+        }
+
+        this._enabled = true;
+        return this;
+      };
+
+      __proto.disable = function () {
+        if (!this._enabled) return this;
+        var resizeObserver = this._resizeObserver;
+
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+          this._resizeObserver = null;
+        } else {
+          window.removeEventListener("resize", this._onResize);
+        }
+
+        this._enabled = false;
+        return this;
+      };
+
+      return AutoResizer;
+    }();
+
+    /**
+     * @internal
+     */
+    var VanillaElementProvider =
+    /*#__PURE__*/
+    function () {
+      function VanillaElementProvider(element) {
+        this._element = element;
+        this._rendered = true;
+      }
+
+      var __proto = VanillaElementProvider.prototype;
+      Object.defineProperty(__proto, "element", {
+        get: function () {
+          return this._element;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "rendered", {
+        get: function () {
+          return this._rendered;
+        },
+        enumerable: false,
+        configurable: true
+      });
+
+      __proto.show = function (flicking) {
+        var el = this.element;
+        var cameraEl = flicking.camera.element;
+
+        if (el.parentElement !== cameraEl) {
+          cameraEl.appendChild(el);
+          this._rendered = true;
+        }
+      };
+
+      __proto.hide = function (flicking) {
+        var el = this.element;
+        var cameraEl = flicking.camera.element;
+
+        if (el.parentElement === cameraEl) {
+          cameraEl.removeChild(el);
+          this._rendered = false;
+        }
+      };
+
+      return VanillaElementProvider;
+    }();
+
+    /*
+     * Copyright (c) 2015 NAVER Corp.
+     * egjs projects are licensed under the MIT license
+     */
+
+    /**
+     * @internal
+     */
+    var VirtualElementProvider =
+    /*#__PURE__*/
+    function () {
+      function VirtualElementProvider(flicking) {
+        this._flicking = flicking;
+      }
+
+      var __proto = VirtualElementProvider.prototype;
+      Object.defineProperty(__proto, "element", {
+        get: function () {
+          return this._virtualElement.nativeElement;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "rendered", {
+        get: function () {
+          return this._virtualElement.visible;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "_virtualElement", {
+        get: function () {
+          var flicking = this._flicking;
+          var elIndex = this._panel.elementIndex;
+          var virtualElements = flicking.virtual.elements;
+          return virtualElements[elIndex];
+        },
+        enumerable: false,
+        configurable: true
+      });
+
+      __proto.init = function (panel) {
+        this._panel = panel;
+      };
+
+      __proto.show = function () {// DO_NOTHING
+        // Actual element visibility is controlled by VirtualManager
+      };
+
+      __proto.hide = function () {// DO_NOTHING
+        // Actual element visibility is controlled by VirtualManager
+      };
+
+      return VirtualElementProvider;
+    }();
+
+    /**
+     * A manager class to add / remove virtual panels
+     */
+
+    var VirtualManager =
+    /*#__PURE__*/
+    function () {
+      function VirtualManager(flicking, options) {
+        var _a, _b, _c, _d;
+
+        this._flicking = flicking;
+        this._renderPanel = (_a = options === null || options === void 0 ? void 0 : options.renderPanel) !== null && _a !== void 0 ? _a : function () {
+          return "";
+        };
+        this._initialPanelCount = (_b = options === null || options === void 0 ? void 0 : options.initialPanelCount) !== null && _b !== void 0 ? _b : -1;
+        this._cache = (_c = options === null || options === void 0 ? void 0 : options.cache) !== null && _c !== void 0 ? _c : false;
+        this._panelClass = (_d = options === null || options === void 0 ? void 0 : options.panelClass) !== null && _d !== void 0 ? _d : CLASS.DEFAULT_VIRTUAL;
+        this._elements = [];
+      }
+
+      var __proto = VirtualManager.prototype;
+      Object.defineProperty(__proto, "elements", {
+        get: function () {
+          return this._elements;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "renderPanel", {
+        // Options
+
+        /**
+         * A rendering function for the panel element's innerHTML
+         * @ko 패널 엘리먼트의 innerHTML을 렌더링하는 함수
+         * @type {function}
+         * @param {VirtualPanel} panel Instance of the panel<ko>패널 인스턴스</ko>
+         * @param {number} index Index of the panel<ko>패널 인덱스</ko>
+         * @default "() => {}"
+         */
+        get: function () {
+          return this._renderPanel;
+        },
+        set: function (val) {
+          this._renderPanel = val;
+
+          this._flicking.renderer.panels.forEach(function (panel) {
+            return panel.uncacheRenderResult();
+          });
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "initialPanelCount", {
+        /**
+         * Initial panel count to render
+         * @ko 최초로 렌더링할 패널의 개수
+         * @readonly
+         * @type {number}
+         * @default -1
+         */
+        get: function () {
+          return this._initialPanelCount;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "cache", {
+        /**
+         * Whether to cache rendered panel's innerHTML
+         * @ko 렌더링된 패널의 innerHTML 정보를 캐시할지 여부
+         * @type {boolean}
+         * @default false
+         */
+        get: function () {
+          return this._cache;
+        },
+        set: function (val) {
+          this._cache = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "panelClass", {
+        /**
+         * The class name that will be applied to rendered panel elements
+         * @ko 렌더링되는 패널 엘리먼트에 적용될 클래스 이름
+         * @type {string}
+         * @default "flicking-panel"
+         */
+        get: function () {
+          return this._panelClass;
+        },
+        set: function (val) {
+          this._panelClass = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
+
+      __proto.init = function () {
+        var flicking = this._flicking;
+        if (!flicking.virtualEnabled) return;
+
+        if (!flicking.externalRenderer && !flicking.renderExternal) {
+          this._initVirtualElements();
+        }
+
+        var virtualElements = flicking.camera.children;
+        this._elements = virtualElements.map(function (el) {
+          return {
+            nativeElement: el,
+            visible: true
+          };
+        });
+      };
+
+      __proto.show = function (index) {
+        var el = this._elements[index];
+        var nativeEl = el.nativeElement;
+        el.visible = true;
+
+        if (nativeEl.style.display) {
+          nativeEl.style.display = "";
+        }
+      };
+
+      __proto.hide = function (index) {
+        var el = this._elements[index];
+        var nativeEl = el.nativeElement;
+        el.visible = false;
+        nativeEl.style.display = "none";
+      };
+      /**
+       * Add new virtual panels at the end of the list
+       * @ko 새로운 가상 패널들을 리스트의 끝에 추가합니다
+       * @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
+       * @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
+       */
+
+
+      __proto.append = function (count) {
+        if (count === void 0) {
+          count = 1;
+        }
+
+        var flicking = this._flicking;
+        return this.insert(flicking.panels.length, count);
+      };
+      /**
+       * Add new virtual panels at the start of the list
+       * @ko 새로운 가상 패널들을 리스트의 시작에 추가합니다
+       * @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
+       * @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
+       */
+
+
+      __proto.prepend = function (count) {
+        if (count === void 0) {
+          count = 1;
+        }
+
+        return this.insert(0, count);
+      };
+      /**
+       * Add new virtual panels at the given index
+       * @ko 새로운 가상 패널들을 주어진 인덱스에 추가합니다
+       * @param {number} count The number of panels to add<ko>추가할 패널의 개수</ko>
+       * @returns {Array<VirtualPanel>} The new panels added<ko>새롭게 추가된 패널들</ko>
+       */
+
+
+      __proto.insert = function (index, count) {
+        if (count === void 0) {
+          count = 1;
+        }
+
+        if (count <= 0) return [];
+        var flicking = this._flicking;
+        return flicking.renderer.batchInsert({
+          index: index,
+          elements: range(count),
+          hasDOMInElements: false
+        });
+      };
+      /**
+       * Remove panels at the given index
+       * @ko 주어진 인덱스에서 패널들을 삭제합니다
+       * @param {number} count The number of panels to remove<ko>삭제할 패널의 개수</ko>
+       * @returns {Array<VirtualPanel>} The panels removed<ko>삭제된 패널들</ko>
+       */
+
+
+      __proto.remove = function (index, count) {
+        if (count <= 0) return [];
+        var flicking = this._flicking;
+        return flicking.renderer.batchRemove({
+          index: index,
+          deleteCount: count,
+          hasDOMInElements: false
+        });
+      };
+
+      __proto._initVirtualElements = function () {
+        var _this = this;
+
+        var flicking = this._flicking;
+        var cameraElement = flicking.camera.element;
+        var panelsPerView = flicking.panelsPerView;
+        var fragment = document.createDocumentFragment();
+        var newElements = range(panelsPerView + 1).map(function (idx) {
+          var panelEl = document.createElement("div");
+          panelEl.className = _this._panelClass;
+          panelEl.dataset.elementIndex = idx.toString();
+          return panelEl;
+        });
+        newElements.forEach(function (el) {
+          fragment.appendChild(el);
+        });
+        cameraElement.appendChild(fragment);
+      };
+
+      return VirtualManager;
+    }();
+
     /**
      * All possible @egjs/axes event keys
      * @internal
@@ -937,7 +1432,9 @@ version: 4.2.5
      */
 
 
-    var State = function () {
+    var State =
+    /*#__PURE__*/
+    function () {
       function State() {
         this._delta = 0;
         this._targetPanel = null;
@@ -1094,7 +1591,9 @@ version: 4.2.5
      * @internal
      */
 
-    var IdleState = function (_super) {
+    var IdleState =
+    /*#__PURE__*/
+    function (_super) {
       __extends(IdleState, _super);
 
       function IdleState() {
@@ -1181,7 +1680,9 @@ version: 4.2.5
      * @internal
      */
 
-    var HoldingState = function (_super) {
+    var HoldingState =
+    /*#__PURE__*/
+    function (_super) {
       __extends(HoldingState, _super);
 
       function HoldingState() {
@@ -1334,7 +1835,9 @@ version: 4.2.5
      * @internal
      */
 
-    var DraggingState = function (_super) {
+    var DraggingState =
+    /*#__PURE__*/
+    function (_super) {
       __extends(DraggingState, _super);
 
       function DraggingState() {
@@ -1397,7 +1900,9 @@ version: 4.2.5
      * @internal
      */
 
-    var AnimatingState = function (_super) {
+    var AnimatingState =
+    /*#__PURE__*/
+    function (_super) {
       __extends(AnimatingState, _super);
 
       function AnimatingState() {
@@ -1471,7 +1976,9 @@ version: 4.2.5
      * @internal
      */
 
-    var DisabledState = function (_super) {
+    var DisabledState =
+    /*#__PURE__*/
+    function (_super) {
       __extends(DisabledState, _super);
 
       function DisabledState() {
@@ -1527,7 +2034,9 @@ version: 4.2.5
      * @internal
      */
 
-    var StateMachine = function () {
+    var StateMachine =
+    /*#__PURE__*/
+    function () {
       function StateMachine() {
         var _this = this;
 
@@ -1616,7 +2125,9 @@ version: 4.2.5
      * @internal
      */
 
-    var AxesController = function () {
+    var AxesController =
+    /*#__PURE__*/
+    function () {
       /** */
       function AxesController() {
         var _this = this;
@@ -1845,11 +2356,15 @@ version: 4.2.5
 
 
       __proto.destroy = function () {
-        var _a, _b;
+        var _a;
 
-        this.removePreventClickHandler();
-        (_a = this._axes) === null || _a === void 0 ? void 0 : _a.destroy();
-        (_b = this._panInput) === null || _b === void 0 ? void 0 : _b.destroy();
+        if (this._axes) {
+          this.removePreventClickHandler();
+
+          this._axes.destroy();
+        }
+
+        (_a = this._panInput) === null || _a === void 0 ? void 0 : _a.destroy();
 
         this._resetInternalValues();
       };
@@ -1895,7 +2410,7 @@ version: 4.2.5
       __proto.update = function (controlParams) {
         var _a;
 
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
         var axes = this._axes;
         var axis = axes.axis[POSITION_KEY];
@@ -1913,7 +2428,7 @@ version: 4.2.5
 
 
       __proto.addPreventClickHandler = function () {
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var axes = this._axes;
         var cameraEl = flicking.camera.element;
         axes.on(EVENT.HOLD, this._onAxesHold);
@@ -1929,7 +2444,7 @@ version: 4.2.5
 
 
       __proto.removePreventClickHandler = function () {
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var axes = this._axes;
         var cameraEl = flicking.camera.element;
         axes.off(EVENT.HOLD, this._onAxesHold);
@@ -1965,17 +2480,25 @@ version: 4.2.5
 
         var _this = this;
 
+        var _b;
+
         var axes = this._axes;
+        var state = this._stateMachine.state;
 
         if (!axes) {
-          return Promise.reject(new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING("Control"), CODE.NOT_ATTACHED_TO_FLICKING));
+          return Promise.reject(new FlickingError(MESSAGE.NOT_ATTACHED_TO_FLICKING, CODE.NOT_ATTACHED_TO_FLICKING));
         }
 
         var startPos = axes.get([POSITION_KEY])[POSITION_KEY];
 
         if (startPos === position) {
-          var flicking = getFlickingAttached(this._flicking, "Control");
+          var flicking = getFlickingAttached(this._flicking);
           flicking.camera.lookAt(position);
+
+          if (state.targetPanel) {
+            flicking.control.setActive(state.targetPanel, flicking.control.activePanel, (_b = axesEvent === null || axesEvent === void 0 ? void 0 : axesEvent.isTrusted) !== null && _b !== void 0 ? _b : false);
+          }
+
           return Promise.resolve();
         }
 
@@ -2006,7 +2529,7 @@ version: 4.2.5
         };
 
         if (duration === 0) {
-          var flicking = getFlickingAttached(this._flicking, "Control");
+          var flicking = getFlickingAttached(this._flicking);
           var camera = flicking.camera;
           animate();
           var newPos = flicking.circularEnabled ? circulatePosition(position, camera.range.min, camera.range.max) : position;
@@ -2051,7 +2574,9 @@ version: 4.2.5
      * @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트
      */
 
-    var Control$1 = function () {
+    var Control$1 =
+    /*#__PURE__*/
+    function () {
       /** */
       function Control() {
         this._flicking = null;
@@ -2195,7 +2720,7 @@ version: 4.2.5
 
 
       __proto.updatePosition = function (_progressInPanel) {
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
         var activePanel = this._activePanel;
 
@@ -2212,7 +2737,7 @@ version: 4.2.5
 
 
       __proto.updateInput = function () {
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
 
         this._controller.update(camera.controlParams);
@@ -2279,7 +2804,7 @@ version: 4.2.5
         return __awaiter(this, void 0, void 0, function () {
           var flicking, camera, position, nearestAnchor, camPos_1, camRangeDiff, possiblePositions;
           return __generator(this, function (_c) {
-            flicking = getFlickingAttached(this._flicking, "Control");
+            flicking = getFlickingAttached(this._flicking);
             camera = flicking.camera;
             position = panel.position;
             nearestAnchor = camera.findNearestAnchor(position);
@@ -2331,7 +2856,7 @@ version: 4.2.5
       __proto.setActive = function (newActivePanel, prevActivePanel, isTrusted) {
         var _a;
 
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         this._activePanel = newActivePanel;
         flicking.camera.updateAdaptiveHeight();
 
@@ -2354,7 +2879,7 @@ version: 4.2.5
       __proto._triggerIndexChangeEvent = function (panel, position, axesEvent) {
         var _a;
 
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var triggeringEvent = panel !== this._activePanel ? EVENTS.WILL_CHANGE : EVENTS.WILL_RESTORE;
         var camera = flicking.camera;
         var activePanel = this._activePanel;
@@ -2382,7 +2907,7 @@ version: 4.2.5
           var _this = this;
 
           return __generator(this, function (_b) {
-            flicking = getFlickingAttached(this._flicking, "Control");
+            flicking = getFlickingAttached(this._flicking);
 
             animate = function () {
               return _this._controller.animateTo(position, duration, axesEvent);
@@ -2432,7 +2957,9 @@ version: 4.2.5
      * A data component that has actual position where the camera should be stopped at
      * @ko 카메라가 정지해야하는 실제 위치를 담고 있는 데이터 컴포넌트
      */
-    var AnchorPoint = function () {
+    var AnchorPoint =
+    /*#__PURE__*/
+    function () {
       /**
        * @param {object} options An options object<ko>옵션 객체</ko>
        * @param {number} [options.index] Index of AnchorPoint<ko>AnchorPoint의 인덱스</ko>
@@ -2496,7 +3023,9 @@ version: 4.2.5
      * @ko 입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식을 사용하는 {@link Control}
      */
 
-    var SnapControl = function (_super) {
+    var SnapControl =
+    /*#__PURE__*/
+    function (_super) {
       __extends(SnapControl, _super);
       /** */
 
@@ -2570,7 +3099,7 @@ version: 4.2.5
         return __awaiter(this, void 0, void 0, function () {
           var flicking, camera, activeAnchor, anchorAtCamera, state, snapThreshold, posDelta, absPosDelta, snapDelta, targetAnchor;
           return __generator(this, function (_a) {
-            flicking = getFlickingAttached(this._flicking, "Control");
+            flicking = getFlickingAttached(this._flicking);
             camera = flicking.camera;
             activeAnchor = camera.findActiveAnchor();
             anchorAtCamera = camera.findNearestAnchor(camera.position);
@@ -2613,7 +3142,7 @@ version: 4.2.5
       };
 
       __proto._findSnappedAnchor = function (position, anchorAtCamera) {
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
         var count = this._count;
         var currentPos = camera.position;
@@ -2673,7 +3202,7 @@ version: 4.2.5
       __proto._findAdjacentAnchor = function (posDelta, anchorAtCamera) {
         var _a;
 
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
         var adjacentAnchor = (_a = posDelta > 0 ? camera.getNextAnchor(anchorAtCamera) : camera.getPrevAnchor(anchorAtCamera)) !== null && _a !== void 0 ? _a : anchorAtCamera;
         return adjacentAnchor;
@@ -2702,7 +3231,9 @@ version: 4.2.5
      * @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 {@link Control}
      */
 
-    var FreeControl = function (_super) {
+    var FreeControl =
+    /*#__PURE__*/
+    function (_super) {
       __extends(FreeControl, _super);
       /** */
 
@@ -2747,7 +3278,7 @@ version: 4.2.5
        */
 
       __proto.updatePosition = function (progressInPanel) {
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
         var activePanel = this._activePanel;
 
@@ -2799,7 +3330,7 @@ version: 4.2.5
         return __awaiter(this, void 0, void 0, function () {
           var flicking, camera, targetPos, anchorAtPosition, targetPanel;
           return __generator(this, function (_a) {
-            flicking = getFlickingAttached(this._flicking, "Control");
+            flicking = getFlickingAttached(this._flicking);
             camera = flicking.camera;
             targetPos = camera.clampToReachablePosition(position);
             anchorAtPosition = camera.findAnchorIncludePosition(targetPos);
@@ -2836,7 +3367,9 @@ version: 4.2.5
      * @ko 한번에 최대로 이동할 패널의 개수를 선택 가능한 {@link Control}
      */
 
-    var StrictControl = function (_super) {
+    var StrictControl =
+    /*#__PURE__*/
+    function (_super) {
       __extends(StrictControl, _super);
       /** */
 
@@ -2900,7 +3433,7 @@ version: 4.2.5
       __proto.updateInput = function () {
         var _a;
 
-        var flicking = getFlickingAttached(this._flicking, "Control");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera;
         var renderer = flicking.renderer;
         var controller = this._controller;
@@ -3009,7 +3542,7 @@ version: 4.2.5
         return __awaiter(this, void 0, void 0, function () {
           var flicking, camera, activePanel, axesRange, indexRange, cameraRange, clampedPosition, anchorAtPosition, prevPos, isOverThreshold, adjacentAnchor, targetPos, targetPanel, anchors, firstAnchor, lastAnchor, shouldBounceToFirst, shouldBounceToLast, targetAnchor;
           return __generator(this, function (_a) {
-            flicking = getFlickingAttached(this._flicking, "Control");
+            flicking = getFlickingAttached(this._flicking);
             camera = flicking.camera;
             activePanel = this._activePanel;
             axesRange = this._controller.range;
@@ -3101,7 +3634,9 @@ version: 4.2.5
      * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
      */
 
-    var Camera$1 = function () {
+    var Camera$1 =
+    /*#__PURE__*/
+    function () {
       /** */
       function Camera(_a) {
         var _this = this;
@@ -3157,8 +3692,8 @@ version: 4.2.5
         // Internal states getter
 
         /**
-         * The camera(`.flicking-camera`) element
-         * @ko 카메라(`.flicking-camera`) 엘리먼트
+         * The camera element(`.flicking-camera`)
+         * @ko 카메라 엘리먼트(`.flicking-camera`)
          * @type {HTMLElement}
          * @readonly
          */
@@ -3168,6 +3703,19 @@ version: 4.2.5
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "children", {
+        /**
+         * An array of the child elements of the camera element(`.flicking-camera`)
+         * @ko 카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열
+         * @type {HTMLElement[]}
+         * @readonly
+         */
+        get: function () {
+          return toArray(this._el.children);
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "position", {
         /**
          * Current position of the camera
@@ -3451,7 +3999,7 @@ version: 4.2.5
 
         this._checkReachEnd(prevPos, pos);
 
-        this._applyTransform();
+        this.applyTransform();
       };
       /**
        * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
@@ -3551,7 +4099,7 @@ version: 4.2.5
 
 
       __proto.findActiveAnchor = function () {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var activeIndex = flicking.control.activeIndex;
         return find(this._anchors, function (anchor) {
           return anchor.panel.index === activeIndex;
@@ -3594,7 +4142,7 @@ version: 4.2.5
       __proto.canSee = function (panel) {
         var visibleRange = this.visibleRange; // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
 
-        return panel.includeRange(visibleRange.min, visibleRange.max, false);
+        return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
       };
       /**
        * Update Camera's {@link Camera#alignPosition alignPosition}
@@ -3622,7 +4170,7 @@ version: 4.2.5
 
 
       __proto.updateAnchors = function () {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var panels = flicking.renderer.panels;
         this._anchors = panels.map(function (panel, index) {
           return new AnchorPoint({
@@ -3645,27 +4193,34 @@ version: 4.2.5
 
 
       __proto.updateAdaptiveHeight = function () {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var activePanel = flicking.control.activePanel;
         if (!flicking.horizontal || !flicking.adaptive || !activePanel) return;
         flicking.viewport.setSize({
           height: activePanel.height
         });
       };
+      /**
+       * Update current offset of the camera
+       * @ko 현재 카메라의 오프셋을 업데이트합니다
+       * @chainable
+       * @return {this}
+       */
+
 
       __proto.updateOffset = function () {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
+        var position = this._position;
         var unRenderedPanels = flicking.panels.filter(function (panel) {
           return !panel.rendered;
         });
-        var position = this._position;
         this._offset = unRenderedPanels.filter(function (panel) {
           return panel.position + panel.offset < position;
         }).reduce(function (offset, panel) {
           return offset + panel.sizeIncludingMargin;
         }, 0);
-
-        this._applyTransform();
+        this.applyTransform();
+        return this;
       };
       /**
        * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
@@ -3682,6 +4237,21 @@ version: 4.2.5
         };
         return this;
       };
+      /**
+       * Apply "transform" style with the current position to camera element
+       * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
+       * @chainable
+       * @return {this}
+       */
+
+
+      __proto.applyTransform = function () {
+        var el = this._el;
+        var flicking = getFlickingAttached(this._flicking);
+        var actualPosition = this._position - this._alignPos - this._offset;
+        el.style[this._transform] = flicking.horizontal ? "translate(" + -actualPosition + "px)" : "translate(0, " + -actualPosition + "px)";
+        return this;
+      };
 
       __proto._resetInternalValues = function () {
         this._position = 0;
@@ -3702,7 +4272,7 @@ version: 4.2.5
       __proto._refreshVisiblePanels = function () {
         var _this = this;
 
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var panels = flicking.renderer.panels;
         var newVisiblePanels = panels.filter(function (panel) {
           return _this.canSee(panel);
@@ -3730,7 +4300,7 @@ version: 4.2.5
       __proto._checkNeedPanel = function () {
         var needPanelTriggered = this._needPanelTriggered;
         if (needPanelTriggered.prev && needPanelTriggered.next) return;
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var panels = flicking.renderer.panels;
 
         if (panels.length <= 0) {
@@ -3784,7 +4354,7 @@ version: 4.2.5
       };
 
       __proto._checkReachEnd = function (prevPos, newPos) {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var range = this._range;
         var wasBetweenRange = prevPos > range.min && prevPos < range.max;
         var isBetweenRange = newPos > range.min && newPos < range.max;
@@ -3795,13 +4365,6 @@ version: 4.2.5
         }));
       };
 
-      __proto._applyTransform = function () {
-        var el = this._el;
-        var flicking = getFlickingAttached(this._flicking, "Camera");
-        var actualPosition = this._position - this._alignPos - this._offset;
-        el.style[this._transform] = flicking.horizontal ? "translate(" + -actualPosition + "px)" : "translate(0, " + -actualPosition + "px)";
-      };
-
       return Camera;
     }();
 
@@ -3810,7 +4373,9 @@ version: 4.2.5
      * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
      */
 
-    var LinearCamera = function (_super) {
+    var LinearCamera =
+    /*#__PURE__*/
+    function (_super) {
       __extends(LinearCamera, _super);
 
       function LinearCamera() {
@@ -3832,7 +4397,7 @@ version: 4.2.5
       __proto.updateRange = function () {
         var _a, _b;
 
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var renderer = flicking.renderer;
         var firstPanel = renderer.getPanel(0);
         var lastPanel = renderer.getPanel(renderer.panelCount - 1);
@@ -3851,7 +4416,9 @@ version: 4.2.5
      * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
      */
 
-    var CircularCamera = function (_super) {
+    var CircularCamera =
+    /*#__PURE__*/
+    function (_super) {
       __extends(CircularCamera, _super);
 
       function CircularCamera() {
@@ -3909,12 +4476,32 @@ version: 4.2.5
       __proto.findAnchorIncludePosition = function (position) {
         if (!this._circularEnabled) return _super.prototype.findAnchorIncludePosition.call(this, position);
         var range = this._range;
+        var anchors = this._anchors;
+        var rangeDiff = this.rangeDiff;
+        var anchorCount = anchors.length;
         var positionInRange = circulatePosition(position, range.min, range.max);
 
         var anchorInRange = _super.prototype.findAnchorIncludePosition.call(this, positionInRange);
 
+        if (anchorCount > 0 && (position === range.min || position === range.max)) {
+          var possibleAnchors = [anchorInRange, new AnchorPoint({
+            index: 0,
+            position: anchors[0].position + rangeDiff,
+            panel: anchors[0].panel
+          }), new AnchorPoint({
+            index: anchorCount - 1,
+            position: anchors[anchorCount - 1].position - rangeDiff,
+            panel: anchors[anchorCount - 1].panel
+          })].filter(function (anchor) {
+            return !!anchor;
+          });
+          anchorInRange = possibleAnchors.reduce(function (nearest, anchor) {
+            if (!nearest) return anchor;
+            return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
+          }, null);
+        }
+
         if (!anchorInRange) return null;
-        var rangeDiff = this.rangeDiff;
 
         if (position < range.min) {
           var loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
@@ -3959,9 +4546,9 @@ version: 4.2.5
 
 
         if (visibleRange.min < range.min) {
-          return visibleInCurrentRange || panel.includeRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff, false);
+          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
         } else if (visibleRange.max > range.max) {
-          return visibleInCurrentRange || panel.includeRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff, false);
+          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
         }
 
         return visibleInCurrentRange;
@@ -3978,7 +4565,7 @@ version: 4.2.5
 
 
       __proto.updateRange = function () {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var renderer = flicking.renderer;
         var panels = renderer.panels;
 
@@ -4014,13 +4601,20 @@ version: 4.2.5
           };
         }
 
+        this.updateOffset();
+        return this;
+      };
+
+      __proto.updateOffset = function () {
         this._updateCircularOffset();
 
-        return this;
+        return _super.prototype.updateOffset.call(this);
       };
 
       __proto.lookAt = function (pos) {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var _this = this;
+
+        var flicking = getFlickingAttached(this._flicking);
         var prevPos = this._position;
         if (pos === prevPos) return _super.prototype.lookAt.call(this, pos);
         var panels = flicking.renderer.panels;
@@ -4029,22 +4623,23 @@ version: 4.2.5
         });
         this._position = pos;
 
+        _super.prototype.lookAt.call(this, pos);
+
         if (toggled.some(function (isToggled) {
           return isToggled;
         })) {
-          this._updateCircularOffset();
-
-          void flicking.renderer.render();
+          void flicking.renderer.render().then(function () {
+            _this.updateOffset();
+          });
         }
-
-        return _super.prototype.lookAt.call(this, pos);
       };
 
-      __proto._applyTransform = function () {
+      __proto.applyTransform = function () {
         var el = this._el;
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
         el.style[this._transform] = flicking.horizontal ? "translate(" + -actualPosition + "px)" : "translate(0, " + -actualPosition + "px)";
+        return this;
       };
 
       __proto._resetInternalValues = function () {
@@ -4066,17 +4661,15 @@ version: 4.2.5
           return;
         }
 
-        var flicking = getFlickingAttached(this._flicking, "Camera");
-        var toggledPrev = [];
-        var toggledNext = [];
-        flicking.panels.filter(function (panel) {
+        var flicking = getFlickingAttached(this._flicking);
+        var toggled = flicking.panels.filter(function (panel) {
           return panel.toggled;
-        }).forEach(function (panel) {
-          if (panel.toggleDirection === DIRECTION.PREV) {
-            toggledPrev.push(panel);
-          } else {
-            toggledNext.push(panel);
-          }
+        });
+        var toggledPrev = toggled.filter(function (panel) {
+          return panel.toggleDirection === DIRECTION.PREV;
+        });
+        var toggledNext = toggled.filter(function (panel) {
+          return panel.toggleDirection === DIRECTION.NEXT;
         });
         this._circularOffset = this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
       };
@@ -4089,7 +4682,9 @@ version: 4.2.5
      * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
      */
 
-    var BoundCamera = function (_super) {
+    var BoundCamera =
+    /*#__PURE__*/
+    function (_super) {
       __extends(BoundCamera, _super);
 
       function BoundCamera() {
@@ -4109,7 +4704,7 @@ version: 4.2.5
       var __proto = BoundCamera.prototype;
 
       __proto.updateRange = function () {
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var renderer = flicking.renderer;
         var alignPos = this._alignPos;
         var firstPanel = renderer.getPanel(0);
@@ -4152,7 +4747,7 @@ version: 4.2.5
       __proto.updateAnchors = function () {
         var _this = this;
 
-        var flicking = getFlickingAttached(this._flicking, "Camera");
+        var flicking = getFlickingAttached(this._flicking);
         var panels = flicking.renderer.panels;
 
         if (panels.length <= 0) {
@@ -4274,20 +4869,23 @@ version: 4.2.5
      * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
      */
 
-    var Renderer$1 = function () {
+    var Renderer$1 =
+    /*#__PURE__*/
+    function () {
       /**
        * @param {object} options An options object<ko>옵션 오브젝트</ko>
-       * @param {Constants.ALIGN | string | number} [options.align] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>
+       * @param {Constants.ALIGN | string | number} [options.align="center"] An {@link Flicking#align align} value that will be applied to all panels<ko>전체 패널에 적용될 {@link Flicking#align align} 값</ko>
+       * @param {object} [options.strategy] An instance of RenderingStrategy(internal module)<ko>RenderingStrategy의 인스턴스(내부 모듈)</ko>
        */
       function Renderer(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.align,
-            align = _c === void 0 ? ALIGN.CENTER : _c;
-
+        var _b = _a.align,
+            align = _b === void 0 ? ALIGN.CENTER : _b,
+            strategy = _a.strategy;
         this._flicking = null;
         this._panels = []; // Bind options
 
         this._align = align;
+        this._strategy = strategy;
       }
 
       var __proto = Renderer.prototype;
@@ -4320,6 +4918,16 @@ version: 4.2.5
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "strategy", {
+        /**
+         * @internal
+         */
+        get: function () {
+          return this._strategy;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "align", {
         // Options Getter
 
@@ -4334,8 +4942,7 @@ version: 4.2.5
         // Options Setter
         set: function (val) {
           this._align = val;
-
-          var panelAlign = this._getPanelAlign();
+          var panelAlign = parsePanelAlign(val);
 
           this._panels.forEach(function (panel) {
             panel.align = panelAlign;
@@ -4381,6 +4988,14 @@ version: 4.2.5
       __proto.getPanel = function (index) {
         return this._panels[index] || null;
       };
+
+      __proto.forceRenderAllPanels = function () {
+        this._panels.forEach(function (panel) {
+          return panel.markForShow();
+        });
+
+        return Promise.resolve();
+      };
       /**
        * Update all panel sizes
        * @ko 모든 패널의 크기를 업데이트합니다
@@ -4390,10 +5005,15 @@ version: 4.2.5
 
 
       __proto.updatePanelSize = function () {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
+        var flicking = getFlickingAttached(this._flicking);
+        var panels = this._panels;
+        if (panels.length <= 0) return this;
 
         if (flicking.panelsPerView > 0) {
-          this._updatePanelSizeByGrid(flicking);
+          var firstPanel = panels[0];
+          firstPanel.resize();
+
+          this._updatePanelSizeByGrid(firstPanel, panels);
         } else {
           flicking.panels.forEach(function (panel) {
             return panel.resize();
@@ -4407,8 +5027,10 @@ version: 4.2.5
        * This will increase index of panels after by the number of panels added
        * @ko 주어진 인덱스에 새로운 패널들을 추가합니다
        * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
-       * @param {number} index Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
-       * @param {any[]} elements An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>
+       * @param {Array<object>} items An array of items to insert<ko>추가할 아이템들의 배열</ko>
+       * @param {number} [items.index] Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
+       * @param {any[]} [items.elements] An array of element or framework component with element in it<ko>엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열</ko>
+       * @param {boolean} [items.hasDOMInElements] Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다</ko>
        * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
        */
 
@@ -4423,11 +5045,10 @@ version: 4.2.5
         }
 
         var panels = this._panels;
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
+        var flicking = getFlickingAttached(this._flicking);
         var control = flicking.control;
-
-        var align = this._getPanelAlign();
-
+        var prevFirstPanel = panels[0];
+        var align = parsePanelAlign(this._align);
         var allPanelsInserted = items.reduce(function (addedPanels, item) {
           var _a;
 
@@ -4440,23 +5061,30 @@ version: 4.2.5
               flicking: flicking
             });
           });
-          panels.splice.apply(panels, __spreadArray([insertingIdx, 0], __read(panelsInserted))); // Insert the actual elements as camera element's children
+          panels.splice.apply(panels, __spreadArray([insertingIdx, 0], __read(panelsInserted)));
 
-          _this._insertPanelElements(panelsInserted, (_a = panelsPushed[0]) !== null && _a !== void 0 ? _a : null); // Resize the newly added panels
+          if (item.hasDOMInElements) {
+            // Insert the actual elements as camera element's children
+            _this._insertPanelElements(panelsInserted, (_a = panelsPushed[0]) !== null && _a !== void 0 ? _a : null);
+          } // Resize the newly added panels
 
 
-          panelsInserted.forEach(function (panel) {
-            return panel.resize();
-          });
+          if (flicking.panelsPerView > 0) {
+            var firstPanel = prevFirstPanel || panelsInserted[0].resize();
 
-          var insertedSize = _this._getPanelSizeSum(panelsInserted); // Update panel indexes & positions
+            _this._updatePanelSizeByGrid(firstPanel, panelsInserted);
+          } else {
+            panelsInserted.forEach(function (panel) {
+              return panel.resize();
+            });
+          } // Update panel indexes & positions
 
 
           panelsPushed.forEach(function (panel) {
             panel.increaseIndex(panelsInserted.length);
-            panel.increasePosition(insertedSize);
+            panel.updatePosition();
           });
-          return __spreadArray(__spreadArray([], __read(addedPanels)), __read(panelsInserted));
+          return __spreadArray(__spreadArray([], __read(addedPanels), false), __read(panelsInserted));
         }, []);
         if (allPanelsInserted.length <= 0) return []; // Update camera & control
 
@@ -4478,6 +5106,7 @@ version: 4.2.5
           added: allPanelsInserted,
           removed: []
         }));
+        this.checkPanelContentsReady(allPanelsInserted);
         return allPanelsInserted;
       };
       /**
@@ -4485,8 +5114,10 @@ version: 4.2.5
        * This will decrease index of panels after by the number of panels removed
        * @ko 주어진 인덱스의 패널을 제거합니다
        * 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
-       * @param {number} index Index of panel to remove<ko>제거할 패널의 인덱스</ko>
-       * @param {number} [deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
+       * @param {Array<object>} items An array of items to remove<ko>제거할 아이템들의 배열</ko>
+       * @param {number} [items.index] Index of panel to remove<ko>제거할 패널의 인덱스</ko>
+       * @param {number} [items.deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
+       * @param {boolean} [items.hasDOMInElements=1] Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element<ko>내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다</ko>
        * @return An array of removed panels<ko>제거된 패널들의 배열</ko>
        */
 
@@ -4501,7 +5132,7 @@ version: 4.2.5
         }
 
         var panels = this._panels;
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera,
             control = flicking.control;
         var activePanel = control.activePanel;
@@ -4514,28 +5145,29 @@ version: 4.2.5
           var panelsRemoved = panels.splice(removingIdx, deleteCount);
           if (panelsRemoved.length <= 0) return []; // Update panel indexes & positions
 
-          var removedSize = _this._getPanelSizeSum(panelsRemoved);
-
           panelsPulled.forEach(function (panel) {
             panel.decreaseIndex(panelsRemoved.length);
-            panel.decreasePosition(removedSize);
+            panel.updatePosition();
           });
 
-          _this._removePanelElements(panelsRemoved); // Remove panel elements
+          if (item.hasDOMInElements) {
+            _this._removePanelElements(panelsRemoved);
+          } // Remove panel elements
 
 
           panelsRemoved.forEach(function (panel) {
             return panel.destroy();
-          }); // Update camera & control
-
-          _this._updateCameraAndControl();
+          });
 
           if (includes(panelsRemoved, activePanel)) {
             control.resetActive();
           }
 
-          return __spreadArray(__spreadArray([], __read(removed)), __read(panelsRemoved));
-        }, []);
+          return __spreadArray(__spreadArray([], __read(removed), false), __read(panelsRemoved));
+        }, []); // Update camera & control
+
+        this._updateCameraAndControl();
+
         void this.render(); // FIXME: fix for animating case
 
         if (allPanelsRemoved.length > 0 && !control.animating) {
@@ -4560,21 +5192,79 @@ version: 4.2.5
         }));
         return allPanelsRemoved;
       };
+      /**
+       * @internal
+       */
 
-      __proto._getPanelAlign = function () {
-        var align = this._align;
-        return typeof align === "object" ? align.panel : align;
-      };
 
-      __proto._getPanelSizeSum = function (panels) {
-        var firstPanel = panels[0];
-        var lastPanel = panels[panels.length - 1];
-        var marginDiff = lastPanel.margin.next - firstPanel.margin.prev;
-        return lastPanel.range.max - firstPanel.range.min + marginDiff;
+      __proto.checkPanelContentsReady = function (checkingPanels) {
+        var _this = this;
+
+        var flicking = getFlickingAttached(this._flicking);
+        var resizeOnContentsReady = flicking.resizeOnContentsReady;
+        var panels = this._panels;
+        if (!resizeOnContentsReady || flicking.virtualEnabled) return;
+
+        var hasContents = function (panel) {
+          return !!panel.element.querySelector("img, video");
+        };
+
+        checkingPanels = checkingPanels.filter(function (panel) {
+          return hasContents(panel);
+        });
+        if (checkingPanels.length <= 0) return;
+        var contentsReadyChecker = new ImReady();
+        checkingPanels.forEach(function (panel) {
+          panel.loading = true;
+        });
+        contentsReadyChecker.on("readyElement", function (e) {
+          if (!_this._flicking) {
+            // Renderer's destroy() is called before
+            contentsReadyChecker.destroy();
+            return;
+          }
+
+          var panel = checkingPanels[e.index];
+          var camera = flicking.camera;
+          var control = flicking.control;
+          var prevProgressInPanel = control.activePanel ? camera.getProgressInPanel(control.activePanel) : 0;
+          panel.loading = false;
+          panel.resize();
+          panels.slice(panel.index + 1).forEach(function (panelBehind) {
+            return panelBehind.updatePosition();
+          });
+          if (!flicking.initialized) return;
+          camera.updateRange();
+          camera.updateAnchors();
+
+          if (control.animating) ; else {
+            control.updatePosition(prevProgressInPanel);
+            control.updateInput();
+          }
+        });
+        contentsReadyChecker.on("preReady", function (e) {
+          if (_this._flicking) {
+            void _this.render();
+          }
+
+          if (e.readyCount === e.totalCount) {
+            contentsReadyChecker.destroy();
+          }
+        });
+        contentsReadyChecker.on("ready", function () {
+          if (_this._flicking) {
+            void _this.render();
+          }
+
+          contentsReadyChecker.destroy();
+        });
+        contentsReadyChecker.check(checkingPanels.map(function (panel) {
+          return panel.element;
+        }));
       };
 
       __proto._updateCameraAndControl = function () {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
+        var flicking = getFlickingAttached(this._flicking);
         var camera = flicking.camera,
             control = flicking.control;
         camera.updateRange();
@@ -4583,18 +5273,6 @@ version: 4.2.5
         control.updateInput();
       };
 
-      __proto._updateRenderingPanels = function () {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-
-        if (flicking.renderOnlyVisible) {
-          this._showOnlyVisiblePanels(flicking);
-        } else {
-          flicking.panels.forEach(function (panel) {
-            return panel.markForShow();
-          });
-        }
-      };
-
       __proto._showOnlyVisiblePanels = function (flicking) {
         var panels = flicking.renderer.panels;
         var camera = flicking.camera;
@@ -4603,7 +5281,7 @@ version: 4.2.5
           return visibles;
         }, {});
         panels.forEach(function (panel) {
-          if (panel.index in visibleIndexes) {
+          if (panel.index in visibleIndexes || panel.loading) {
             panel.markForShow();
           } else if (!flicking.holding) {
             // During the input sequence,
@@ -4611,23 +5289,19 @@ version: 4.2.5
             panel.markForHide();
           }
         });
-        camera.updateOffset();
       };
 
-      __proto._updatePanelSizeByGrid = function (flicking) {
-        var panels = flicking.panels;
+      __proto._updatePanelSizeByGrid = function (referencePanel, panels) {
+        var flicking = getFlickingAttached(this._flicking);
         var panelsPerView = flicking.panelsPerView;
 
         if (panelsPerView <= 0) {
           throw new FlickingError(MESSAGE.WRONG_OPTION("panelsPerView", panelsPerView), CODE.WRONG_OPTION);
         }
 
-        if (panels.length <= 0) return; // resize only the first panel
-
-        var firstPanel = panels[0];
-        firstPanel.resize();
+        if (panels.length <= 0) return;
         var viewportSize = flicking.camera.size;
-        var gap = firstPanel.margin.prev + firstPanel.margin.next;
+        var gap = referencePanel.margin.prev + referencePanel.margin.next;
         var panelSize = (viewportSize - gap * (panelsPerView - 1)) / panelsPerView;
         var panelSizeObj = flicking.horizontal ? {
           width: panelSize
@@ -4636,14 +5310,12 @@ version: 4.2.5
         };
         var firstPanelSizeObj = {
           size: panelSize,
-          height: firstPanel.height,
-          margin: firstPanel.margin
+          height: referencePanel.height,
+          margin: referencePanel.margin
         };
 
         if (!flicking.noPanelStyleOverride) {
-          flicking.panels.forEach(function (panel) {
-            return panel.setSize(panelSizeObj);
-          });
+          this._strategy.updatePanelSizes(flicking, panelSizeObj);
         }
 
         flicking.panels.forEach(function (panel) {
@@ -4651,29 +5323,202 @@ version: 4.2.5
         });
       };
 
+      __proto._removeAllChildsFromCamera = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var cameraElement = flicking.camera.element; // Remove other elements
+
+        while (cameraElement.firstChild) {
+          cameraElement.removeChild(cameraElement.firstChild);
+        }
+      };
+
+      __proto._insertPanelElements = function (panels, nextSibling) {
+        if (nextSibling === void 0) {
+          nextSibling = null;
+        }
+
+        var flicking = getFlickingAttached(this._flicking);
+        var camera = flicking.camera;
+        var cameraElement = camera.element;
+        var nextSiblingElement = (nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.element) || null;
+        var fragment = document.createDocumentFragment();
+        panels.forEach(function (panel) {
+          return fragment.appendChild(panel.element);
+        });
+        cameraElement.insertBefore(fragment, nextSiblingElement);
+      };
+
+      __proto._removePanelElements = function (panels) {
+        var flicking = getFlickingAttached(this._flicking);
+        var cameraElement = flicking.camera.element;
+        panels.forEach(function (panel) {
+          cameraElement.removeChild(panel.element);
+        });
+      };
+
       return Renderer;
     }();
 
-    var Panel = function () {
+    /**
+     *
+     */
+
+    var VanillaRenderer =
+    /*#__PURE__*/
+    function (_super) {
+      __extends(VanillaRenderer, _super);
+
+      function VanillaRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      } // eslint-disable-next-line @typescript-eslint/require-await
+
+
+      var __proto = VanillaRenderer.prototype;
+
+      __proto.render = function () {
+        return __awaiter(this, void 0, void 0, function () {
+          var flicking, strategy;
+          return __generator(this, function (_a) {
+            flicking = getFlickingAttached(this._flicking);
+            strategy = this._strategy;
+            strategy.updateRenderingPanels(flicking);
+            strategy.renderPanels(flicking);
+
+            this._resetPanelElementOrder();
+
+            return [2
+            /*return*/
+            ];
+          });
+        });
+      };
+
+      __proto._collectPanels = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var camera = flicking.camera;
+
+        this._removeAllTextNodes();
+
+        this._panels = this._strategy.collectPanels(flicking, camera.children);
+      };
+
+      __proto._createPanel = function (el, options) {
+        return this._strategy.createPanel(el, options);
+      };
+
+      __proto._resetPanelElementOrder = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var cameraEl = flicking.camera.element; // We're using reversed panels here as last panel should be the last element of camera element
+
+        var reversedElements = this._strategy.getRenderingElementsByOrder(flicking).reverse();
+
+        reversedElements.forEach(function (el, idx) {
+          var nextEl = reversedElements[idx - 1] ? reversedElements[idx - 1] : null;
+
+          if (el.nextElementSibling !== nextEl) {
+            cameraEl.insertBefore(el, nextEl);
+          }
+        });
+      };
+
+      __proto._removeAllTextNodes = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var cameraElement = flicking.camera.element; // Remove all text nodes in the camera element
+
+        toArray(cameraElement.childNodes).forEach(function (node) {
+          if (node.nodeType === Node.TEXT_NODE) {
+            cameraElement.removeChild(node);
+          }
+        });
+      };
+
+      return VanillaRenderer;
+    }(Renderer$1);
+
+    /**
+     * @internal
+     */
+
+    var ExternalRenderer =
+    /*#__PURE__*/
+    function (_super) {
+      __extends(ExternalRenderer, _super);
+
+      function ExternalRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+
+
+      var __proto = ExternalRenderer.prototype;
+
+      __proto._removePanelElements = function (panels) {// DO NOTHING, overrided to prevent an unexpected error
+      };
+
+      __proto._removeAllChildsFromCamera = function () {// DO NOTHING, overrided to prevent an unexpected error
+      };
+
+      return ExternalRenderer;
+    }(Renderer$1);
+
+    /**
+     * A slide data component that holds information of a single HTMLElement
+     * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
+     */
+
+    var Panel =
+    /*#__PURE__*/
+    function () {
       /**
        * @param {object} options An options object<ko>옵션 오브젝트</ko>
        * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
        * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
        * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
+       * @param {Flicking} [options.elementProvider] A provider instance that redirects elements<ko>실제 엘리먼트를 반환하는 엘리먼트 공급자의 인스턴스</ko>
        */
       function Panel(_a) {
         var index = _a.index,
             align = _a.align,
-            flicking = _a.flicking;
+            flicking = _a.flicking,
+            elementProvider = _a.elementProvider;
         this._index = index;
         this._flicking = flicking;
+        this._elProvider = elementProvider;
         this._align = align;
         this._removed = false;
+        this._rendered = true;
+        this._loading = false;
 
         this._resetInternalStates();
       }
 
       var __proto = Panel.prototype;
+      Object.defineProperty(__proto, "element", {
+        // Internal States Getter
+
+        /**
+         * `HTMLElement` that panel's referencing
+         * @ko 패널이 참조하고 있는 `HTMLElement`
+         * @type {HTMLElement}
+         * @readonly
+         */
+        get: function () {
+          return this._elProvider.element;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "elementProvider", {
+        /**
+         * @internal
+         * @readonly
+         */
+        get: function () {
+          return this._elProvider;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "index", {
         /**
          * Index of the panel
@@ -4786,6 +5631,35 @@ version: 4.2.5
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "rendered", {
+        /**
+         * A value indicating whether the panel's element is being rendered on the screen
+         * @ko 패널의 엘리먼트가 화면상에 렌더링되고있는지 여부를 나타내는 값
+         * @type {boolean}
+         * @readonly
+         */
+        get: function () {
+          return this._rendered;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "loading", {
+        /**
+         * A value indicating whether the panel's image/video is not loaded and waiting for resize
+         * @ko 패널 내부의 이미지/비디오가 아직 로드되지 않아 {@link Panel#resize resize}될 것인지를 나타내는 값
+         * @type {boolean}
+         * @readonly
+         */
+        get: function () {
+          return this._loading;
+        },
+        set: function (val) {
+          this._loading = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "range", {
         /**
          * Panel element's range of the bounding box
@@ -4934,13 +5808,34 @@ version: 4.2.5
         get: function () {
           return this._align;
         },
-        // Options Getter
+        // Options Setter
         set: function (val) {
           this._align = val;
         },
         enumerable: false,
         configurable: true
       });
+      /**
+       * Mark panel element to be appended on the camera element
+       * @internal
+       */
+
+      __proto.markForShow = function () {
+        this._rendered = true;
+
+        this._elProvider.show(this._flicking);
+      };
+      /**
+       * Mark panel element to be removed from the camera element
+       * @internal
+       */
+
+
+      __proto.markForHide = function () {
+        this._rendered = false;
+
+        this._elProvider.hide(this._flicking);
+      };
       /**
        * Update size of the panel
        * @ko 패널의 크기를 갱신합니다
@@ -4949,18 +5844,18 @@ version: 4.2.5
        * @return {this}
        */
 
+
       __proto.resize = function (cached) {
         var el = this.element;
-        var elStyle = getStyle(el);
         var flicking = this._flicking;
         var horizontal = flicking.horizontal;
-        var prevPanel = flicking.renderer.panels[this._index - 1];
 
         if (cached) {
           this._size = cached.size;
           this._margin = __assign({}, cached.margin);
           this._height = cached.height;
         } else {
+          var elStyle = getStyle(el);
           this._size = horizontal ? el.offsetWidth : el.offsetHeight;
           this._margin = horizontal ? {
             prev: parseFloat(elStyle.marginLeft || "0"),
@@ -4972,7 +5867,7 @@ version: 4.2.5
           this._height = horizontal ? el.offsetHeight : this._size;
         }
 
-        this._pos = prevPanel ? prevPanel.range.max + prevPanel.margin.next + this._margin.prev : this._margin.prev;
+        this.updatePosition();
 
         this._updateAlignPos();
 
@@ -4989,27 +5884,8 @@ version: 4.2.5
        */
 
 
-      __proto.setSize = function (_a) {
-        var width = _a.width,
-            height = _a.height;
-        var el = this.element;
-
-        if (width != null) {
-          if (isString(width)) {
-            el.style.width = width;
-          } else {
-            el.style.width = width + "px";
-          }
-        }
-
-        if (height != null) {
-          if (isString(height)) {
-            el.style.height = height;
-          } else {
-            el.style.height = height + "px";
-          }
-        }
-
+      __proto.setSize = function (size) {
+        setSize(this.element, size);
         return this;
       };
       /**
@@ -5054,7 +5930,7 @@ version: 4.2.5
         return this.includeRange(pos, pos, includeMargin);
       };
       /**
-       * Check whether the given range is fully included in this panel's area
+       * Check whether the given range is fully included in this panel's area (inclusive)
        * @ko 주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다
        * @param {number} min Minimum value of the range to check<ko>확인하고자 하는 최소 범위</ko>
        * @param {number} max Maximum value of the range to check<ko>확인하고자 하는 최대 범위</ko>
@@ -5078,6 +5954,19 @@ version: 4.2.5
 
         return max >= panelRange.min && min <= panelRange.max;
       };
+      /**
+       * Check whether the panel is visble in the given range (exclusive)
+       * @ko 주어진 범위 내에서 이 패널의 일부가 보여지는지를 반환합니다
+       * @param {number} min Minimum value of the range to check<ko>확인하고자 하는 최소 범위</ko>
+       * @param {number} max Maximum value of the range to check<ko>확인하고자 하는 최대 범위</ko>
+       * @returns {boolean} A Boolean value indicating whether the panel is visible<ko>해당 범위 내에서 패널을 볼 수 있는지 여부</ko>
+       */
+
+
+      __proto.isVisibleOnRange = function (min, max) {
+        var panelRange = this.range;
+        return max > panelRange.min && min < panelRange.max;
+      };
       /**
        * Move {@link Camera} to this panel
        * @ko {@link Camera}를 이 패널로 이동합니다
@@ -5152,33 +6041,13 @@ version: 4.2.5
         return this;
       };
       /**
-       * Increase panel's position by the given value
-       * @ko 패널의 위치를 주어진 값만큼 증가시킵니다
-       * @internal
-       * @chainable
-       * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
-       * @returns {this}
-       */
-
-
-      __proto.increasePosition = function (val) {
-        this._moveBy(Math.max(val, 0));
-
-        return this;
-      };
-      /**
-       * Decrease panel's position by the given value
-       * @ko 패널의위치를 주어진 값만큼 감소시킵니다
        * @internal
-       * @chainable
-       * @param val An integer greater than or equal to 0<ko>0보다 같거나 큰 정수</ko>
-       * @returns {this}
        */
 
 
-      __proto.decreasePosition = function (val) {
-        this._moveBy(-Math.max(val, 0));
-
+      __proto.updatePosition = function () {
+        var prevPanel = this._flicking.renderer.panels[this._index - 1];
+        this._pos = prevPanel ? prevPanel.range.max + prevPanel.margin.next + this._margin.prev : this._margin.prev;
         return this;
       };
       /**
@@ -5246,11 +6115,6 @@ version: 4.2.5
         return this;
       };
 
-      __proto._moveBy = function (val) {
-        this._pos += val;
-        return this;
-      };
-
       __proto._updateAlignPos = function () {
         this._alignPos = parseAlign$1(this._align, this._size);
       };
@@ -5269,7 +6133,103 @@ version: 4.2.5
         this._toggleDirection = DIRECTION.NONE;
       };
 
-      return Panel;
+      return Panel;
+    }();
+
+    var NormalRenderingStrategy =
+    /*#__PURE__*/
+    function () {
+      function NormalRenderingStrategy(_a) {
+        var providerCtor = _a.providerCtor;
+        this._providerCtor = providerCtor;
+      }
+
+      var __proto = NormalRenderingStrategy.prototype;
+
+      __proto.renderPanels = function () {// DO_NOTHING
+      };
+
+      __proto.getRenderingIndexesByOrder = function (flicking) {
+        var renderedPanels = flicking.renderer.panels.filter(function (panel) {
+          return panel.rendered;
+        });
+        var toggledPrev = renderedPanels.filter(function (panel) {
+          return panel.toggled && panel.toggleDirection === DIRECTION.PREV;
+        });
+        var toggledNext = renderedPanels.filter(function (panel) {
+          return panel.toggled && panel.toggleDirection === DIRECTION.NEXT;
+        });
+        var notToggled = renderedPanels.filter(function (panel) {
+          return !panel.toggled;
+        });
+        return __spreadArray(__spreadArray(__spreadArray([], __read(toggledPrev), false), __read(notToggled), false), __read(toggledNext)).map(function (panel) {
+          return panel.index;
+        });
+      };
+
+      __proto.getRenderingElementsByOrder = function (flicking) {
+        var panels = flicking.panels;
+        return this.getRenderingIndexesByOrder(flicking).map(function (index) {
+          return panels[index].element;
+        });
+      };
+
+      __proto.updateRenderingPanels = function (flicking) {
+        if (flicking.renderOnlyVisible) {
+          this._showOnlyVisiblePanels(flicking);
+        } else {
+          flicking.panels.forEach(function (panel) {
+            return panel.markForShow();
+          });
+        }
+      };
+
+      __proto.collectPanels = function (flicking, elements) {
+        var _this = this;
+
+        var align = parsePanelAlign(flicking.renderer.align);
+        return elements.map(function (el, index) {
+          return new Panel({
+            index: index,
+            elementProvider: new _this._providerCtor(el),
+            align: align,
+            flicking: flicking
+          });
+        });
+      };
+
+      __proto.createPanel = function (element, options) {
+        return new Panel(__assign(__assign({}, options), {
+          elementProvider: new this._providerCtor(element)
+        }));
+      };
+
+      __proto.updatePanelSizes = function (flicking, size) {
+        flicking.panels.forEach(function (panel) {
+          return panel.setSize(size);
+        });
+      };
+
+      __proto._showOnlyVisiblePanels = function (flicking) {
+        var panels = flicking.renderer.panels;
+        var camera = flicking.camera;
+        var visibleIndexes = camera.visiblePanels.reduce(function (visibles, panel) {
+          visibles[panel.index] = true;
+          return visibles;
+        }, {});
+        panels.forEach(function (panel) {
+          if (panel.index in visibleIndexes || panel.loading) {
+            panel.markForShow();
+          } else if (!flicking.holding) {
+            // During the input sequence,
+            // Do not remove panel elements as it won't trigger touchend event.
+            panel.markForHide();
+          }
+        });
+        camera.updateOffset();
+      };
+
+      return NormalRenderingStrategy;
     }();
 
     /**
@@ -5277,26 +6237,28 @@ version: 4.2.5
      * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
      */
 
-    var ElementPanel = function (_super) {
-      __extends(ElementPanel, _super);
+    var VirtualPanel =
+    /*#__PURE__*/
+    function (_super) {
+      __extends(VirtualPanel, _super);
       /**
        * @param {object} options An options object<ko>옵션 오브젝트</ko>
-       * @param {HTMLElement} [options.el] A `HTMLElement` panel's referencing<ko>패널이 참조하는 `HTMLElement`</ko>
        * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
        * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
        * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
        */
 
 
-      function ElementPanel(options) {
+      function VirtualPanel(options) {
         var _this = _super.call(this, options) || this;
 
-        _this._el = options.el;
-        _this._rendered = true;
+        options.elementProvider.init(_this);
+        _this._elProvider = options.elementProvider;
+        _this._cachedInnerHTML = null;
         return _this;
       }
 
-      var __proto = ElementPanel.prototype;
+      var __proto = VirtualPanel.prototype;
       Object.defineProperty(__proto, "element", {
         /**
          * `HTMLElement` that panel's referencing
@@ -5305,211 +6267,189 @@ version: 4.2.5
          * @readonly
          */
         get: function () {
-          return this._el;
+          return this._elProvider.element;
         },
         enumerable: false,
         configurable: true
       });
-      Object.defineProperty(__proto, "rendered", {
+      Object.defineProperty(__proto, "cachedInnerHTML", {
+        /**
+         * Cached innerHTML by the previous render function
+         * @ko 이전 렌더링에서 캐시된 innerHTML 정보
+         * @type {string|null}
+         * @readonly
+         */
         get: function () {
-          return this._rendered;
+          return this._cachedInnerHTML;
         },
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "elementIndex", {
+        /**
+         * An number for indexing which element it will be rendered on
+         * @ko 몇 번째 엘리먼트에 렌더링될 것인지를 나타내는 숫자
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          var flicking = this._flicking;
+          var virtualElCount = flicking.panelsPerView + 1;
+          var panelCount = flicking.panelCount;
+          var index = this._index;
 
-      __proto.markForShow = function () {
-        this._rendered = true;
-      };
-
-      __proto.markForHide = function () {
-        this._rendered = false;
-      };
-
-      return ElementPanel;
-    }(Panel);
-
-    /**
-     *
-     */
-
-    var VanillaRenderer = function (_super) {
-      __extends(VanillaRenderer, _super);
+          if (this._toggled) {
+            // To prevent element duplication
+            index = this._toggleDirection === DIRECTION.NEXT ? index + panelCount : index - panelCount;
+          }
 
-      function VanillaRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      } // eslint-disable-next-line @typescript-eslint/require-await
+          return circulateIndex(index, virtualElCount);
+        },
+        enumerable: false,
+        configurable: true
+      });
 
+      __proto.cacheRenderResult = function (result) {
+        this._cachedInnerHTML = result;
+      };
 
-      var __proto = VanillaRenderer.prototype;
+      __proto.uncacheRenderResult = function () {
+        this._cachedInnerHTML = null;
+      };
 
       __proto.render = function () {
-        return __awaiter(this, void 0, void 0, function () {
-          var flicking, cameraEl, wasRenderedPanels, renderingPanels;
-          return __generator(this, function (_a) {
-            flicking = getFlickingAttached(this._flicking, "Renderer");
-            cameraEl = flicking.camera.element;
-            wasRenderedPanels = this._panels.filter(function (panel) {
-              return panel.element.parentElement === cameraEl;
-            });
-
-            this._updateRenderingPanels();
-
-            renderingPanels = this._getRenderingPanelsByOrder();
+        var flicking = this._flicking;
+        var _a = flicking.virtual,
+            renderPanel = _a.renderPanel,
+            cache = _a.cache;
+        var element = this._elProvider.element;
+        var newInnerHTML = this._cachedInnerHTML || renderPanel(this, this._index);
+        if (newInnerHTML === element.innerHTML) return;
+        element.innerHTML = newInnerHTML;
+
+        if (cache) {
+          this.cacheRenderResult(newInnerHTML);
+        }
+      };
 
-            this._removePanelElements(wasRenderedPanels.filter(function (panel) {
-              return !panel.rendered;
-            }));
+      __proto.increaseIndex = function (val) {
+        this.uncacheRenderResult();
+        return _super.prototype.increaseIndex.call(this, val);
+      };
 
-            this._insertPanelElements(renderingPanels.filter(function (panel) {
-              return panel.element.parentElement !== cameraEl;
-            }), null);
+      __proto.decreaseIndex = function (val) {
+        this.uncacheRenderResult();
+        return _super.prototype.decreaseIndex.call(this, val);
+      };
 
-            this._resetPanelElementOrder(renderingPanels);
+      return VirtualPanel;
+    }(Panel);
 
-            return [2
-            /*return*/
-            ];
-          });
+    var VirtualRenderingStrategy =
+    /*#__PURE__*/
+    function () {
+      function VirtualRenderingStrategy() {}
+
+      var __proto = VirtualRenderingStrategy.prototype;
+
+      __proto.renderPanels = function (flicking) {
+        var virtualManager = flicking.virtual;
+        var visiblePanels = flicking.visiblePanels;
+        var invisibleIndexes = range(flicking.panelsPerView + 1);
+        visiblePanels.forEach(function (panel) {
+          var elementIndex = panel.elementIndex;
+          panel.render();
+          virtualManager.show(elementIndex);
+          invisibleIndexes[elementIndex] = -1;
         });
-      }; // eslint-disable-next-line @typescript-eslint/require-await
-
-
-      __proto.forceRenderAllPanels = function () {
-        return __awaiter(this, void 0, void 0, function () {
-          var flicking, camera, cameraElement, fragment;
-          return __generator(this, function (_a) {
-            flicking = getFlickingAttached(this._flicking, "Renderer");
-            camera = flicking.camera;
-            cameraElement = camera.element;
-            fragment = document.createDocumentFragment();
-
-            this._panels.forEach(function (panel) {
-              return fragment.appendChild(panel.element);
-            });
-
-            this._removeAllChildsFromCamera();
-
-            cameraElement.appendChild(fragment);
-            return [2
-            /*return*/
-            ];
-          });
+        invisibleIndexes.filter(function (val) {
+          return val >= 0;
+        }).forEach(function (idx) {
+          virtualManager.hide(idx);
         });
       };
 
-      __proto._collectPanels = function () {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-        var cameraElement = flicking.camera.element; // Remove all text nodes in the camera element
+      __proto.getRenderingIndexesByOrder = function (flicking) {
+        var virtualManager = flicking.virtual;
 
-        toArray(cameraElement.childNodes).forEach(function (node) {
-          if (node.nodeType === Node.TEXT_NODE) {
-            cameraElement.removeChild(node);
-          }
+        var visiblePanels = __spreadArray([], __read(flicking.visiblePanels)).filter(function (panel) {
+          return panel.rendered;
+        }).sort(function (panel1, panel2) {
+          return panel1.position + panel1.offset - (panel2.position + panel2.offset);
         });
 
-        var align = this._getPanelAlign();
-
-        var cameraChilds = toArray(cameraElement.children);
-        this._panels = cameraChilds.map(function (el, index) {
-          return new ElementPanel({
-            flicking: flicking,
-            el: el,
-            index: index,
-            align: align
+        if (visiblePanels.length <= 0) return virtualManager.elements.map(function (_, idx) {
+          return idx;
+        });
+        var visibleIndexes = visiblePanels.map(function (panel) {
+          return panel.elementIndex;
+        });
+        var invisibleIndexes = virtualManager.elements.map(function (el, idx) {
+          return __assign(__assign({}, el), {
+            idx: idx
           });
+        }).filter(function (el) {
+          return !el.visible;
+        }).map(function (el) {
+          return el.idx;
         });
+        return __spreadArray(__spreadArray([], __read(visibleIndexes), false), __read(invisibleIndexes));
       };
 
-      __proto._createPanel = function (el, options) {
-        return new ElementPanel(__assign({
-          el: el
-        }, options));
-      };
-
-      __proto._insertPanelElements = function (panels, nextSibling) {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-        var camera = flicking.camera;
-        var cameraElement = camera.element;
-        var nextSiblingElement = (nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.element) || null;
-        var fragment = document.createDocumentFragment();
-        panels.forEach(function (panel) {
-          return fragment.appendChild(panel.element);
+      __proto.getRenderingElementsByOrder = function (flicking) {
+        var virtualManager = flicking.virtual;
+        var elements = virtualManager.elements;
+        return this.getRenderingIndexesByOrder(flicking).map(function (index) {
+          return elements[index].nativeElement;
         });
-        cameraElement.insertBefore(fragment, nextSiblingElement);
-        return this;
       };
 
-      __proto._removePanelElements = function (panels) {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-        var cameraElement = flicking.camera.element;
+      __proto.updateRenderingPanels = function (flicking) {
+        var panels = flicking.renderer.panels;
+        var camera = flicking.camera;
+        var visibleIndexes = camera.visiblePanels.reduce(function (visibles, panel) {
+          visibles[panel.index] = true;
+          return visibles;
+        }, {});
         panels.forEach(function (panel) {
-          cameraElement.removeChild(panel.element);
+          if (panel.index in visibleIndexes || panel.loading) {
+            panel.markForShow();
+          } else {
+            panel.markForHide();
+          }
         });
-        return this;
+        camera.updateOffset();
       };
 
-      __proto._resetPanelElementOrder = function (panels) {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-        var cameraEl = flicking.camera.element; // We're using reversed panels here as last panel should be the last element of camera element
-
-        var reversedPanels = __spreadArray([], __read(panels)).reverse();
-
-        reversedPanels.forEach(function (panel, idx) {
-          var nextPanel = reversedPanels[idx - 1];
-          var nextPanelEl = nextPanel ? nextPanel.element : null;
-
-          if (panel.element.nextElementSibling !== nextPanelEl) {
-            cameraEl.insertBefore(panel.element, nextPanelEl);
-          }
+      __proto.collectPanels = function (flicking) {
+        var align = parsePanelAlign(flicking.renderer.align);
+        return range(flicking.virtual.initialPanelCount).map(function (index) {
+          return new VirtualPanel({
+            index: index,
+            elementProvider: new VirtualElementProvider(flicking),
+            align: align,
+            flicking: flicking
+          });
         });
       };
 
-      __proto._removeAllChildsFromCamera = function () {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-        var cameraElement = flicking.camera.element; // Remove other elements
-
-        while (cameraElement.firstChild) {
-          cameraElement.removeChild(cameraElement.firstChild);
-        }
+      __proto.createPanel = function (_el, options) {
+        return new VirtualPanel(__assign(__assign({}, options), {
+          elementProvider: new VirtualElementProvider(options.flicking)
+        }));
       };
 
-      __proto._getRenderingPanelsByOrder = function () {
-        var flicking = getFlickingAttached(this._flicking, "Renderer");
-        var panels = flicking.renderer.panels;
-        return panels.filter(function (panel) {
-          return panel.rendered;
-        }).sort(function (a, b) {
-          return a.position + a.offset - (b.position + b.offset);
+      __proto.updatePanelSizes = function (flicking, size) {
+        flicking.virtual.elements.forEach(function (el) {
+          setSize(el.nativeElement, size);
+        });
+        flicking.panels.forEach(function (panel) {
+          return panel.setSize(size);
         });
       };
 
-      return VanillaRenderer;
-    }(Renderer$1);
-
-    /**
-     *
-     */
-
-    var ExternalRenderer = function (_super) {
-      __extends(ExternalRenderer, _super);
-
-      function ExternalRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-
-      var __proto = ExternalRenderer.prototype;
-
-      __proto._insertPanelElements = function (panels, nextSibling) {// DO NOTHING
-      }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-
-      __proto._removePanelElements = function (panels) {// DO NOTHING
-      };
-
-      return ExternalRenderer;
-    }(Renderer$1);
+      return VirtualRenderingStrategy;
+    }();
 
     /*
      * Copyright (c) 2015 NAVER Corp.
@@ -5520,7 +6460,9 @@ version: 4.2.5
         __proto__: null,
         Renderer: Renderer$1,
         VanillaRenderer: VanillaRenderer,
-        ExternalRenderer: ExternalRenderer
+        ExternalRenderer: ExternalRenderer,
+        NormalRenderingStrategy: NormalRenderingStrategy,
+        VirtualRenderingStrategy: VirtualRenderingStrategy
     };
 
     /**
@@ -5530,7 +6472,9 @@ version: 4.2.5
      * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
      */
 
-    var Flicking = function (_super) {
+    var Flicking =
+    /*#__PURE__*/
+    function (_super) {
       __extends(Flicking, _super);
       /**
        * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
@@ -5580,42 +6524,50 @@ version: 4.2.5
             panelsPerView = _j === void 0 ? -1 : _j,
             _k = _b.noPanelStyleOverride,
             noPanelStyleOverride = _k === void 0 ? false : _k,
-            _l = _b.needPanelThreshold,
-            needPanelThreshold = _l === void 0 ? 0 : _l,
-            _m = _b.preventEventsBeforeInit,
-            preventEventsBeforeInit = _m === void 0 ? true : _m,
-            _o = _b.deceleration,
-            deceleration = _o === void 0 ? 0.0075 : _o,
-            _p = _b.duration,
-            duration = _p === void 0 ? 500 : _p,
-            _q = _b.easing,
-            easing = _q === void 0 ? function (x) {
+            _l = _b.resizeOnContentsReady,
+            resizeOnContentsReady = _l === void 0 ? false : _l,
+            _m = _b.needPanelThreshold,
+            needPanelThreshold = _m === void 0 ? 0 : _m,
+            _o = _b.preventEventsBeforeInit,
+            preventEventsBeforeInit = _o === void 0 ? true : _o,
+            _p = _b.deceleration,
+            deceleration = _p === void 0 ? 0.0075 : _p,
+            _q = _b.duration,
+            duration = _q === void 0 ? 500 : _q,
+            _r = _b.easing,
+            easing = _r === void 0 ? function (x) {
           return 1 - Math.pow(1 - x, 3);
-        } : _q,
-            _r = _b.inputType,
-            inputType = _r === void 0 ? ["mouse", "touch"] : _r,
-            _s = _b.moveType,
-            moveType = _s === void 0 ? "snap" : _s,
-            _t = _b.threshold,
-            threshold = _t === void 0 ? 40 : _t,
-            _u = _b.interruptable,
-            interruptable = _u === void 0 ? true : _u,
-            _v = _b.bounce,
-            bounce = _v === void 0 ? "20%" : _v,
-            _w = _b.iOSEdgeSwipeThreshold,
-            iOSEdgeSwipeThreshold = _w === void 0 ? 30 : _w,
-            _x = _b.preventClickOnDrag,
-            preventClickOnDrag = _x === void 0 ? true : _x,
-            _y = _b.disableOnInit,
-            disableOnInit = _y === void 0 ? false : _y,
-            _z = _b.renderOnlyVisible,
-            renderOnlyVisible = _z === void 0 ? false : _z,
-            _0 = _b.autoInit,
-            autoInit = _0 === void 0 ? true : _0,
-            _1 = _b.autoResize,
-            autoResize = _1 === void 0 ? true : _1,
-            _2 = _b.renderExternal,
-            renderExternal = _2 === void 0 ? null : _2;
+        } : _r,
+            _s = _b.inputType,
+            inputType = _s === void 0 ? ["mouse", "touch"] : _s,
+            _t = _b.moveType,
+            moveType = _t === void 0 ? "snap" : _t,
+            _u = _b.threshold,
+            threshold = _u === void 0 ? 40 : _u,
+            _v = _b.interruptable,
+            interruptable = _v === void 0 ? true : _v,
+            _w = _b.bounce,
+            bounce = _w === void 0 ? "20%" : _w,
+            _x = _b.iOSEdgeSwipeThreshold,
+            iOSEdgeSwipeThreshold = _x === void 0 ? 30 : _x,
+            _y = _b.preventClickOnDrag,
+            preventClickOnDrag = _y === void 0 ? true : _y,
+            _z = _b.disableOnInit,
+            disableOnInit = _z === void 0 ? false : _z,
+            _0 = _b.renderOnlyVisible,
+            renderOnlyVisible = _0 === void 0 ? false : _0,
+            _1 = _b.virtual,
+            virtual = _1 === void 0 ? null : _1,
+            _2 = _b.autoInit,
+            autoInit = _2 === void 0 ? true : _2,
+            _3 = _b.autoResize,
+            autoResize = _3 === void 0 ? true : _3,
+            _4 = _b.useResizeObserver,
+            useResizeObserver = _4 === void 0 ? true : _4,
+            _5 = _b.externalRenderer,
+            externalRenderer = _5 === void 0 ? null : _5,
+            _6 = _b.renderExternal,
+            renderExternal = _6 === void 0 ? null : _6;
 
         var _this = _super.call(this) || this; // Internal states
 
@@ -5631,6 +6583,8 @@ version: 4.2.5
         _this._adaptive = adaptive;
         _this._panelsPerView = panelsPerView;
         _this._noPanelStyleOverride = noPanelStyleOverride;
+        _this._resizeOnContentsReady = resizeOnContentsReady;
+        _this._virtual = virtual;
         _this._needPanelThreshold = needPanelThreshold;
         _this._preventEventsBeforeInit = preventEventsBeforeInit;
         _this._deceleration = deceleration;
@@ -5645,15 +6599,18 @@ version: 4.2.5
         _this._preventClickOnDrag = preventClickOnDrag;
         _this._disableOnInit = disableOnInit;
         _this._renderOnlyVisible = renderOnlyVisible;
-        _this._autoResize = autoResize;
         _this._autoInit = autoInit;
+        _this._autoResize = autoResize;
+        _this._useResizeObserver = useResizeObserver;
+        _this._externalRenderer = externalRenderer;
         _this._renderExternal = renderExternal; // Create core components
 
         _this._viewport = new Viewport(getElement(root));
+        _this._autoResizer = new AutoResizer(_this);
         _this._renderer = _this._createRenderer();
         _this._camera = _this._createCamera();
         _this._control = _this._createControl();
-        _this.resize = _this.resize.bind(_this);
+        _this._virtualManager = new VirtualManager(_this, virtual);
 
         if (_this._autoInit) {
           void _this.init();
@@ -5765,6 +6722,22 @@ version: 4.2.5
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "virtualEnabled", {
+        /**
+         * Whether the `virtual` option is enabled.
+         * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
+         * @ko {@link Flicking#virtual virtual} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+         * {@link Flicking#virtual virtual} 옵션은 {@link Flicking#panelsPerView panelsPerView} 옵션의 값이 0보다 같거나 작으면 비활성화됩니다.
+         * @type {boolean}
+         * @default false
+         * @readonly
+         */
+        get: function () {
+          return this._panelsPerView > 0 && this._virtual != null;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "index", {
         /**
          * Index number of the {@link Flicking#currentPanel currentPanel}
@@ -6046,6 +7019,24 @@ version: 4.2.5
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "resizeOnContentsReady", {
+        /**
+         * Enabling this option will automatically call {@link Flicking#resize} when all image/video inside panels are loaded.
+         * This can be useful when you have contents inside Flicking that changes its size when it's loaded
+         * @ko 이 옵션을 활성화할 경우, Flicking 패널 내부의 이미지/비디오들이 로드되었을 때 자동으로 {@link Flicking#resize}를 호출합니다.
+         * 이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다.
+         * @type {boolean}
+         * @default false
+         */
+        get: function () {
+          return this._resizeOnContentsReady;
+        },
+        set: function (val) {
+          this._resizeOnContentsReady = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "needPanelThreshold", {
         // EVENTS
 
@@ -6329,8 +7320,8 @@ version: 4.2.5
         // PERFORMANCE
 
         /**
-         * Whether to render visible panels only. This can dramatically increase performance when there're many panels.
-         * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.
+         * Whether to render visible panels only. This can dramatically increase performance when there're many panels
+         * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다
          * @type {boolean}
          * @default false
          */
@@ -6344,6 +7335,44 @@ version: 4.2.5
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "virtual", {
+        /**
+         * By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
+         * Must be used with `panelsPerview`.
+         * After Flicking's initialized, this property can be used to add/remove the panel count.
+         * @ko 이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 `panelsPerView + 1` 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
+         * `panelsPerView` 옵션과 함께 사용되어야만 합니다.
+         * Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다.
+         * @type {VirtualManager}
+         * @property {function} renderPanel A rendering function for the panel element's innerHTML<ko>패널 엘리먼트의 innerHTML을 렌더링하는 함수</ko>
+         * @property {number} initialPanelCount Initial panel count to render<ko>최초로 렌더링할 패널의 개수</ko>
+         * @property {boolean} [cache=false] Whether to cache rendered panel's innerHTML<ko>렌더링된 패널의 innerHTML 정보를 캐시할지 여부</ko>
+         * @property {string} [panelClass="flicking-panel"] The class name that will be applied to rendered panel elements<ko>렌더링되는 패널 엘리먼트에 적용될 클래스 이름</ko>
+         * @example
+         * ```ts
+         * import Flicking, { VirtualPanel } from "@egjs/flicking";
+         *
+         * const flicking = new Flicking("#some_el", {
+         *   panelsPerView: 3,
+         *   virtual: {
+         *     renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
+         *     initialPanelCount: 100
+         *   }
+         * });
+         *
+         * // Add 100 virtual panels (at the end)
+         * flicking.virtual.append(100);
+         *
+         * // Remove 100 virtual panels from 0 to 100
+         * flicking.virtual.remove(0, 100);
+         * ```
+         */
+        get: function () {
+          return this._virtualManager;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "autoInit", {
         // OTHERS
 
@@ -6362,10 +7391,8 @@ version: 4.2.5
       });
       Object.defineProperty(__proto, "autoResize", {
         /**
-         * Attach Flicking's {@link Flicking#resize resize} method to window's resize event.
-         * Flicking will automatically call {@link Flicking#resize resize} window size and orientation change.
-         * @ko Flicking의 {@link Flicking#resize resize} 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
-         * 설정시 window 창 크기 및 orientation 변경에 의해 자동으로 {@link Flicking#resize resize}를 호출합니다.
+         * Whether to automatically call {@link Flicking#resize resize()} when the viewport element(.flicking-viewport)'s size is changed
+         * @ko 뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 {@link Flicking#resize resize()} 메소드를 자동으로 호출할지 여부를 설정합니다
          * @type {boolean}
          * @default true
          */
@@ -6375,6 +7402,46 @@ version: 4.2.5
         // OTHERS
         set: function (val) {
           this._autoResize = val;
+
+          if (val) {
+            this._autoResizer.enable();
+          } else {
+            this._autoResizer.disable();
+          }
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "useResizeObserver", {
+        /**
+         * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option
+         * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
+         * @type {boolean}
+         * @default true
+         */
+        get: function () {
+          return this._useResizeObserver;
+        },
+        set: function (val) {
+          this._useResizeObserver = val;
+
+          if (this._autoResize) {
+            this._autoResizer.enable();
+          }
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "externalRenderer", {
+        /**
+         * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
+         * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
+         * @default null
+         * @internal
+         * @readonly
+         */
+        get: function () {
+          return this._externalRenderer;
         },
         enumerable: false,
         configurable: true
@@ -6383,10 +7450,10 @@ version: 4.2.5
         /**
          * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
          * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
-         * @type {boolean}
-         * @default false
+         * @default null
          * @internal
          * @readonly
+         * @deprecated
          */
         get: function () {
           return this._renderExternal;
@@ -6405,7 +7472,7 @@ version: 4.2.5
 
       __proto.init = function () {
         return __awaiter(this, void 0, void 0, function () {
-          var camera, renderer, control, originalTrigger, preventEventsBeforeInit;
+          var camera, renderer, control, virtualManager, originalTrigger, preventEventsBeforeInit;
 
           var _this = this;
 
@@ -6418,9 +7485,11 @@ version: 4.2.5
                 camera = this._camera;
                 renderer = this._renderer;
                 control = this._control;
+                virtualManager = this._virtualManager;
                 originalTrigger = this.trigger;
                 preventEventsBeforeInit = this._preventEventsBeforeInit;
                 camera.init(this);
+                virtualManager.init();
                 renderer.init(this);
                 control.init(this);
 
@@ -6447,7 +7516,7 @@ version: 4.2.5
                 _a.sent();
 
                 if (this._autoResize) {
-                  window.addEventListener("resize", this.resize);
+                  this._autoResizer.enable();
                 }
 
                 if (this._preventClickOnDrag) {
@@ -6458,6 +7527,8 @@ version: 4.2.5
                   this.disableInput();
                 }
 
+                renderer.checkPanelContentsReady(renderer.panels);
+
                 this._plugins.forEach(function (plugin) {
                   return plugin.init(_this);
                 }); // Done initializing & emit ready event
@@ -6485,9 +7556,9 @@ version: 4.2.5
 
 
       __proto.destroy = function () {
-        if (!this._initialized) return;
         this.off();
-        window.removeEventListener("resize", this.resize);
+
+        this._autoResizer.disable();
 
         this._control.destroy();
 
@@ -6704,7 +7775,7 @@ version: 4.2.5
        * @param {boolean} [options.includePanelHTML=false] Include panel's `outerHTML` to the returning status<ko>패널의 `outerHTML`을 반환값에 포함시킵니다</ko>
        * @param {boolean} [options.visiblePanelsOnly=false] Include only {@link Flicking#visiblePanel visiblePanel}'s HTML. This option is available only when the `includePanelHTML` is true
        * <ko>현재 보이는 패널({@link Flicking#visiblePanel visiblePanel})의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.</ko>
-       * @return {Partial<Status>} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
+       * @return {Status} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
        */
 
 
@@ -6784,13 +7855,15 @@ version: 4.2.5
         if (((_a = panels[0]) === null || _a === void 0 ? void 0 : _a.html) && !this._renderExternal) {
           renderer.batchRemove({
             index: 0,
-            deleteCount: this.panels.length
+            deleteCount: this.panels.length,
+            hasDOMInElements: true
           });
           renderer.batchInsert({
             index: 0,
             elements: parseElement(panels.map(function (panel) {
               return panel.html;
-            }))
+            })),
+            hasDOMInElements: true
           });
         }
 
@@ -7027,7 +8100,8 @@ version: 4.2.5
 
         return this._renderer.batchInsert({
           index: index,
-          elements: parseElement(element)
+          elements: parseElement(element),
+          hasDOMInElements: true
         });
       };
       /**
@@ -7052,7 +8126,8 @@ version: 4.2.5
 
         return this._renderer.batchRemove({
           index: index,
-          deleteCount: deleteCount
+          deleteCount: deleteCount,
+          hasDOMInElements: true
         });
       };
 
@@ -7102,11 +8177,33 @@ version: 4.2.5
       };
 
       __proto._createRenderer = function () {
-        var rendererOptions = {
+        var externalRenderer = this._externalRenderer;
+
+        if (this._virtual && this._panelsPerView <= 0) {
+          // eslint-disable-next-line no-console
+          console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
+        }
+
+        return externalRenderer ? externalRenderer : this._renderExternal ? this._createExternalRenderer() : this._createVanillaRenderer();
+      };
+
+      __proto._createExternalRenderer = function () {
+        var _a = this._renderExternal,
+            renderer = _a.renderer,
+            rendererOptions = _a.rendererOptions;
+        return new renderer(__assign({
           align: this._align
-        };
-        var renderExternal = this._renderExternal;
-        return renderExternal ? new renderExternal.renderer(__assign(__assign({}, rendererOptions), renderExternal.rendererOptions)) : new VanillaRenderer(rendererOptions);
+        }, rendererOptions));
+      };
+
+      __proto._createVanillaRenderer = function () {
+        var virtual = this.virtualEnabled;
+        return new VanillaRenderer({
+          align: this._align,
+          strategy: virtual ? new VirtualRenderingStrategy() : new NormalRenderingStrategy({
+            providerCtor: VanillaElementProvider
+          })
+        });
       };
 
       __proto._moveToInitialPanel = function () {
@@ -7119,6 +8216,7 @@ version: 4.2.5
             if (!initialPanel) return [2
             /*return*/
             ];
+            control.setActive(initialPanel, null, false);
             return [2
             /*return*/
             , control.moveToPanel(initialPanel, {
@@ -7139,36 +8237,10 @@ version: 4.2.5
        */
 
 
-      Flicking.VERSION = "4.2.5";
+      Flicking.VERSION = "4.4.1";
       return Flicking;
     }(Component);
 
-    /**
-     * An slide data component that holds information of a single HTMLElement
-     * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
-     */
-
-    var ExternalPanel = function (_super) {
-      __extends(ExternalPanel, _super);
-      /**
-       * @param {object} options An options object<ko>옵션 오브젝트</ko>
-       * @param {HTMLElement} [options.el] A `HTMLElement` panel's referencing<ko>패널이 참조하는 `HTMLElement`</ko>
-       * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
-       * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
-       * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
-       */
-
-
-      function ExternalPanel(options) {
-        var _this = _super.call(this, options) || this;
-
-        _this._externalComponent = options.externalComponent;
-        return _this;
-      }
-
-      return ExternalPanel;
-    }(Panel);
-
     /*
      * Copyright (c) 2015 NAVER Corp.
      * egjs projects are licensed under the MIT license
@@ -7179,9 +8251,11 @@ version: 4.2.5
         Viewport: Viewport,
         FlickingError: FlickingError,
         AnchorPoint: AnchorPoint,
+        VirtualManager: VirtualManager,
+        VanillaElementProvider: VanillaElementProvider,
+        VirtualElementProvider: VirtualElementProvider,
         Panel: Panel,
-        ElementPanel: ElementPanel,
-        ExternalPanel: ExternalPanel
+        VirtualPanel: VirtualPanel
     };
 
     /**
@@ -7335,7 +8409,8 @@ version: 4.2.5
       renderer.batchInsert.apply(renderer, __spreadArray([], __read(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
         return {
           index: index,
-          elements: [rendered[elIdx + diffResult.prevList.length]]
+          elements: [rendered[elIdx + diffResult.prevList.length]],
+          hasDOMInElements: false
         };
       }))));
     };
@@ -7344,7 +8419,8 @@ version: 4.2.5
       var removed = renderer.panels.slice(startIdx, endIdx);
       renderer.batchRemove({
         index: startIdx,
-        deleteCount: removed.length
+        deleteCount: removed.length,
+        hasDOMInElements: false
       });
     };
 
@@ -7368,7 +8444,7 @@ version: 4.2.5
         return panel1.position + panel1.offset - (panel2.position + panel2.offset);
       }).map(function (panel) {
         return diffResult.list[maintainedMap[panel.index]];
-      }))), __read(diffResult.added.map(function (idx) {
+      })), false), __read(diffResult.added.map(function (idx) {
         return diffResult.list[idx];
       })));
     });
@@ -7437,8 +8513,9 @@ version: 4.2.5
     merge(Flicking, Renderer);
     merge(Flicking, Constants);
     merge(Flicking, CFC);
+    merge(Flicking, Utils);
 
     return Flicking;
 
-})));
+}));
 //# sourceMappingURL=flicking.js.map