@egjs/flicking 4.3.0 → 4.4.2

package/dist/flicking.esm.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.3.0
+version: 4.4.2
 */
 import Component, { ComponentEvent } from '@egjs/component';
 import Axes, { PanInput } from '@egjs/axes';
@@ -274,6 +274,7 @@ function __spreadArray(to, from) {
  * <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,
@@ -289,7 +290,8 @@ var CODE = {
   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) {
@@ -303,9 +305,7 @@ var MESSAGE = {
   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;
   },
@@ -321,7 +321,8 @@ var MESSAGE = {
   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"
 };
 
 /*
@@ -417,7 +418,26 @@ var MOVE_TYPE = {
   FREE_SCROLL: "freeScroll",
   STRICT: "strict"
 };
+var CLASS = {
+  VERTICAL: "vertical",
+  HIDDEN: "flicking-hidden",
+  DEFAULT_VIRTUAL: "flicking-panel"
+};
+
+var merge = function (target) {
+  var sources = [];
 
+  for (var _i = 1; _i < arguments.length; _i++) {
+    sources[_i - 1] = arguments[_i];
+  }
+
+  sources.forEach(function (source) {
+    Object.keys(source).forEach(function (key) {
+      target[key] = source[key];
+    });
+  });
+  return target;
+};
 var getElement = function (el, parent) {
   var targetEl = null;
 
@@ -448,9 +468,9 @@ var checkExistence = function (value, nameOnErrMsg) {
 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;
@@ -566,6 +586,12 @@ var parseArithmeticExpression = function (cssValue) {
 
   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;
@@ -659,6 +685,17 @@ var find = function (array, checker) {
 
   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])) {
@@ -675,6 +712,26 @@ var getProgress = function (pos, prev, next) {
 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;
 };
@@ -687,6 +744,15 @@ var circulateIndex = function (index, max) {
     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;
@@ -715,7 +781,9 @@ var setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  * ```
  */
 
-var FlickingError = function (_super) {
+var FlickingError =
+/*#__PURE__*/
+function (_super) {
   __extends(FlickingError, _super);
   /**
    * @param message Error message<ko>에러 메시지</ko>
@@ -744,7 +812,9 @@ var FlickingError = function (_super) {
  * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
  */
 
-var Viewport = function () {
+var Viewport =
+/*#__PURE__*/
+function () {
   /**
    * @param el A viewport element<ko>뷰포트 엘리먼트</ko>
    */
@@ -867,10 +937,10 @@ var Viewport = function () {
     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";
   };
@@ -878,6 +948,412 @@ var Viewport = function () {
   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
@@ -912,7 +1388,9 @@ var STATE_TYPE;
  */
 
 
-var State = function () {
+var State =
+/*#__PURE__*/
+function () {
   function State() {
     this._delta = 0;
     this._targetPanel = null;
@@ -1069,7 +1547,9 @@ var State = function () {
  * @internal
  */
 
-var IdleState = function (_super) {
+var IdleState =
+/*#__PURE__*/
+function (_super) {
   __extends(IdleState, _super);
 
   function IdleState() {
@@ -1156,7 +1636,9 @@ var IdleState = function (_super) {
  * @internal
  */
 
-var HoldingState = function (_super) {
+var HoldingState =
+/*#__PURE__*/
+function (_super) {
   __extends(HoldingState, _super);
 
   function HoldingState() {
@@ -1309,7 +1791,9 @@ var HoldingState = function (_super) {
  * @internal
  */
 
-var DraggingState = function (_super) {
+var DraggingState =
+/*#__PURE__*/
+function (_super) {
   __extends(DraggingState, _super);
 
   function DraggingState() {
@@ -1372,7 +1856,9 @@ var DraggingState = function (_super) {
  * @internal
  */
 
-var AnimatingState = function (_super) {
+var AnimatingState =
+/*#__PURE__*/
+function (_super) {
   __extends(AnimatingState, _super);
 
   function AnimatingState() {
@@ -1446,7 +1932,9 @@ var AnimatingState = function (_super) {
  * @internal
  */
 
-var DisabledState = function (_super) {
+var DisabledState =
+/*#__PURE__*/
+function (_super) {
   __extends(DisabledState, _super);
 
   function DisabledState() {
@@ -1502,7 +1990,9 @@ var DisabledState = function (_super) {
  * @internal
  */
 
-var StateMachine = function () {
+var StateMachine =
+/*#__PURE__*/
+function () {
   function StateMachine() {
     var _this = this;
 
@@ -1591,7 +2081,9 @@ var StateMachine = function () {
  * @internal
  */
 
-var AxesController = function () {
+var AxesController =
+/*#__PURE__*/
+function () {
   /** */
   function AxesController() {
     var _this = this;
@@ -1874,7 +2366,7 @@ var AxesController = function () {
   __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];
@@ -1892,7 +2384,7 @@ var AxesController = function () {
 
 
   __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);
@@ -1908,7 +2400,7 @@ var AxesController = function () {
 
 
   __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);
@@ -1944,17 +2436,25 @@ var AxesController = function () {
 
     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();
     }
 
@@ -1985,7 +2485,7 @@ var AxesController = function () {
     };
 
     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;
@@ -2030,7 +2530,9 @@ var AxesController = function () {
  * @ko Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트
  */
 
-var Control = function () {
+var Control =
+/*#__PURE__*/
+function () {
   /** */
   function Control() {
     this._flicking = null;
@@ -2174,7 +2676,7 @@ var Control = function () {
 
 
   __proto.updatePosition = function (_progressInPanel) {
-    var flicking = getFlickingAttached(this._flicking, "Control");
+    var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
     var activePanel = this._activePanel;
 
@@ -2191,7 +2693,7 @@ var Control = function () {
 
 
   __proto.updateInput = function () {
-    var flicking = getFlickingAttached(this._flicking, "Control");
+    var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
 
     this._controller.update(camera.controlParams);
@@ -2258,7 +2760,7 @@ var Control = function () {
     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);
@@ -2310,7 +2812,7 @@ var Control = function () {
   __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();
 
@@ -2333,7 +2835,7 @@ var Control = function () {
   __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;
@@ -2361,7 +2863,7 @@ var Control = function () {
       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);
@@ -2411,7 +2913,9 @@ var Control = function () {
  * 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>
@@ -2475,7 +2979,9 @@ var AnchorPoint = function () {
  * @ko 입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식을 사용하는 {@link Control}
  */
 
-var SnapControl = function (_super) {
+var SnapControl =
+/*#__PURE__*/
+function (_super) {
   __extends(SnapControl, _super);
   /** */
 
@@ -2549,7 +3055,7 @@ var SnapControl = function (_super) {
     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);
@@ -2592,7 +3098,7 @@ var SnapControl = function (_super) {
   };
 
   __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;
@@ -2652,7 +3158,7 @@ var SnapControl = function (_super) {
   __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;
@@ -2681,7 +3187,9 @@ var SnapControl = function (_super) {
  * @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 {@link Control}
  */
 
-var FreeControl = function (_super) {
+var FreeControl =
+/*#__PURE__*/
+function (_super) {
   __extends(FreeControl, _super);
   /** */
 
@@ -2726,7 +3234,7 @@ var FreeControl = function (_super) {
    */
 
   __proto.updatePosition = function (progressInPanel) {
-    var flicking = getFlickingAttached(this._flicking, "Control");
+    var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera;
     var activePanel = this._activePanel;
 
@@ -2778,7 +3286,7 @@ var FreeControl = function (_super) {
     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);
@@ -2815,7 +3323,9 @@ var FreeControl = function (_super) {
  * @ko 한번에 최대로 이동할 패널의 개수를 선택 가능한 {@link Control}
  */
 
-var StrictControl = function (_super) {
+var StrictControl =
+/*#__PURE__*/
+function (_super) {
   __extends(StrictControl, _super);
   /** */
 
@@ -2879,7 +3389,7 @@ var StrictControl = function (_super) {
   __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;
@@ -2988,7 +3498,7 @@ var StrictControl = function (_super) {
     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;
@@ -3059,7 +3569,9 @@ var StrictControl = function (_super) {
  * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
  */
 
-var Camera = function () {
+var Camera =
+/*#__PURE__*/
+function () {
   /** */
   function Camera(_a) {
     var _this = this;
@@ -3115,8 +3627,8 @@ var Camera = function () {
     // Internal states getter
 
     /**
-     * The camera(`.flicking-camera`) element
-     * @ko 카메라(`.flicking-camera`) 엘리먼트
+     * The camera element(`.flicking-camera`)
+     * @ko 카메라 엘리먼트(`.flicking-camera`)
      * @type {HTMLElement}
      * @readonly
      */
@@ -3126,6 +3638,19 @@ var Camera = function () {
     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
@@ -3172,7 +3697,7 @@ var Camera = function () {
      * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
      * @type {object}
      * @property {number} min A minimum position<ko>최소 위치</ko>
-     * @property {number} min A maximum position<ko>최대 위치</ko>
+     * @property {number} max A maximum position<ko>최대 위치</ko>
      * @readonly
      */
     get: function () {
@@ -3409,7 +3934,7 @@ var Camera = function () {
 
     this._checkReachEnd(prevPos, pos);
 
-    this._applyTransform();
+    this.applyTransform();
   };
   /**
    * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
@@ -3509,7 +4034,7 @@ var Camera = function () {
 
 
   __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;
@@ -3552,7 +4077,7 @@ var Camera = function () {
   __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}
@@ -3580,7 +4105,7 @@ var Camera = function () {
 
 
   __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({
@@ -3603,27 +4128,34 @@ var Camera = function () {
 
 
   __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
@@ -3640,6 +4172,21 @@ var Camera = function () {
     };
     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;
@@ -3660,7 +4207,7 @@ var Camera = function () {
   __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);
@@ -3688,7 +4235,7 @@ var Camera = function () {
   __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) {
@@ -3742,7 +4289,7 @@ var Camera = function () {
   };
 
   __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;
@@ -3753,13 +4300,6 @@ var Camera = function () {
     }));
   };
 
-  __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;
 }();
 
@@ -3768,7 +4308,9 @@ var Camera = function () {
  * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
  */
 
-var LinearCamera = function (_super) {
+var LinearCamera =
+/*#__PURE__*/
+function (_super) {
   __extends(LinearCamera, _super);
 
   function LinearCamera() {
@@ -3790,7 +4332,7 @@ var LinearCamera = function (_super) {
   __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);
@@ -3809,7 +4351,9 @@ var LinearCamera = function (_super) {
  * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
  */
 
-var CircularCamera = function (_super) {
+var CircularCamera =
+/*#__PURE__*/
+function (_super) {
   __extends(CircularCamera, _super);
 
   function CircularCamera() {
@@ -3867,12 +4411,32 @@ var CircularCamera = function (_super) {
   __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;
@@ -3917,9 +4481,9 @@ var CircularCamera = function (_super) {
 
 
     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;
@@ -3936,7 +4500,7 @@ var CircularCamera = function (_super) {
 
 
   __proto.updateRange = function () {
-    var flicking = getFlickingAttached(this._flicking, "Camera");
+    var flicking = getFlickingAttached(this._flicking);
     var renderer = flicking.renderer;
     var panels = renderer.panels;
 
@@ -3972,13 +4536,20 @@ var CircularCamera = function (_super) {
       };
     }
 
+    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;
@@ -3987,22 +4558,23 @@ var CircularCamera = function (_super) {
     });
     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 () {
@@ -4024,17 +4596,15 @@ var CircularCamera = function (_super) {
       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);
   };
@@ -4047,7 +4617,9 @@ var CircularCamera = function (_super) {
  * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
  */
 
-var BoundCamera = function (_super) {
+var BoundCamera =
+/*#__PURE__*/
+function (_super) {
   __extends(BoundCamera, _super);
 
   function BoundCamera() {
@@ -4067,7 +4639,7 @@ var BoundCamera = function (_super) {
   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);
@@ -4110,7 +4682,7 @@ var BoundCamera = function (_super) {
   __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) {
@@ -4219,20 +4791,23 @@ var BoundCamera = function (_super) {
  * @ko {@link Panel}과 그 엘리먼트들을 관리하는 컴포넌트
  */
 
-var Renderer = function () {
+var Renderer =
+/*#__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;
@@ -4265,6 +4840,16 @@ var Renderer = function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "strategy", {
+    /**
+     * @internal
+     */
+    get: function () {
+      return this._strategy;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "align", {
     // Options Getter
 
@@ -4279,8 +4864,7 @@ var Renderer = function () {
     // Options Setter
     set: function (val) {
       this._align = val;
-
-      var panelAlign = this._getPanelAlign();
+      var panelAlign = parsePanelAlign(val);
 
       this._panels.forEach(function (panel) {
         panel.align = panelAlign;
@@ -4326,6 +4910,14 @@ var Renderer = function () {
   __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 모든 패널의 크기를 업데이트합니다
@@ -4335,10 +4927,15 @@ var Renderer = function () {
 
 
   __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();
@@ -4352,8 +4949,10 @@ var Renderer = function () {
    * 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>
    */
 
@@ -4368,11 +4967,10 @@ var Renderer = function () {
     }
 
     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;
 
@@ -4385,20 +4983,30 @@ var Renderer = function () {
           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();
-      }); // Update panel indexes & positions
+      if (flicking.panelsPerView > 0) {
+        var firstPanel = prevFirstPanel || panelsInserted[0].resize();
+
+        _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.updatePosition();
       });
-      return __spreadArray(__spreadArray([], __read(addedPanels)), __read(panelsInserted));
+      return __spreadArray(__spreadArray([], __read(addedPanels), false), __read(panelsInserted));
     }, []);
     if (allPanelsInserted.length <= 0) return []; // Update camera & control
 
@@ -4428,8 +5036,10 @@ var Renderer = function () {
    * 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>
    */
 
@@ -4444,7 +5054,7 @@ var Renderer = function () {
     }
 
     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;
@@ -4462,21 +5072,24 @@ var Renderer = function () {
         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) {
@@ -4509,9 +5122,10 @@ var Renderer = function () {
   __proto.checkPanelContentsReady = function (checkingPanels) {
     var _this = this;
 
-    var resizeOnContentsReady = getFlickingAttached(this._flicking, "Renderer").resizeOnContentsReady;
+    var flicking = getFlickingAttached(this._flicking);
+    var resizeOnContentsReady = flicking.resizeOnContentsReady;
     var panels = this._panels;
-    if (!resizeOnContentsReady) return;
+    if (!resizeOnContentsReady || flicking.virtualEnabled) return;
 
     var hasContents = function (panel) {
       return !!panel.element.querySelector("img, video");
@@ -4526,9 +5140,7 @@ var Renderer = function () {
       panel.loading = true;
     });
     contentsReadyChecker.on("readyElement", function (e) {
-      var flicking = _this._flicking;
-
-      if (!flicking) {
+      if (!_this._flicking) {
         // Renderer's destroy() is called before
         contentsReadyChecker.destroy();
         return;
@@ -4573,13 +5185,8 @@ var Renderer = function () {
     }));
   };
 
-  __proto._getPanelAlign = function () {
-    var align = this._align;
-    return typeof align === "object" ? align.panel : align;
-  };
-
   __proto._updateCameraAndControl = function () {
-    var flicking = getFlickingAttached(this._flicking, "Renderer");
+    var flicking = getFlickingAttached(this._flicking);
     var camera = flicking.camera,
         control = flicking.control;
     camera.updateRange();
@@ -4588,18 +5195,6 @@ var Renderer = function () {
     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;
@@ -4616,23 +5211,19 @@ var Renderer = function () {
         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
@@ -4641,14 +5232,12 @@ var Renderer = function () {
     };
     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) {
@@ -4656,30 +5245,202 @@ var Renderer = function () {
     });
   };
 
+  __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);
+
+/**
+ * @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);
+
+/**
+ * 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
@@ -4792,6 +5553,19 @@ var Panel = function () {
     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
@@ -4963,6 +5737,27 @@ var Panel = function () {
     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 패널의 크기를 갱신합니다
@@ -4971,9 +5766,9 @@ var Panel = function () {
    * @return {this}
    */
 
+
   __proto.resize = function (cached) {
     var el = this.element;
-    var elStyle = getStyle(el);
     var flicking = this._flicking;
     var horizontal = flicking.horizontal;
 
@@ -4982,6 +5777,7 @@ var Panel = function () {
       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"),
@@ -5010,27 +5806,8 @@ var Panel = function () {
    */
 
 
-  __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;
   };
   /**
@@ -5075,7 +5852,7 @@ var Panel = function () {
     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>
@@ -5099,6 +5876,19 @@ var Panel = function () {
 
     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}를 이 패널로 이동합니다
@@ -5265,7 +6055,103 @@ var Panel = function () {
     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;
 }();
 
 /**
@@ -5273,26 +6159,28 @@ var Panel = function () {
  * @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
@@ -5301,211 +6189,189 @@ var ElementPanel = function (_super) {
      * @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);
-
-/**
- *
- */
-
-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);
+  return VirtualRenderingStrategy;
+}();
 
 /**
  * @extends Component
@@ -5514,7 +6380,9 @@ var ExternalRenderer = function (_super) {
  * @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
@@ -5596,12 +6464,18 @@ var Flicking = function (_super) {
         disableOnInit = _z === void 0 ? false : _z,
         _0 = _b.renderOnlyVisible,
         renderOnlyVisible = _0 === void 0 ? false : _0,
-        _1 = _b.autoInit,
-        autoInit = _1 === void 0 ? true : _1,
-        _2 = _b.autoResize,
-        autoResize = _2 === void 0 ? true : _2,
-        _3 = _b.renderExternal,
-        renderExternal = _3 === void 0 ? null : _3;
+        _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
 
@@ -5618,6 +6492,7 @@ var Flicking = function (_super) {
     _this._panelsPerView = panelsPerView;
     _this._noPanelStyleOverride = noPanelStyleOverride;
     _this._resizeOnContentsReady = resizeOnContentsReady;
+    _this._virtual = virtual;
     _this._needPanelThreshold = needPanelThreshold;
     _this._preventEventsBeforeInit = preventEventsBeforeInit;
     _this._deceleration = deceleration;
@@ -5632,15 +6507,18 @@ var Flicking = function (_super) {
     _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();
@@ -5752,6 +6630,22 @@ var Flicking = function (_super) {
     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}
@@ -6334,8 +7228,8 @@ var Flicking = function (_super) {
     // 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
      */
@@ -6349,6 +7243,44 @@ var Flicking = function (_super) {
     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
 
@@ -6367,10 +7299,8 @@ var Flicking = function (_super) {
   });
   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
      */
@@ -6380,6 +7310,46 @@ var Flicking = function (_super) {
     // 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
@@ -6388,10 +7358,10 @@ var Flicking = function (_super) {
     /**
      * 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;
@@ -6410,7 +7380,7 @@ var Flicking = function (_super) {
 
   __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;
 
@@ -6423,9 +7393,11 @@ var Flicking = function (_super) {
             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);
 
@@ -6452,7 +7424,7 @@ var Flicking = function (_super) {
             _a.sent();
 
             if (this._autoResize) {
-              window.addEventListener("resize", this.resize);
+              this._autoResizer.enable();
             }
 
             if (this._preventClickOnDrag) {
@@ -6493,7 +7465,8 @@ var Flicking = function (_super) {
 
   __proto.destroy = function () {
     this.off();
-    window.removeEventListener("resize", this.resize);
+
+    this._autoResizer.disable();
 
     this._control.destroy();
 
@@ -6710,7 +7683,7 @@ var Flicking = function (_super) {
    * @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>
    */
 
 
@@ -6790,13 +7763,15 @@ var Flicking = function (_super) {
     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
       });
     }
 
@@ -7033,7 +8008,8 @@ var Flicking = function (_super) {
 
     return this._renderer.batchInsert({
       index: index,
-      elements: parseElement(element)
+      elements: parseElement(element),
+      hasDOMInElements: true
     });
   };
   /**
@@ -7058,7 +8034,8 @@ var Flicking = function (_super) {
 
     return this._renderer.batchRemove({
       index: index,
-      deleteCount: deleteCount
+      deleteCount: deleteCount,
+      hasDOMInElements: true
     });
   };
 
@@ -7108,11 +8085,33 @@ var Flicking = function (_super) {
   };
 
   __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 () {
@@ -7146,36 +8145,10 @@ var Flicking = function (_super) {
    */
 
 
-  Flicking.VERSION = "4.3.0";
+  Flicking.VERSION = "4.4.2";
   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);
-
 /**
  * Decorator that makes the method of flicking available in the framework.
  * @ko 프레임워크에서 플리킹의 메소드를 사용할 수 있게 하는 데코레이터.
@@ -7249,6 +8222,8 @@ var sync = (function (flicking, diffResult, rendered) {
   var renderer = flicking.renderer;
   var panels = renderer.panels;
 
+  var prevList = __spreadArray([], __read(diffResult.prevList));
+
   if (diffResult.removed.length > 0) {
     var endIdx_1 = -1;
     var prevIdx_1 = -1;
@@ -7264,6 +8239,8 @@ var sync = (function (flicking, diffResult, rendered) {
       } else {
         prevIdx_1 = removedIdx;
       }
+
+      prevList.splice(removedIdx, 1);
     });
     batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
   }
@@ -7303,13 +8280,14 @@ var sync = (function (flicking, diffResult, rendered) {
   if (diffResult.added.length > 0) {
     var startIdx_1 = -1;
     var prevIdx_2 = -1;
+    var addedElements_1 = rendered.slice(prevList.length);
     diffResult.added.forEach(function (addedIdx, idx) {
       if (startIdx_1 < 0) {
         startIdx_1 = idx;
       }
 
       if (prevIdx_2 >= 0 && addedIdx !== prevIdx_2 + 1) {
-        batchInsert(renderer, diffResult, rendered, startIdx_1, idx + 1);
+        batchInsert(renderer, diffResult, addedElements_1, startIdx_1, idx + 1);
         startIdx_1 = -1;
         prevIdx_2 = -1;
       } else {
@@ -7318,16 +8296,17 @@ var sync = (function (flicking, diffResult, rendered) {
     });
 
     if (startIdx_1 >= 0) {
-      batchInsert(renderer, diffResult, rendered, startIdx_1);
+      batchInsert(renderer, diffResult, addedElements_1, startIdx_1);
     }
   }
 });
 
-var batchInsert = function (renderer, diffResult, rendered, startIdx, endIdx) {
+var batchInsert = function (renderer, diffResult, addedElements, startIdx, endIdx) {
   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: [addedElements[elIdx]],
+      hasDOMInElements: false
     };
   }))));
 };
@@ -7336,7 +8315,8 @@ var batchRemove = function (renderer, startIdx, endIdx) {
   var removed = renderer.panels.slice(startIdx, endIdx);
   renderer.batchRemove({
     index: startIdx,
-    deleteCount: removed.length
+    deleteCount: removed.length,
+    hasDOMInElements: false
   });
 };
 
@@ -7360,7 +8340,7 @@ var getRenderingPanels = (function (flicking, diffResult) {
     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];
   })));
 });
@@ -7416,5 +8396,5 @@ var parseAlign = function (alignVal) {
  * egjs projects are licensed under the MIT license
  */
 
-export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCamera, Camera, CircularCamera, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ElementPanel, ExternalPanel, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCamera, MOVE_TYPE, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaRenderer, Viewport, Flicking as default, getDefaultCameraTransform, getRenderingPanels, sync, withFlickingMethods };
+export { ALIGN, AnchorPoint, AnimatingState, AxesController, BoundCamera, CLASS, Camera, CircularCamera, Control, DIRECTION, DisabledState, DraggingState, CODE as ERROR_CODE, EVENTS, ExternalRenderer, FlickingError, FreeControl, HoldingState, IdleState, LinearCamera, MOVE_TYPE, NormalRenderingStrategy, Panel, Renderer, SnapControl, State, StateMachine, StrictControl, VanillaElementProvider, VanillaRenderer, Viewport, VirtualElementProvider, VirtualManager, VirtualPanel, VirtualRenderingStrategy, checkExistence, circulateIndex, circulatePosition, clamp, Flicking as default, find, findIndex, findRight, getDefaultCameraTransform, getDirection, getElement, getFlickingAttached, getMinusCompensatedIndex, getProgress, getRenderingPanels, getStyle, includes, isBetween, isString, merge, parseAlign$1 as parseAlign, parseArithmeticExpression, parseArithmeticSize, parseBounce, parseCSSSizeValue, parseElement, parsePanelAlign, range, setPrototypeOf, setSize, sync, toArray, withFlickingMethods };
 //# sourceMappingURL=flicking.esm.js.map