@egjs/flicking 4.4.1 → 4.5.1

package/dist/flicking.pkgd.js

@@ -4,7 +4,7 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.4.1
+version: 4.5.1
 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -242,10 +242,12 @@ version: 4.4.1
 
       return ar;
     }
-    function __spreadArray(to, from) {
-      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
+    /** @deprecated */
 
-      return to;
+    function __spread$1() {
+      for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read$1(arguments[i]));
+
+      return ar;
     }
 
     /*
@@ -893,6 +895,18 @@ version: 4.4.1
       HIDDEN: "flicking-hidden",
       DEFAULT_VIRTUAL: "flicking-panel"
     };
+    /**
+     * An object with all possible {@link Flicking#circularFallback circularFallback}s
+     * @ko Flicking의 {@link Flicking#circularFallback circularFallback}에 설정 가능한 값들을 담고 있는 객체
+     * @type {object}
+     * @property {string} LINEAR "linear"
+     * @property {string} BOUND "bound"
+     */
+
+    var CIRCULAR_FALLBACK = {
+      LINEAR: "linear",
+      BOUND: "bound"
+    };
 
     var Constants = {
         __proto__: null,
@@ -901,6 +915,7 @@ version: 4.4.1
         DIRECTION: DIRECTION,
         MOVE_TYPE: MOVE_TYPE,
         CLASS: CLASS,
+        CIRCULAR_FALLBACK: CIRCULAR_FALLBACK,
         ERROR_CODE: CODE
     };
 
@@ -1086,7 +1101,7 @@ version: 4.4.1
         if (isString(el)) {
           var tempDiv = document.createElement("div");
           tempDiv.innerHTML = el;
-          elements.push.apply(elements, __spreadArray([], __read$1(toArray$3(tempDiv.children))));
+          elements.push.apply(elements, __spread$1(toArray$3(tempDiv.children)));
 
           while (tempDiv.firstChild) {
             tempDiv.removeChild(tempDiv.firstChild);
@@ -9443,9 +9458,8 @@ version: 4.4.1
 
 
       function SnapControl(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.count,
-            count = _c === void 0 ? Infinity : _c;
+        var _b = (_a === void 0 ? {} : _a).count,
+            count = _b === void 0 ? Infinity : _b;
 
         var _this = _super.call(this) || this;
 
@@ -9651,9 +9665,8 @@ version: 4.4.1
 
 
       function FreeControl(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.stopAtEdge,
-            stopAtEdge = _c === void 0 ? true : _c;
+        var _b = (_a === void 0 ? {} : _a).stopAtEdge,
+            stopAtEdge = _b === void 0 ? true : _b;
 
         var _this = _super.call(this) || this;
 
@@ -9787,9 +9800,8 @@ version: 4.4.1
 
 
       function StrictControl(_a) {
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.count,
-            count = _c === void 0 ? 1 : _c;
+        var _b = (_a === void 0 ? {} : _a).count,
+            count = _b === void 0 ? 1 : _b;
 
         var _this = _super.call(this) || this;
 
@@ -9912,6 +9924,21 @@ version: 4.4.1
         };
         return this;
       };
+
+      __proto.moveToPanel = function (panel, options) {
+        return __awaiter(this, void 0, void 0, function () {
+          var flicking, camera, controller;
+          return __generator(this, function (_a) {
+            flicking = getFlickingAttached(this._flicking);
+            camera = flicking.camera;
+            controller = this._controller;
+            controller.update(camera.controlParams);
+            return [2
+            /*return*/
+            , _super.prototype.moveToPanel.call(this, panel, options)];
+          });
+        });
+      };
       /**
        * Move {@link Camera} to the given position
        * @ko {@link Camera}를 주어진 좌표로 이동합니다
@@ -10042,761 +10069,826 @@ version: 4.4.1
     };
 
     /**
-     * A component that manages actual movement inside the viewport
-     * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
+     * A mode of camera
      */
 
-    var Camera$1 =
+    var CameraMode =
     /*#__PURE__*/
     function () {
       /** */
-      function Camera(_a) {
-        var _this = this;
+      function CameraMode(flicking) {
+        this._flicking = flicking;
+      }
 
-        var _b = _a === void 0 ? {} : _a,
-            _c = _b.align,
-            align = _c === void 0 ? ALIGN.CENTER : _c;
+      var __proto = CameraMode.prototype;
 
-        this._checkTranslateSupport = function () {
-          var e_1, _a;
+      __proto.getAnchors = function () {
+        var panels = this._flicking.renderer.panels;
+        return panels.map(function (panel, index) {
+          return new AnchorPoint({
+            index: index,
+            position: panel.position,
+            panel: panel
+          });
+        });
+      };
 
-          var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
-          var supportedStyle = document.documentElement.style;
-          var transformName = "";
+      __proto.findAnchorIncludePosition = function (position) {
+        var anchors = this._flicking.camera.anchorPoints;
+        var anchorsIncludingPosition = anchors.filter(function (anchor) {
+          return anchor.panel.includePosition(position, true);
+        });
+        return anchorsIncludingPosition.reduce(function (nearest, anchor) {
+          if (!nearest) return anchor;
+          return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
+        }, null);
+      };
 
-          try {
-            for (var transforms_1 = __values$2(transforms), transforms_1_1 = transforms_1.next(); !transforms_1_1.done; transforms_1_1 = transforms_1.next()) {
-              var prefixedTransform = transforms_1_1.value;
+      __proto.clampToReachablePosition = function (position) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        return clamp(position, range.min, range.max);
+      };
 
-              if (prefixedTransform in supportedStyle) {
-                transformName = prefixedTransform;
-              }
-            }
-          } catch (e_1_1) {
-            e_1 = {
-              error: e_1_1
-            };
-          } finally {
-            try {
-              if (transforms_1_1 && !transforms_1_1.done && (_a = transforms_1.return)) _a.call(transforms_1);
-            } finally {
-              if (e_1) throw e_1.error;
-            }
-          }
+      __proto.getCircularOffset = function () {
+        return 0;
+      };
 
-          if (!transformName) {
-            throw new FlickingError(MESSAGE.TRANSFORM_NOT_SUPPORTED, CODE.TRANSFORM_NOT_SUPPORTED);
-          }
+      __proto.canReach = function (panel) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        if (panel.removed) return false;
+        var panelPos = panel.position;
+        return panelPos >= range.min && panelPos <= range.max;
+      };
 
-          _this._transform = transformName;
+      __proto.canSee = function (panel) {
+        var camera = this._flicking.camera;
+        var visibleRange = camera.visibleRange; // Should not include margin, as we don't declare what the margin is visible as what the panel is visible.
+
+        return panel.isVisibleOnRange(visibleRange.min, visibleRange.max);
+      };
+
+      return CameraMode;
+    }();
+
+    var LinearCameraMode =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(LinearCameraMode, _super);
+
+      function LinearCameraMode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
+
+      var __proto = LinearCameraMode.prototype;
+
+      __proto.checkAvailability = function () {
+        // It's always available
+        return true;
+      };
+
+      __proto.getRange = function () {
+        var _a, _b;
+
+        var renderer = this._flicking.renderer;
+        var firstPanel = renderer.getPanel(0);
+        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
+        return {
+          min: (_a = firstPanel === null || firstPanel === void 0 ? void 0 : firstPanel.position) !== null && _a !== void 0 ? _a : 0,
+          max: (_b = lastPanel === null || lastPanel === void 0 ? void 0 : lastPanel.position) !== null && _b !== void 0 ? _b : 0
         };
+      };
 
-        this._flicking = null;
+      return LinearCameraMode;
+    }(CameraMode);
 
-        this._resetInternalValues(); // Options
+    /**
+     * A {@link Camera} mode that connects the last panel and the first panel, enabling continuous loop
+     * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera} 모드
+     */
 
+    var CircularCameraMode =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(CircularCameraMode, _super);
 
-        this._align = align;
+      function CircularCameraMode() {
+        return _super !== null && _super.apply(this, arguments) || this;
       }
 
-      var __proto = Camera.prototype;
-      Object.defineProperty(__proto, "element", {
-        // Internal states getter
+      var __proto = CircularCameraMode.prototype;
 
-        /**
-         * The camera element(`.flicking-camera`)
-         * @ko 카메라 엘리먼트(`.flicking-camera`)
-         * @type {HTMLElement}
-         * @readonly
-         */
-        get: function () {
-          return this._el;
-        },
-        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$3(this._el.children);
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "position", {
-        /**
-         * Current position of the camera
-         * @ko Camera의 현재 좌표
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          return this._position;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "alignPosition", {
-        /**
-         * Align position inside the viewport where {@link Panel}'s {@link Panel#alignPosition alignPosition} should be located at
-         * @ko 패널의 정렬 기준 위치. 뷰포트 내에서 {@link Panel}의 {@link Panel#alignPosition alignPosition}이 위치해야 하는 곳입니다
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          return this._alignPos;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "offset", {
-        /**
-         * Position offset, used for the {@link Flicking#renderOnlyVisible renderOnlyVisible} option
-         * @ko Camera의 좌표 오프셋. {@link Flicking#renderOnlyVisible renderOnlyVisible} 옵션을 위해 사용됩니다.
-         * @type {number}
-         * @default 0
-         * @readonly
-         */
-        get: function () {
-          return this._offset;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "range", {
-        /**
-         * A range that Camera's {@link Camera#position position} can reach
-         * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
-         * @type {object}
-         * @property {number} min A minimum position<ko>최소 위치</ko>
-         * @property {number} min A maximum position<ko>최대 위치</ko>
-         * @readonly
-         */
-        get: function () {
-          return this._range;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "rangeDiff", {
-        /**
-         * A difference between Camera's minimum and maximum position that can reach
-         * @ko Camera가 도달 가능한 최소/최대 좌표의 차이
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          return this._range.max - this._range.min;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "visiblePanels", {
-        /**
-         * An array of visible panels from the current position
-         * @ko 현재 보이는 패널들의 배열
-         * @type {Panel[]}
-         * @readonly
-         */
-        get: function () {
-          return this._visiblePanels;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "visibleRange", {
-        /**
-         * A range of the visible area from the current position
-         * @ko 현재 위치에서 보이는 범위
-         * @type {object}
-         * @property {number} min A minimum position<ko>최소 위치</ko>
-         * @property {number} min A maximum position<ko>최대 위치</ko>
-         * @readonly
-         */
-        get: function () {
+      __proto.checkAvailability = function () {
+        var flicking = this._flicking;
+        var renderer = flicking.renderer;
+        var panels = renderer.panels;
+
+        if (panels.length <= 0) {
+          return false;
+        }
+
+        var firstPanel = panels[0];
+        var lastPanel = panels[panels.length - 1];
+        var firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+        var lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+        var visibleSize = flicking.camera.size;
+        var panelSizeSum = lastPanelNext - firstPanelPrev;
+        var canSetCircularMode = panels.every(function (panel) {
+          return panelSizeSum - panel.size >= visibleSize;
+        });
+        return canSetCircularMode;
+      };
+
+      __proto.getRange = function () {
+        var flicking = this._flicking;
+        var panels = flicking.renderer.panels;
+
+        if (panels.length <= 0) {
           return {
-            min: this._position - this._alignPos,
-            max: this._position - this._alignPos + this.size
-          };
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "anchorPoints", {
-        /**
-         * An array of {@link AnchorPoint}s that Camera can be stopped at
-         * @ko 카메라가 도달 가능한 {@link AnchorPoint}의 목록
-         * @type {AnchorPoint[]}
-         * @readonly
-         */
-        get: function () {
-          return this._anchors;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "controlParams", {
-        /**
-         * A current parameters of the Camera for updating {@link AxesController}
-         * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들
-         * @type {ControlParams}
-         * @readonly
-         */
-        get: function () {
-          return {
-            range: this._range,
-            position: this._position,
-            circular: false
+            min: 0,
+            max: 0
           };
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "atEdge", {
-        /**
-         * A Boolean value indicating whether Camera's over the minimum or maximum position reachable
-         * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
-         * @type {boolean}
-         * @readonly
-         */
-        get: function () {
-          return this._position <= this._range.min || this._position >= this._range.max;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "size", {
-        /**
-         * Return the size of the viewport
-         * @ko 뷰포트 크기를 반환합니다
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          var flicking = this._flicking;
-          return flicking ? flicking.horizontal ? flicking.viewport.width : flicking.viewport.height : 0;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "progress", {
-        /**
-         * Return the camera's position progress from the first panel to last panel
-         * Range is from 0 to last panel's index
-         * @ko 첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
-         * 범위는 0부터 마지막 패널의 인덱스까지입니다
-         * @type {number}
-         * @readonly
-         */
-        get: function () {
-          var flicking = this._flicking;
-          var position = this._position + this._offset;
-          var nearestAnchor = this.findNearestAnchor(this._position);
+        }
 
-          if (!flicking || !nearestAnchor) {
-            return NaN;
-          }
+        var firstPanel = panels[0];
+        var lastPanel = panels[panels.length - 1];
+        var firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
+        var lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
+        return {
+          min: firstPanelPrev,
+          max: lastPanelNext
+        };
+      };
 
-          var nearestPanel = nearestAnchor.panel;
-          var panelPos = nearestPanel.position + nearestPanel.offset;
-          var bounceSize = flicking.control.controller.bounce;
-          var _a = this.range,
-              prevRange = _a.min,
-              nextRange = _a.max;
-          var rangeDiff = this.rangeDiff;
+      __proto.getAnchors = function () {
+        var flicking = this._flicking;
+        var panels = flicking.renderer.panels;
+        return panels.map(function (panel, index) {
+          return new AnchorPoint({
+            index: index,
+            position: panel.position,
+            panel: panel
+          });
+        });
+      };
 
-          if (position === panelPos) {
-            return nearestPanel.index;
-          }
+      __proto.findAnchorIncludePosition = function (position) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        var anchors = camera.anchorPoints;
+        var rangeDiff = camera.rangeDiff;
+        var anchorCount = anchors.length;
+        var positionInRange = circulatePosition(position, range.min, range.max);
 
-          if (position < panelPos) {
-            var prevPanel = nearestPanel.prev();
-            var prevPosition = prevPanel ? prevPanel.position + prevPanel.offset : prevRange - bounceSize[0]; // Looped
+        var anchorInRange = _super.prototype.findAnchorIncludePosition.call(this, positionInRange);
 
-            if (prevPosition > panelPos) {
-              prevPosition -= rangeDiff;
-            }
+        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);
+        }
 
-            return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
-          } else {
-            var nextPanel = nearestPanel.next();
-            var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1]; // Looped
+        if (!anchorInRange) return null;
 
-            if (nextPosition < panelPos) {
-              nextPosition += rangeDiff;
-            }
+        if (position < range.min) {
+          var loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
+          return new AnchorPoint({
+            index: anchorInRange.index,
+            position: anchorInRange.position + rangeDiff * loopCount,
+            panel: anchorInRange.panel
+          });
+        } else if (position > range.max) {
+          var loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
+          return new AnchorPoint({
+            index: anchorInRange.index,
+            position: anchorInRange.position + rangeDiff * loopCount,
+            panel: anchorInRange.panel
+          });
+        }
 
-            return nearestPanel.index + getProgress(position, panelPos, nextPosition);
-          }
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "align", {
-        // Options Getter
+        return anchorInRange;
+      };
 
-        /**
-         * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
-         * @ko {@link Camera#alignPosition alignPosition}이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값
-         * @type {ALIGN | string | number}
-         */
-        get: function () {
-          return this._align;
-        },
-        // Options Setter
-        set: function (val) {
-          this._align = val;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      /**
-       * Initialize Camera
-       * @ko Camera를 초기화합니다
-       * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
-       * @chainable
-       * @throws {FlickingError}
-       * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
-       * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
-       * @return {this}
-       */
+      __proto.getCircularOffset = function () {
+        var flicking = this._flicking;
+        var camera = flicking.camera;
+        if (!camera.circularEnabled) return 0;
+        var toggled = flicking.panels.filter(function (panel) {
+          return panel.toggled;
+        });
+        var toggledPrev = toggled.filter(function (panel) {
+          return panel.toggleDirection === DIRECTION.PREV;
+        });
+        var toggledNext = toggled.filter(function (panel) {
+          return panel.toggleDirection === DIRECTION.NEXT;
+        });
+        return this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
+      };
 
-      __proto.init = function (flicking) {
-        this._flicking = flicking;
-        var viewportEl = flicking.viewport.element;
-        checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
-        this._el = viewportEl.firstElementChild;
+      __proto.clampToReachablePosition = function (position) {
+        // Basically all position is reachable for circular camera
+        return position;
+      };
 
-        this._checkTranslateSupport();
+      __proto.canReach = function (panel) {
+        if (panel.removed) return false; // Always reachable on circular mode
 
-        return this;
+        return true;
       };
-      /**
-       * Destroy Camera and return to initial state
-       * @ko Camera를 초기 상태로 되돌립니다
-       * @return {void}
-       */
 
+      __proto.canSee = function (panel) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        var rangeDiff = camera.rangeDiff;
+        var visibleRange = camera.visibleRange;
 
-      __proto.destroy = function () {
-        this._flicking = null;
+        var visibleInCurrentRange = _super.prototype.canSee.call(this, panel); // Check looped visible area for circular case
 
-        this._resetInternalValues();
 
-        return this;
+        if (visibleRange.min < range.min) {
+          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
+        } else if (visibleRange.max > range.max) {
+          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
+        }
+
+        return visibleInCurrentRange;
       };
-      /**
-       * Move to the given position and apply CSS transform
-       * @ko 해당 좌표로 이동하고, CSS transform을 적용합니다
-       * @param {number} pos A new position<ko>움직일 위치</ko>
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @return {this}
-       */
 
+      __proto._calcPanelAreaSum = function (panels) {
+        return panels.reduce(function (sum, panel) {
+          return sum + panel.sizeIncludingMargin;
+        }, 0);
+      };
 
-      __proto.lookAt = function (pos) {
-        var prevPos = this._position;
-        this._position = pos;
+      return CircularCameraMode;
+    }(CameraMode);
 
-        this._refreshVisiblePanels();
+    var BoundCameraMode =
+    /*#__PURE__*/
+    function (_super) {
+      __extends$2(BoundCameraMode, _super);
 
-        this._checkNeedPanel();
+      function BoundCameraMode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+      }
 
-        this._checkReachEnd(prevPos, pos);
+      var __proto = BoundCameraMode.prototype;
 
-        this.applyTransform();
-      };
-      /**
-       * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
-       * If it does not exist, return `null` instead
-       * @ko 주어진 {@link AnchorPoint}의 이전 {@link AnchorPoint}를 반환합니다
-       * 존재하지 않을 경우 `null`을 반환합니다
-       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
-       * @return {AnchorPoint | null} The previous {@link AnchorPoint}<ko>이전 {@link AnchorPoint}</ko>
-       */
+      __proto.checkAvailability = function () {
+        var flicking = this._flicking;
+        var renderer = flicking.renderer;
+        var firstPanel = renderer.getPanel(0);
+        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
 
+        if (!firstPanel || !lastPanel) {
+          return false;
+        }
 
-      __proto.getPrevAnchor = function (anchor) {
-        return this._anchors[anchor.index - 1] || null;
+        var viewportSize = flicking.camera.size;
+        var firstPanelPrev = firstPanel.range.min;
+        var lastPanelNext = lastPanel.range.max;
+        var panelAreaSize = lastPanelNext - firstPanelPrev;
+        var isBiggerThanViewport = viewportSize < panelAreaSize;
+        return isBiggerThanViewport;
       };
-      /**
-       * Return a next {@link AnchorPoint} of given {@link AnchorPoint}
-       * If it does not exist, return `null` instead
-       * @ko 주어진 {@link AnchorPoint}의 다음 {@link AnchorPoint}를 반환합니다
-       * 존재하지 않을 경우 `null`을 반환합니다
-       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
-       * @return {AnchorPoint | null} The next {@link AnchorPoint}<ko>다음 {@link AnchorPoint}</ko>
-       */
 
+      __proto.getRange = function () {
+        var flicking = this._flicking;
+        var renderer = flicking.renderer;
+        var alignPos = flicking.camera.alignPosition;
+        var firstPanel = renderer.getPanel(0);
+        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
 
-      __proto.getNextAnchor = function (anchor) {
-        return this._anchors[anchor.index + 1] || null;
-      };
-      /**
-       * Return the camera's position progress in the panel below
-       * Value is from 0 to 1 when the camera's inside panel
-       * Value can be lower than 0 or bigger than 1 when it's in the margin area
-       * @ko 현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
-       * 반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
-       * 패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다
-       */
+        if (!firstPanel || !lastPanel) {
+          return {
+            min: 0,
+            max: 0
+          };
+        }
 
+        var viewportSize = flicking.camera.size;
+        var firstPanelPrev = firstPanel.range.min;
+        var lastPanelNext = lastPanel.range.max;
+        var panelAreaSize = lastPanelNext - firstPanelPrev;
+        var isBiggerThanViewport = viewportSize < panelAreaSize;
+        var firstPos = firstPanelPrev + alignPos;
+        var lastPos = lastPanelNext - viewportSize + alignPos;
 
-      __proto.getProgressInPanel = function (panel) {
-        var panelRange = panel.range;
-        return (this._position - panelRange.min) / (panelRange.max - panelRange.min);
+        if (isBiggerThanViewport) {
+          return {
+            min: firstPos,
+            max: lastPos
+          };
+        } else {
+          var align = flicking.camera.align;
+          var alignVal = typeof align === "object" ? align.camera : align;
+          var pos = firstPos + parseAlign$1(alignVal, lastPos - firstPos);
+          return {
+            min: pos,
+            max: pos
+          };
+        }
       };
-      /**
-       * Return {@link AnchorPoint} that includes given position
-       * If there's no {@link AnchorPoint} that includes the given position, return `null` instead
-       * @ko 주어진 좌표를 포함하는 {@link AnchorPoint}를 반환합니다
-       * 주어진 좌표를 포함하는 {@link AnchorPoint}가 없을 경우 `null`을 반환합니다
-       * @param {number} position A position to check<ko>확인할 좌표</ko>
-       * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position<ko>해당 좌표를 포함하는 {@link AnchorPoint}</ko>
-       */
 
+      __proto.getAnchors = function () {
+        var flicking = this._flicking;
+        var camera = flicking.camera;
+        var panels = flicking.renderer.panels;
 
-      __proto.findAnchorIncludePosition = function (position) {
-        var anchors = this._anchors;
-        var anchorsIncludingPosition = anchors.filter(function (anchor) {
-          return anchor.panel.includePosition(position, true);
+        if (panels.length <= 0) {
+          return [];
+        }
+
+        var range = flicking.camera.range;
+        var reachablePanels = panels.filter(function (panel) {
+          return camera.canReach(panel);
         });
-        return anchorsIncludingPosition.reduce(function (nearest, anchor) {
-          if (!nearest) return anchor;
-          return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
-        }, null);
-      };
-      /**
-       * Return {@link AnchorPoint} nearest to given position
-       * If there're no {@link AnchorPoint}s, return `null` instead
-       * @ko 해당 좌표에서 가장 가까운 {@link AnchorPoint}를 반환합니다
-       * {@link AnchorPoint}가 하나도 없을 경우 `null`을 반환합니다
-       * @param {number} position A position to check<ko>확인할 좌표</ko>
-       * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
-       */
 
+        if (reachablePanels.length > 0) {
+          var shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;
+          var shouldAppendBoundAnchor = reachablePanels[reachablePanels.length - 1].position !== range.max;
+          var indexOffset_1 = shouldPrependBoundAnchor ? 1 : 0;
+          var newAnchors = reachablePanels.map(function (panel, idx) {
+            return new AnchorPoint({
+              index: idx + indexOffset_1,
+              position: panel.position,
+              panel: panel
+            });
+          });
+
+          if (shouldPrependBoundAnchor) {
+            newAnchors.splice(0, 0, new AnchorPoint({
+              index: 0,
+              position: range.min,
+              panel: panels[reachablePanels[0].index - 1]
+            }));
+          }
 
-      __proto.findNearestAnchor = function (position) {
-        var anchors = this._anchors;
+          if (shouldAppendBoundAnchor) {
+            newAnchors.push(new AnchorPoint({
+              index: newAnchors.length,
+              position: range.max,
+              panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]
+            }));
+          }
+
+          return newAnchors;
+        } else if (range.min !== range.max) {
+          // There're more than 2 panels
+          var nearestPanelAtMin = this._findNearestPanel(range.min, panels);
+
+          var panelAtMin = nearestPanelAtMin.index === panels.length - 1 ? nearestPanelAtMin.prev() : nearestPanelAtMin;
+          var panelAtMax = panelAtMin.next();
+          return [new AnchorPoint({
+            index: 0,
+            position: range.min,
+            panel: panelAtMin
+          }), new AnchorPoint({
+            index: 1,
+            position: range.max,
+            panel: panelAtMax
+          })];
+        } else {
+          return [new AnchorPoint({
+            index: 0,
+            position: range.min,
+            panel: this._findNearestPanel(range.min, panels)
+          })];
+        }
+      };
+
+      __proto.findAnchorIncludePosition = function (position) {
+        var camera = this._flicking.camera;
+        var range = camera.range;
+        var anchors = camera.anchorPoints;
         if (anchors.length <= 0) return null;
+
+        if (position <= range.min) {
+          return anchors[0];
+        } else if (position >= range.max) {
+          return anchors[anchors.length - 1];
+        } else {
+          return _super.prototype.findAnchorIncludePosition.call(this, position);
+        }
+      };
+
+      __proto._findNearestPanel = function (pos, panels) {
         var prevDist = Infinity;
 
-        for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
-          var anchor = anchors[anchorIdx];
-          var dist = Math.abs(anchor.position - position);
+        for (var panelIdx = 0; panelIdx < panels.length; panelIdx++) {
+          var panel = panels[panelIdx];
+          var dist = Math.abs(panel.position - pos);
 
           if (dist > prevDist) {
             // Return previous anchor
-            return anchors[anchorIdx - 1];
+            return panels[panelIdx - 1];
           }
 
           prevDist = dist;
         } // Return last anchor
 
 
-        return anchors[anchors.length - 1];
+        return panels[panels.length - 1];
       };
-      /**
-       * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}
-       * @ko 현재 {@link Flicking#currentPanel}에 해당하는 {@link AnchorPoint}를 반환합니다
-       * @return {AnchorPoint | null}
-       */
 
+      return BoundCameraMode;
+    }(CameraMode);
 
-      __proto.findActiveAnchor = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var activeIndex = flicking.control.activeIndex;
-        return find$1(this._anchors, function (anchor) {
-          return anchor.panel.index === activeIndex;
-        });
-      };
-      /**
-       * Clamp the given position between camera's range
-       * @ko 주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다
-       * @param {number} position A position to clamp<ko>범위를 제한할 좌표</ko>
-       * @return {number} A clamped position<ko>범위 제한된 좌표</ko>
-       */
+    /**
+     * A component that manages actual movement inside the viewport
+     * @ko 뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트
+     */
 
+    var Camera$1 =
+    /*#__PURE__*/
+    function () {
+      /** */
+      function Camera(_a) {
+        var _this = this;
 
-      __proto.clampToReachablePosition = function (position) {
-        var range = this._range;
-        return clamp(position, range.min, range.max);
-      };
-      /**
-       * Check whether the given panel is inside of the Camera's range
-       * @ko 해당 {@link Panel}이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다
-       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
-       * @return {boolean} Whether the panel's inside Camera's range<ko>도달 가능한 범위 내에 해당 패널이 존재하는지 여부</ko>
-       */
+        var _b = (_a === void 0 ? {} : _a).align,
+            align = _b === void 0 ? ALIGN.CENTER : _b;
 
+        this._checkTranslateSupport = function () {
+          var e_1, _a;
 
-      __proto.canReach = function (panel) {
-        var range = this._range;
-        if (panel.removed) return false;
-        var panelPos = panel.position;
-        return panelPos >= range.min && panelPos <= range.max;
-      };
-      /**
-       * Check whether the given panel element is visible at the current position
-       * @ko 현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다
-       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
-       * @return Whether the panel element is visible at the current position<ko>현재 위치에서 해당 패널 엘리먼트가 보이는지 여부</ko>
-       */
+          var transforms = ["webkitTransform", "msTransform", "MozTransform", "OTransform", "transform"];
+          var supportedStyle = document.documentElement.style;
+          var transformName = "";
 
+          try {
+            for (var transforms_1 = __values$2(transforms), transforms_1_1 = transforms_1.next(); !transforms_1_1.done; transforms_1_1 = transforms_1.next()) {
+              var prefixedTransform = transforms_1_1.value;
 
-      __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.isVisibleOnRange(visibleRange.min, visibleRange.max);
-      };
-      /**
-       * Update Camera's {@link Camera#alignPosition alignPosition}
-       * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다
-       * @chainable
-       * @return {this}
-       */
-
-
-      __proto.updateAlignPos = function () {
-        var align = this._align;
-        var alignVal = typeof align === "object" ? align.camera : align;
-        this._alignPos = parseAlign$1(alignVal, this.size);
-        return this;
-      };
-      /**
-       * Update Camera's {@link Camera#anchorPoints anchorPoints}
-       * @ko Camera의 {@link Camera#anchorPoints anchorPoints}를 업데이트합니다
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @chainable
-       * @return {this}
-       */
-
-
-      __proto.updateAnchors = function () {
-        var flicking = getFlickingAttached(this._flicking);
-        var panels = flicking.renderer.panels;
-        this._anchors = panels.map(function (panel, index) {
-          return new AnchorPoint({
-            index: index,
-            position: panel.position,
-            panel: panel
-          });
-        });
-        return this;
-      };
-      /**
-       * Update Viewport's height to active panel's height
-       * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-       * @chainable
-       * @return {this}
-       */
-
-
-      __proto.updateAdaptiveHeight = function () {
-        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);
-        var position = this._position;
-        var unRenderedPanels = flicking.panels.filter(function (panel) {
-          return !panel.rendered;
-        });
-        this._offset = unRenderedPanels.filter(function (panel) {
-          return panel.position + panel.offset < position;
-        }).reduce(function (offset, panel) {
-          return offset + panel.sizeIncludingMargin;
-        }, 0);
-        this.applyTransform();
-        return this;
-      };
-      /**
-       * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
-       * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
-       * @chainable
-       * @return {this}
-       */
+              if (prefixedTransform in supportedStyle) {
+                transformName = prefixedTransform;
+              }
+            }
+          } catch (e_1_1) {
+            e_1 = {
+              error: e_1_1
+            };
+          } finally {
+            try {
+              if (transforms_1_1 && !transforms_1_1.done && (_a = transforms_1.return)) _a.call(transforms_1);
+            } finally {
+              if (e_1) throw e_1.error;
+            }
+          }
 
+          if (!transformName) {
+            throw new FlickingError(MESSAGE.TRANSFORM_NOT_SUPPORTED, CODE.TRANSFORM_NOT_SUPPORTED);
+          }
 
-      __proto.resetNeedPanelHistory = function () {
-        this._needPanelTriggered = {
-          prev: false,
-          next: false
+          _this._transform = transformName;
         };
-        return this;
-      };
-      /**
-       * Apply "transform" style with the current position to camera element
-       * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
-       * @chainable
-       * @return {this}
-       */
 
+        this._flicking = null;
 
-      __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;
-      };
+        this._resetInternalValues(); // Options
 
-      __proto._resetInternalValues = function () {
-        this._position = 0;
-        this._alignPos = 0;
-        this._offset = 0;
-        this._range = {
-          min: 0,
-          max: 0
-        };
-        this._visiblePanels = [];
-        this._anchors = [];
-        this._needPanelTriggered = {
-          prev: false,
-          next: false
-        };
-      };
 
-      __proto._refreshVisiblePanels = function () {
-        var _this = this;
+        this._align = align;
+      }
 
-        var flicking = getFlickingAttached(this._flicking);
-        var panels = flicking.renderer.panels;
-        var newVisiblePanels = panels.filter(function (panel) {
-          return _this.canSee(panel);
-        });
-        var prevVisiblePanels = this._visiblePanels;
-        this._visiblePanels = newVisiblePanels;
-        var added = newVisiblePanels.filter(function (panel) {
-          return !includes(prevVisiblePanels, panel);
-        });
-        var removed = prevVisiblePanels.filter(function (panel) {
-          return !includes(newVisiblePanels, panel);
-        });
+      var __proto = Camera.prototype;
+      Object.defineProperty(__proto, "element", {
+        // Internal states getter
+
+        /**
+         * The camera element(`.flicking-camera`)
+         * @ko 카메라 엘리먼트(`.flicking-camera`)
+         * @type {HTMLElement}
+         * @readonly
+         */
+        get: function () {
+          return this._el;
+        },
+        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$3(this._el.children);
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "position", {
+        /**
+         * Current position of the camera
+         * @ko Camera의 현재 좌표
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          return this._position;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "alignPosition", {
+        /**
+         * Align position inside the viewport where {@link Panel}'s {@link Panel#alignPosition alignPosition} should be located at
+         * @ko 패널의 정렬 기준 위치. 뷰포트 내에서 {@link Panel}의 {@link Panel#alignPosition alignPosition}이 위치해야 하는 곳입니다
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          return this._alignPos;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "offset", {
+        /**
+         * Position offset, used for the {@link Flicking#renderOnlyVisible renderOnlyVisible} option
+         * @ko Camera의 좌표 오프셋. {@link Flicking#renderOnlyVisible renderOnlyVisible} 옵션을 위해 사용됩니다.
+         * @type {number}
+         * @default 0
+         * @readonly
+         */
+        get: function () {
+          return this._offset - this._circularOffset;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "circularEnabled", {
+        /**
+         * Whether the `circular` option is enabled.
+         * The {@link Flicking#circular circular} option can't be enabled when sum of the panel sizes are too small.
+         * @ko {@link Flicking#circular circular} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
+         * {@link Flicking#circular circular} 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
+         * @type {boolean}
+         * @default false
+         * @readonly
+         */
+        get: function () {
+          return this._circularEnabled;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "mode", {
+        /**
+         * A current camera mode
+         * @type {CameraMode}
+         * @readonly
+         */
+        get: function () {
+          return this._mode;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "range", {
+        /**
+         * A range that Camera's {@link Camera#position position} can reach
+         * @ko Camera의 {@link Camera#position position}이 도달 가능한 범위
+         * @type {object}
+         * @property {number} min A minimum position<ko>최소 위치</ko>
+         * @property {number} max A maximum position<ko>최대 위치</ko>
+         * @readonly
+         */
+        get: function () {
+          return this._range;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "rangeDiff", {
+        /**
+         * A difference between Camera's minimum and maximum position that can reach
+         * @ko Camera가 도달 가능한 최소/최대 좌표의 차이
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          return this._range.max - this._range.min;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "visiblePanels", {
+        /**
+         * An array of visible panels from the current position
+         * @ko 현재 보이는 패널들의 배열
+         * @type {Panel[]}
+         * @readonly
+         */
+        get: function () {
+          return this._visiblePanels;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "visibleRange", {
+        /**
+         * A range of the visible area from the current position
+         * @ko 현재 위치에서 보이는 범위
+         * @type {object}
+         * @property {number} min A minimum position<ko>최소 위치</ko>
+         * @property {number} min A maximum position<ko>최대 위치</ko>
+         * @readonly
+         */
+        get: function () {
+          return {
+            min: this._position - this._alignPos,
+            max: this._position - this._alignPos + this.size
+          };
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "anchorPoints", {
+        /**
+         * An array of {@link AnchorPoint}s that Camera can be stopped at
+         * @ko 카메라가 도달 가능한 {@link AnchorPoint}의 목록
+         * @type {AnchorPoint[]}
+         * @readonly
+         */
+        get: function () {
+          return this._anchors;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "controlParams", {
+        /**
+         * A current parameters of the Camera for updating {@link AxesController}
+         * @ko {@link AxesController}를 업데이트하기 위한 현재 Camera 패러미터들
+         * @type {ControlParams}
+         * @readonly
+         */
+        get: function () {
+          return {
+            range: this._range,
+            position: this._position,
+            circular: this._circularEnabled
+          };
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "atEdge", {
+        /**
+         * A Boolean value indicating whether Camera's over the minimum or maximum position reachable
+         * @ko 현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다
+         * @type {boolean}
+         * @readonly
+         */
+        get: function () {
+          return this._position <= this._range.min || this._position >= this._range.max;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "size", {
+        /**
+         * Return the size of the viewport
+         * @ko 뷰포트 크기를 반환합니다
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          var flicking = this._flicking;
+          return flicking ? flicking.horizontal ? flicking.viewport.width : flicking.viewport.height : 0;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "progress", {
+        /**
+         * Return the camera's position progress from the first panel to last panel
+         * Range is from 0 to last panel's index
+         * @ko 첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
+         * 범위는 0부터 마지막 패널의 인덱스까지입니다
+         * @type {number}
+         * @readonly
+         */
+        get: function () {
+          var flicking = this._flicking;
+          var position = this._position + this._offset;
+          var nearestAnchor = this.findNearestAnchor(this._position);
 
-        if (added.length > 0 || removed.length > 0) {
-          void flicking.renderer.render().then(function () {
-            flicking.trigger(new ComponentEvent$1(EVENTS.VISIBLE_CHANGE, {
-              added: added,
-              removed: removed,
-              visiblePanels: newVisiblePanels
-            }));
-          });
-        }
-      };
+          if (!flicking || !nearestAnchor) {
+            return NaN;
+          }
 
-      __proto._checkNeedPanel = function () {
-        var needPanelTriggered = this._needPanelTriggered;
-        if (needPanelTriggered.prev && needPanelTriggered.next) return;
-        var flicking = getFlickingAttached(this._flicking);
-        var panels = flicking.renderer.panels;
+          var nearestPanel = nearestAnchor.panel;
+          var panelPos = nearestPanel.position + nearestPanel.offset;
+          var bounceSize = flicking.control.controller.bounce;
+          var _a = this.range,
+              prevRange = _a.min,
+              nextRange = _a.max;
+          var rangeDiff = this.rangeDiff;
 
-        if (panels.length <= 0) {
-          if (!needPanelTriggered.prev) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.PREV
-            }));
-            needPanelTriggered.prev = true;
+          if (position === panelPos) {
+            return nearestPanel.index;
           }
 
-          if (!needPanelTriggered.next) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.NEXT
-            }));
-            needPanelTriggered.next = true;
-          }
+          if (position < panelPos) {
+            var prevPanel = nearestPanel.prev();
+            var prevPosition = prevPanel ? prevPanel.position + prevPanel.offset : prevRange - bounceSize[0]; // Looped
 
-          return;
-        }
+            if (prevPosition > panelPos) {
+              prevPosition -= rangeDiff;
+            }
 
-        var cameraPosition = this._position;
-        var cameraSize = this.size;
-        var cameraRange = this._range;
-        var needPanelThreshold = flicking.needPanelThreshold;
-        var cameraPrev = cameraPosition - this._alignPos;
-        var cameraNext = cameraPrev + cameraSize;
-        var firstPanel = panels[0];
-        var lastPanel = panels[panels.length - 1];
+            return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
+          } else {
+            var nextPanel = nearestPanel.next();
+            var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1]; // Looped
 
-        if (!needPanelTriggered.prev) {
-          var firstPanelPrev = firstPanel.range.min;
+            if (nextPosition < panelPos) {
+              nextPosition += rangeDiff;
+            }
 
-          if (cameraPrev <= firstPanelPrev + needPanelThreshold || cameraPosition <= cameraRange.min + needPanelThreshold) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.PREV
-            }));
-            needPanelTriggered.prev = true;
+            return nearestPanel.index + getProgress(position, panelPos, nextPosition);
           }
-        }
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(__proto, "align", {
+        // Options Getter
 
-        if (!needPanelTriggered.next) {
-          var lastPanelNext = lastPanel.range.max;
+        /**
+         * A value indicating where the {@link Camera#alignPosition alignPosition} should be located at inside the viewport element
+         * @ko {@link Camera#alignPosition alignPosition}이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값
+         * @type {ALIGN | string | number}
+         */
+        get: function () {
+          return this._align;
+        },
+        // Options Setter
+        set: function (val) {
+          this._align = val;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      /**
+       * Initialize Camera
+       * @ko Camera를 초기화합니다
+       * @param {Flicking} flicking An instance of {@link Flicking}<ko>Flicking의 인스턴스</ko>
+       * @chainable
+       * @throws {FlickingError}
+       * {@link ERROR_CODE VAL_MUST_NOT_NULL} If the camera element(`.flicking-camera`) does not exist inside viewport element
+       * <ko>{@link ERROR_CODE VAL_MUST_NOT_NULL} 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우</ko>
+       * @return {this}
+       */
 
-          if (cameraNext >= lastPanelNext - needPanelThreshold || cameraPosition >= cameraRange.max - needPanelThreshold) {
-            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
-              direction: DIRECTION.NEXT
-            }));
-            needPanelTriggered.next = true;
-          }
-        }
-      };
+      __proto.init = function (flicking) {
+        this._flicking = flicking;
+        var viewportEl = flicking.viewport.element;
+        checkExistence(viewportEl.firstElementChild, "First element child of the viewport element");
+        this._el = viewportEl.firstElementChild;
 
-      __proto._checkReachEnd = function (prevPos, newPos) {
-        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;
-        if (!wasBetweenRange || isBetweenRange) return;
-        var direction = newPos <= range.min ? DIRECTION.PREV : DIRECTION.NEXT;
-        flicking.trigger(new ComponentEvent$1(EVENTS.REACH_EDGE, {
-          direction: direction
-        }));
+        this._checkTranslateSupport();
+
+        this._updateMode();
+
+        return this;
       };
+      /**
+       * Destroy Camera and return to initial state
+       * @ko Camera를 초기 상태로 되돌립니다
+       * @return {void}
+       */
 
-      return Camera;
-    }();
 
-    /**
-     * A {@link Camera} that can move from the position of the first panel to the position of the last panel
-     * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
-     */
+      __proto.destroy = function () {
+        this._flicking = null;
 
-    var LinearCamera =
-    /*#__PURE__*/
-    function (_super) {
-      __extends$2(LinearCamera, _super);
+        this._resetInternalValues();
 
-      function LinearCamera() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      }
+        return this;
+      };
       /**
-       * Update {@link Camera#range range} of Camera
-       * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-       * @chainable
+       * Move to the given position and apply CSS transform
+       * @ko 해당 좌표로 이동하고, CSS transform을 적용합니다
+       * @param {number} pos A new position<ko>움직일 위치</ko>
        * @throws {FlickingError}
        * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
        * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
@@ -10804,170 +10896,190 @@ version: 4.4.1
        */
 
 
-      var __proto = LinearCamera.prototype;
-
-      __proto.updateRange = function () {
-        var _a, _b;
+      __proto.lookAt = function (pos) {
+        var _this = this;
 
         var flicking = getFlickingAttached(this._flicking);
-        var renderer = flicking.renderer;
-        var firstPanel = renderer.getPanel(0);
-        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
-        this._range = {
-          min: (_a = firstPanel === null || firstPanel === void 0 ? void 0 : firstPanel.position) !== null && _a !== void 0 ? _a : 0,
-          max: (_b = lastPanel === null || lastPanel === void 0 ? void 0 : lastPanel.position) !== null && _b !== void 0 ? _b : 0
-        };
-        return this;
-      };
+        var prevPos = this._position;
+        this._position = pos;
 
-      return LinearCamera;
-    }(Camera$1);
+        var toggled = this._togglePanels(prevPos, pos);
 
-    /**
-     * A {@link Camera} that connects the last panel and the first panel, enabling continuous loop
-     * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
-     */
+        this._refreshVisiblePanels();
 
-    var CircularCamera =
-    /*#__PURE__*/
-    function (_super) {
-      __extends$2(CircularCamera, _super);
+        this._checkNeedPanel();
 
-      function CircularCamera() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        this._checkReachEnd(prevPos, pos);
 
-        _this._circularOffset = 0;
-        _this._circularEnabled = false;
-        return _this;
-      }
+        this.applyTransform();
+
+        if (toggled) {
+          void flicking.renderer.render().then(function () {
+            _this.updateOffset();
+          });
+        }
+      };
+      /**
+       * Return a previous {@link AnchorPoint} of given {@link AnchorPoint}
+       * If it does not exist, return `null` instead
+       * @ko 주어진 {@link AnchorPoint}의 이전 {@link AnchorPoint}를 반환합니다
+       * 존재하지 않을 경우 `null`을 반환합니다
+       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
+       * @return {AnchorPoint | null} The previous {@link AnchorPoint}<ko>이전 {@link AnchorPoint}</ko>
+       */
 
-      var __proto = CircularCamera.prototype;
-      Object.defineProperty(__proto, "offset", {
-        get: function () {
-          return this._offset - this._circularOffset;
-        },
-        enumerable: false,
-        configurable: true
-      });
-      Object.defineProperty(__proto, "controlParams", {
-        get: function () {
-          return {
-            range: this._range,
-            position: this._position,
-            circular: this._circularEnabled
-          };
-        },
-        enumerable: false,
-        configurable: true
-      });
 
       __proto.getPrevAnchor = function (anchor) {
-        if (!this._circularEnabled || anchor.index !== 0) return _super.prototype.getPrevAnchor.call(this, anchor);
+        if (!this._circularEnabled || anchor.index !== 0) {
+          return this._anchors[anchor.index - 1] || null;
+        } else {
+          var anchors = this._anchors;
+          var rangeDiff = this.rangeDiff;
+          var lastAnchor = anchors[anchors.length - 1];
+          return new AnchorPoint({
+            index: lastAnchor.index,
+            position: lastAnchor.position - rangeDiff,
+            panel: lastAnchor.panel
+          });
+        }
+      };
+      /**
+       * Return a next {@link AnchorPoint} of given {@link AnchorPoint}
+       * If it does not exist, return `null` instead
+       * @ko 주어진 {@link AnchorPoint}의 다음 {@link AnchorPoint}를 반환합니다
+       * 존재하지 않을 경우 `null`을 반환합니다
+       * @param {AnchorPoint} anchor A reference {@link AnchorPoint}<ko>기준 {@link AnchorPoint}</ko>
+       * @return {AnchorPoint | null} The next {@link AnchorPoint}<ko>다음 {@link AnchorPoint}</ko>
+       */
+
+
+      __proto.getNextAnchor = function (anchor) {
         var anchors = this._anchors;
-        var rangeDiff = this.rangeDiff;
-        var lastAnchor = anchors[anchors.length - 1];
-        return new AnchorPoint({
-          index: lastAnchor.index,
-          position: lastAnchor.position - rangeDiff,
-          panel: lastAnchor.panel
-        });
+
+        if (!this._circularEnabled || anchor.index !== anchors.length - 1) {
+          return anchors[anchor.index + 1] || null;
+        } else {
+          var rangeDiff = this.rangeDiff;
+          var firstAnchor = anchors[0];
+          return new AnchorPoint({
+            index: firstAnchor.index,
+            position: firstAnchor.position + rangeDiff,
+            panel: firstAnchor.panel
+          });
+        }
       };
+      /**
+       * Return the camera's position progress in the panel below
+       * Value is from 0 to 1 when the camera's inside panel
+       * Value can be lower than 0 or bigger than 1 when it's in the margin area
+       * @ko 현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
+       * 반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
+       * 패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다
+       */
 
-      __proto.getNextAnchor = function (anchor) {
-        var anchors = this._anchors;
-        if (!this._circularEnabled || anchor.index !== anchors.length - 1) return _super.prototype.getNextAnchor.call(this, anchor);
-        var rangeDiff = this.rangeDiff;
-        var firstAnchor = anchors[0];
-        return new AnchorPoint({
-          index: firstAnchor.index,
-          position: firstAnchor.position + rangeDiff,
-          panel: firstAnchor.panel
-        });
+
+      __proto.getProgressInPanel = function (panel) {
+        var panelRange = panel.range;
+        return (this._position - panelRange.min) / (panelRange.max - panelRange.min);
       };
+      /**
+       * Return {@link AnchorPoint} that includes given position
+       * If there's no {@link AnchorPoint} that includes the given position, return `null` instead
+       * @ko 주어진 좌표를 포함하는 {@link AnchorPoint}를 반환합니다
+       * 주어진 좌표를 포함하는 {@link AnchorPoint}가 없을 경우 `null`을 반환합니다
+       * @param {number} position A position to check<ko>확인할 좌표</ko>
+       * @return {AnchorPoint | null} The {@link AnchorPoint} that includes the given position<ko>해당 좌표를 포함하는 {@link AnchorPoint}</ko>
+       */
+
 
       __proto.findAnchorIncludePosition = function (position) {
-        if (!this._circularEnabled) return _super.prototype.findAnchorIncludePosition.call(this, position);
-        var range = this._range;
+        return this._mode.findAnchorIncludePosition(position);
+      };
+      /**
+       * Return {@link AnchorPoint} nearest to given position
+       * If there're no {@link AnchorPoint}s, return `null` instead
+       * @ko 해당 좌표에서 가장 가까운 {@link AnchorPoint}를 반환합니다
+       * {@link AnchorPoint}가 하나도 없을 경우 `null`을 반환합니다
+       * @param {number} position A position to check<ko>확인할 좌표</ko>
+       * @return {AnchorPoint | null} The {@link AnchorPoint} nearest to the given position<ko>해당 좌표에 가장 인접한 {@link AnchorPoint}</ko>
+       */
+
+
+      __proto.findNearestAnchor = function (position) {
         var anchors = this._anchors;
-        var rangeDiff = this.rangeDiff;
-        var anchorCount = anchors.length;
-        var positionInRange = circulatePosition(position, range.min, range.max);
+        if (anchors.length <= 0) return null;
+        var prevDist = Infinity;
 
-        var anchorInRange = _super.prototype.findAnchorIncludePosition.call(this, positionInRange);
+        for (var anchorIdx = 0; anchorIdx < anchors.length; anchorIdx++) {
+          var anchor = anchors[anchorIdx];
+          var dist = Math.abs(anchor.position - position);
 
-        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 (dist > prevDist) {
+            // Return previous anchor
+            return anchors[anchorIdx - 1];
+          }
 
-        if (!anchorInRange) return null;
+          prevDist = dist;
+        } // Return last anchor
 
-        if (position < range.min) {
-          var loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
-          return new AnchorPoint({
-            index: anchorInRange.index,
-            position: anchorInRange.position + rangeDiff * loopCount,
-            panel: anchorInRange.panel
-          });
-        } else if (position > range.max) {
-          var loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
-          return new AnchorPoint({
-            index: anchorInRange.index,
-            position: anchorInRange.position + rangeDiff * loopCount,
-            panel: anchorInRange.panel
-          });
-        }
 
-        return anchorInRange;
+        return anchors[anchors.length - 1];
       };
+      /**
+       * Return {@link AnchorPoint} that matches {@link Flicking#currentPanel}
+       * @ko 현재 {@link Flicking#currentPanel}에 해당하는 {@link AnchorPoint}를 반환합니다
+       * @return {AnchorPoint | null}
+       */
 
-      __proto.clampToReachablePosition = function (position) {
-        // Basically all position is reachable for circular camera
-        return this._circularEnabled ? position : _super.prototype.clampToReachablePosition.call(this, position);
-      };
 
-      __proto.canReach = function (panel) {
-        if (panel.removed) return false;
-        return this._circularEnabled // Always reachable on circular mode
-        ? true : _super.prototype.canReach.call(this, panel);
+      __proto.findActiveAnchor = function () {
+        var flicking = getFlickingAttached(this._flicking);
+        var activeIndex = flicking.control.activeIndex;
+        return find$1(this._anchors, function (anchor) {
+          return anchor.panel.index === activeIndex;
+        });
       };
+      /**
+       * Clamp the given position between camera's range
+       * @ko 주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다
+       * @param {number} position A position to clamp<ko>범위를 제한할 좌표</ko>
+       * @return {number} A clamped position<ko>범위 제한된 좌표</ko>
+       */
 
-      __proto.canSee = function (panel) {
-        var range = this._range;
-        var rangeDiff = this.rangeDiff;
-        var visibleRange = this.visibleRange;
 
-        var visibleInCurrentRange = _super.prototype.canSee.call(this, panel);
+      __proto.clampToReachablePosition = function (position) {
+        return this._mode.clampToReachablePosition(position);
+      };
+      /**
+       * Check whether the given panel is inside of the Camera's range
+       * @ko 해당 {@link Panel}이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다
+       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
+       * @return {boolean} Whether the panel's inside Camera's range<ko>도달 가능한 범위 내에 해당 패널이 존재하는지 여부</ko>
+       */
 
-        if (!this._circularEnabled) {
-          return visibleInCurrentRange;
-        } // Check looped visible area for circular case
 
+      __proto.canReach = function (panel) {
+        return this._mode.canReach(panel);
+      };
+      /**
+       * Check whether the given panel element is visible at the current position
+       * @ko 현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다
+       * @param panel An instance of {@link Panel} to check<ko>확인할 {@link Panel}의 인스턴스</ko>
+       * @return Whether the panel element is visible at the current position<ko>현재 위치에서 해당 패널 엘리먼트가 보이는지 여부</ko>
+       */
 
-        if (visibleRange.min < range.min) {
-          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff);
-        } else if (visibleRange.max > range.max) {
-          return visibleInCurrentRange || panel.isVisibleOnRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff);
-        }
 
-        return visibleInCurrentRange;
+      __proto.canSee = function (panel) {
+        return this._mode.canSee(panel);
       };
       /**
        * Update {@link Camera#range range} of Camera
        * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+       * @method
+       * @abstract
+       * @memberof Camera
+       * @instance
+       * @name updateRange
        * @chainable
        * @throws {FlickingError}
        * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
@@ -10981,287 +11093,269 @@ version: 4.4.1
         var renderer = flicking.renderer;
         var panels = renderer.panels;
 
-        if (panels.length <= 0) {
-          this._resetInternalValues();
-
-          return this;
-        }
+        this._updateMode();
 
-        var firstPanel = panels[0];
-        var lastPanel = panels[panels.length - 1];
-        var firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
-        var lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
-        var visibleSize = this.size;
-        var panelSizeSum = lastPanelNext - firstPanelPrev;
-        var canSetCircularMode = panels.every(function (panel) {
-          return panelSizeSum - panel.size >= visibleSize;
-        });
-        this._circularEnabled = canSetCircularMode;
+        this._range = this._mode.getRange();
 
-        if (canSetCircularMode) {
-          this._range = {
-            min: firstPanelPrev,
-            max: lastPanelNext
-          };
+        if (this._circularEnabled) {
           panels.forEach(function (panel) {
             return panel.updateCircularToggleDirection();
           });
-        } else {
-          this._range = {
-            min: firstPanel.position,
-            max: lastPanel.position
-          };
         }
 
         this.updateOffset();
         return this;
       };
+      /**
+       * Update Camera's {@link Camera#alignPosition alignPosition}
+       * @ko Camera의 {@link Camera#alignPosition alignPosition}을 업데이트합니다
+       * @chainable
+       * @return {this}
+       */
 
-      __proto.updateOffset = function () {
-        this._updateCircularOffset();
 
-        return _super.prototype.updateOffset.call(this);
+      __proto.updateAlignPos = function () {
+        var align = this._align;
+        var alignVal = typeof align === "object" ? align.camera : align;
+        this._alignPos = parseAlign$1(alignVal, this.size);
+        return this;
       };
+      /**
+       * Update Camera's {@link Camera#anchorPoints anchorPoints}
+       * @ko Camera의 {@link Camera#anchorPoints anchorPoints}를 업데이트합니다
+       * @throws {FlickingError}
+       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+       * @chainable
+       * @return {this}
+       */
 
-      __proto.lookAt = function (pos) {
-        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;
-        var toggled = panels.map(function (panel) {
-          return panel.toggle(prevPos, pos);
-        });
-        this._position = pos;
-
-        _super.prototype.lookAt.call(this, pos);
-
-        if (toggled.some(function (isToggled) {
-          return isToggled;
-        })) {
-          void flicking.renderer.render().then(function () {
-            _this.updateOffset();
-          });
-        }
-      };
 
-      __proto.applyTransform = function () {
-        var el = this._el;
-        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)";
+      __proto.updateAnchors = function () {
+        this._anchors = this._mode.getAnchors();
         return this;
       };
+      /**
+       * Update Viewport's height to active panel's height
+       * @ko 현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다
+       * @throws {FlickingError}
+       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
+       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
+       * @chainable
+       * @return {this}
+       */
 
-      __proto._resetInternalValues = function () {
-        _super.prototype._resetInternalValues.call(this);
-
-        this._circularOffset = 0;
-        this._circularEnabled = false;
-      };
 
-      __proto._calcPanelAreaSum = function (panels) {
-        return panels.reduce(function (sum, panel) {
-          return sum + panel.sizeIncludingMargin;
-        }, 0);
+      __proto.updateAdaptiveHeight = function () {
+        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._updateCircularOffset = function () {
-        if (!this._circularEnabled) {
-          this._circularOffset = 0;
-          return;
-        }
 
+      __proto.updateOffset = function () {
         var flicking = getFlickingAttached(this._flicking);
-        var toggled = flicking.panels.filter(function (panel) {
-          return panel.toggled;
-        });
-        var toggledPrev = toggled.filter(function (panel) {
-          return panel.toggleDirection === DIRECTION.PREV;
-        });
-        var toggledNext = toggled.filter(function (panel) {
-          return panel.toggleDirection === DIRECTION.NEXT;
+        var position = this._position;
+        var unRenderedPanels = flicking.panels.filter(function (panel) {
+          return !panel.rendered;
         });
-        this._circularOffset = this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
+        this._offset = unRenderedPanels.filter(function (panel) {
+          return panel.position + panel.offset < position;
+        }).reduce(function (offset, panel) {
+          return offset + panel.sizeIncludingMargin;
+        }, 0);
+        this._circularOffset = this._mode.getCircularOffset();
+        this.applyTransform();
+        return this;
       };
+      /**
+       * Reset the history of {@link Flicking#event:needPanel needPanel} events so it can be triggered again
+       * @ko 발생한 {@link Flicking#event:needPanel needPanel} 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다
+       * @chainable
+       * @return {this}
+       */
 
-      return CircularCamera;
-    }(Camera$1);
-
-    /**
-     * A {@link Camera} that set range not to go out of the first/last panel, so it won't show empty spaces before/after the first/last panel
-     * @ko 첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 {@link Camera}
-     */
-
-    var BoundCamera =
-    /*#__PURE__*/
-    function (_super) {
-      __extends$2(BoundCamera, _super);
 
-      function BoundCamera() {
-        return _super !== null && _super.apply(this, arguments) || this;
-      }
+      __proto.resetNeedPanelHistory = function () {
+        this._needPanelTriggered = {
+          prev: false,
+          next: false
+        };
+        return this;
+      };
       /**
-       * Update {@link Camera#range range} of Camera
-       * @ko Camera의 {@link Camera#range range}를 업데이트합니다
+       * Apply "transform" style with the current position to camera element
+       * @ko 현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다.
        * @chainable
-       * @throws {FlickingError}
-       * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-       * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
        * @return {this}
        */
 
 
-      var __proto = BoundCamera.prototype;
-
-      __proto.updateRange = function () {
+      __proto.applyTransform = function () {
+        var el = this._el;
         var flicking = getFlickingAttached(this._flicking);
-        var renderer = flicking.renderer;
-        var alignPos = this._alignPos;
-        var firstPanel = renderer.getPanel(0);
-        var lastPanel = renderer.getPanel(renderer.panelCount - 1);
-
-        if (!firstPanel || !lastPanel) {
-          this._range = {
-            min: 0,
-            max: 0
-          };
-          return this;
-        }
-
-        var viewportSize = this.size;
-        var firstPanelPrev = firstPanel.range.min;
-        var lastPanelNext = lastPanel.range.max;
-        var panelAreaSize = lastPanelNext - firstPanelPrev;
-        var isBiggerThanViewport = viewportSize < panelAreaSize;
-        var firstPos = firstPanelPrev + alignPos;
-        var lastPos = lastPanelNext - viewportSize + alignPos;
-
-        if (isBiggerThanViewport) {
-          this._range = {
-            min: firstPos,
-            max: lastPos
-          };
-        } else {
-          var align = this._align;
-          var alignVal = typeof align === "object" ? align.camera : align;
-          var pos = firstPos + parseAlign$1(alignVal, lastPos - firstPos);
-          this._range = {
-            min: pos,
-            max: pos
-          };
-        }
-
+        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.updateAnchors = function () {
+      __proto._resetInternalValues = function () {
+        this._position = 0;
+        this._alignPos = 0;
+        this._offset = 0;
+        this._circularOffset = 0;
+        this._circularEnabled = false;
+        this._range = {
+          min: 0,
+          max: 0
+        };
+        this._visiblePanels = [];
+        this._anchors = [];
+        this._needPanelTriggered = {
+          prev: false,
+          next: false
+        };
+      };
+
+      __proto._refreshVisiblePanels = function () {
         var _this = this;
 
         var flicking = getFlickingAttached(this._flicking);
         var panels = flicking.renderer.panels;
-
-        if (panels.length <= 0) {
-          this._anchors = [];
-          return this;
-        }
-
-        var range = this._range;
-        var reachablePanels = panels.filter(function (panel) {
-          return _this.canReach(panel);
+        var newVisiblePanels = panels.filter(function (panel) {
+          return _this.canSee(panel);
+        });
+        var prevVisiblePanels = this._visiblePanels;
+        this._visiblePanels = newVisiblePanels;
+        var added = newVisiblePanels.filter(function (panel) {
+          return !includes(prevVisiblePanels, panel);
+        });
+        var removed = prevVisiblePanels.filter(function (panel) {
+          return !includes(newVisiblePanels, panel);
         });
 
-        if (reachablePanels.length > 0) {
-          var shouldPrependBoundAnchor = reachablePanels[0].position !== range.min;
-          var shouldAppendBoundAnchor = reachablePanels[reachablePanels.length - 1].position !== range.max;
-          var indexOffset_1 = shouldPrependBoundAnchor ? 1 : 0;
-          var newAnchors = reachablePanels.map(function (panel, idx) {
-            return new AnchorPoint({
-              index: idx + indexOffset_1,
-              position: panel.position,
-              panel: panel
-            });
+        if (added.length > 0 || removed.length > 0) {
+          void flicking.renderer.render().then(function () {
+            flicking.trigger(new ComponentEvent$1(EVENTS.VISIBLE_CHANGE, {
+              added: added,
+              removed: removed,
+              visiblePanels: newVisiblePanels
+            }));
           });
+        }
+      };
 
-          if (shouldPrependBoundAnchor) {
-            newAnchors.splice(0, 0, new AnchorPoint({
-              index: 0,
-              position: range.min,
-              panel: panels[reachablePanels[0].index - 1]
+      __proto._checkNeedPanel = function () {
+        var needPanelTriggered = this._needPanelTriggered;
+        if (needPanelTriggered.prev && needPanelTriggered.next) return;
+        var flicking = getFlickingAttached(this._flicking);
+        var panels = flicking.renderer.panels;
+
+        if (panels.length <= 0) {
+          if (!needPanelTriggered.prev) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.PREV
             }));
+            needPanelTriggered.prev = true;
           }
 
-          if (shouldAppendBoundAnchor) {
-            newAnchors.push(new AnchorPoint({
-              index: newAnchors.length,
-              position: range.max,
-              panel: panels[reachablePanels[reachablePanels.length - 1].index + 1]
+          if (!needPanelTriggered.next) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.NEXT
             }));
+            needPanelTriggered.next = true;
           }
 
-          this._anchors = newAnchors;
-        } else if (range.min !== range.max) {
-          // There're more than 2 panels
-          var nearestPanelAtMin = this._findNearestPanel(range.min, panels);
+          return;
+        }
 
-          var panelAtMin = nearestPanelAtMin.index === panels.length - 1 ? nearestPanelAtMin.prev() : nearestPanelAtMin;
-          var panelAtMax = panelAtMin.next();
-          this._anchors = [new AnchorPoint({
-            index: 0,
-            position: range.min,
-            panel: panelAtMin
-          }), new AnchorPoint({
-            index: 1,
-            position: range.max,
-            panel: panelAtMax
-          })];
-        } else {
-          this._anchors = [new AnchorPoint({
-            index: 0,
-            position: range.min,
-            panel: this._findNearestPanel(range.min, panels)
-          })];
+        var cameraPosition = this._position;
+        var cameraSize = this.size;
+        var cameraRange = this._range;
+        var needPanelThreshold = flicking.needPanelThreshold;
+        var cameraPrev = cameraPosition - this._alignPos;
+        var cameraNext = cameraPrev + cameraSize;
+        var firstPanel = panels[0];
+        var lastPanel = panels[panels.length - 1];
+
+        if (!needPanelTriggered.prev) {
+          var firstPanelPrev = firstPanel.range.min;
+
+          if (cameraPrev <= firstPanelPrev + needPanelThreshold || cameraPosition <= cameraRange.min + needPanelThreshold) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.PREV
+            }));
+            needPanelTriggered.prev = true;
+          }
         }
 
-        return this;
+        if (!needPanelTriggered.next) {
+          var lastPanelNext = lastPanel.range.max;
+
+          if (cameraNext >= lastPanelNext - needPanelThreshold || cameraPosition >= cameraRange.max - needPanelThreshold) {
+            flicking.trigger(new ComponentEvent$1(EVENTS.NEED_PANEL, {
+              direction: DIRECTION.NEXT
+            }));
+            needPanelTriggered.next = true;
+          }
+        }
       };
 
-      __proto.findAnchorIncludePosition = function (position) {
+      __proto._checkReachEnd = function (prevPos, newPos) {
+        var flicking = getFlickingAttached(this._flicking);
         var range = this._range;
-        var anchors = this._anchors;
-        if (anchors.length <= 0) return null;
-
-        if (position <= range.min) {
-          return anchors[0];
-        } else if (position >= range.max) {
-          return anchors[anchors.length - 1];
-        } else {
-          return _super.prototype.findAnchorIncludePosition.call(this, position);
-        }
+        var wasBetweenRange = prevPos > range.min && prevPos < range.max;
+        var isBetweenRange = newPos > range.min && newPos < range.max;
+        if (!wasBetweenRange || isBetweenRange) return;
+        var direction = newPos <= range.min ? DIRECTION.PREV : DIRECTION.NEXT;
+        flicking.trigger(new ComponentEvent$1(EVENTS.REACH_EDGE, {
+          direction: direction
+        }));
       };
 
-      __proto._findNearestPanel = function (pos, panels) {
-        var prevDist = Infinity;
+      __proto._updateMode = function () {
+        var flicking = getFlickingAttached(this._flicking);
 
-        for (var panelIdx = 0; panelIdx < panels.length; panelIdx++) {
-          var panel = panels[panelIdx];
-          var dist = Math.abs(panel.position - pos);
+        if (flicking.circular) {
+          var circularMode = new CircularCameraMode(flicking);
+          var canSetCircularMode = circularMode.checkAvailability();
 
-          if (dist > prevDist) {
-            // Return previous anchor
-            return panels[panelIdx - 1];
+          if (canSetCircularMode) {
+            this._mode = circularMode;
+          } else {
+            var fallbackMode = flicking.circularFallback;
+            this._mode = fallbackMode === CIRCULAR_FALLBACK.BOUND ? new BoundCameraMode(flicking) : new LinearCameraMode(flicking);
           }
 
-          prevDist = dist;
-        } // Return last anchor
-
+          this._circularEnabled = canSetCircularMode;
+        } else {
+          this._mode = flicking.bound ? new BoundCameraMode(flicking) : new LinearCameraMode(flicking);
+        }
+      };
 
-        return panels[panels.length - 1];
+      __proto._togglePanels = function (prevPos, pos) {
+        if (pos === prevPos) return false;
+        var flicking = getFlickingAttached(this._flicking);
+        var panels = flicking.renderer.panels;
+        var toggled = panels.map(function (panel) {
+          return panel.toggle(prevPos, pos);
+        });
+        return toggled.some(function (isToggled) {
+          return isToggled;
+        });
       };
 
-      return BoundCamera;
-    }(Camera$1);
+      return Camera;
+    }();
 
     /*
      * Copyright (c) 2015 NAVER Corp.
@@ -11271,9 +11365,9 @@ version: 4.4.1
     var Camera = {
         __proto__: null,
         Camera: Camera$1,
-        LinearCamera: LinearCamera,
-        CircularCamera: CircularCamera,
-        BoundCamera: BoundCamera
+        LinearCameraMode: LinearCameraMode,
+        CircularCameraMode: CircularCameraMode,
+        BoundCameraMode: BoundCameraMode
     };
 
     /*
@@ -12480,7 +12574,7 @@ version: 4.4.1
               flicking: flicking
             });
           });
-          panels.splice.apply(panels, __spreadArray([insertingIdx, 0], __read$1(panelsInserted)));
+          panels.splice.apply(panels, __spread$1([insertingIdx, 0], panelsInserted));
 
           if (item.hasDOMInElements) {
             // Insert the actual elements as camera element's children
@@ -12503,7 +12597,7 @@ version: 4.4.1
             panel.increaseIndex(panelsInserted.length);
             panel.updatePosition();
           });
-          return __spreadArray(__spreadArray([], __read$1(addedPanels), false), __read$1(panelsInserted));
+          return __spread$1(addedPanels, panelsInserted);
         }, []);
         if (allPanelsInserted.length <= 0) return []; // Update camera & control
 
@@ -12582,7 +12676,7 @@ version: 4.4.1
             control.resetActive();
           }
 
-          return __spreadArray(__spreadArray([], __read$1(removed), false), __read$1(panelsRemoved));
+          return __spread$1(removed, panelsRemoved);
         }, []); // Update camera & control
 
         this._updateCameraAndControl();
@@ -13581,7 +13675,7 @@ version: 4.4.1
         var notToggled = renderedPanels.filter(function (panel) {
           return !panel.toggled;
         });
-        return __spreadArray(__spreadArray(__spreadArray([], __read$1(toggledPrev), false), __read$1(notToggled), false), __read$1(toggledNext)).map(function (panel) {
+        return __spread$1(toggledPrev, notToggled, toggledNext).map(function (panel) {
           return panel.index;
         });
       };
@@ -13791,7 +13885,7 @@ version: 4.4.1
       __proto.getRenderingIndexesByOrder = function (flicking) {
         var virtualManager = flicking.virtual;
 
-        var visiblePanels = __spreadArray([], __read$1(flicking.visiblePanels)).filter(function (panel) {
+        var visiblePanels = __spread$1(flicking.visiblePanels).filter(function (panel) {
           return panel.rendered;
         }).sort(function (panel1, panel2) {
           return panel1.position + panel1.offset - (panel2.position + panel2.offset);
@@ -13812,7 +13906,7 @@ version: 4.4.1
         }).map(function (el) {
           return el.idx;
         });
-        return __spreadArray(__spreadArray([], __read$1(visibleIndexes), false), __read$1(invisibleIndexes));
+        return __spread$1(visibleIndexes, invisibleIndexes);
       };
 
       __proto.getRenderingElementsByOrder = function (flicking) {
@@ -13935,58 +14029,60 @@ version: 4.4.1
             horizontal = _e === void 0 ? true : _e,
             _f = _b.circular,
             circular = _f === void 0 ? false : _f,
-            _g = _b.bound,
-            bound = _g === void 0 ? false : _g,
-            _h = _b.adaptive,
-            adaptive = _h === void 0 ? false : _h,
-            _j = _b.panelsPerView,
-            panelsPerView = _j === void 0 ? -1 : _j,
-            _k = _b.noPanelStyleOverride,
-            noPanelStyleOverride = _k === void 0 ? false : _k,
-            _l = _b.resizeOnContentsReady,
-            resizeOnContentsReady = _l === void 0 ? false : _l,
-            _m = _b.needPanelThreshold,
-            needPanelThreshold = _m === void 0 ? 0 : _m,
-            _o = _b.preventEventsBeforeInit,
-            preventEventsBeforeInit = _o === void 0 ? true : _o,
-            _p = _b.deceleration,
-            deceleration = _p === void 0 ? 0.0075 : _p,
-            _q = _b.duration,
-            duration = _q === void 0 ? 500 : _q,
-            _r = _b.easing,
-            easing = _r === void 0 ? function (x) {
+            _g = _b.circularFallback,
+            circularFallback = _g === void 0 ? CIRCULAR_FALLBACK.LINEAR : _g,
+            _h = _b.bound,
+            bound = _h === void 0 ? false : _h,
+            _j = _b.adaptive,
+            adaptive = _j === void 0 ? false : _j,
+            _k = _b.panelsPerView,
+            panelsPerView = _k === void 0 ? -1 : _k,
+            _l = _b.noPanelStyleOverride,
+            noPanelStyleOverride = _l === void 0 ? false : _l,
+            _m = _b.resizeOnContentsReady,
+            resizeOnContentsReady = _m === void 0 ? false : _m,
+            _o = _b.needPanelThreshold,
+            needPanelThreshold = _o === void 0 ? 0 : _o,
+            _p = _b.preventEventsBeforeInit,
+            preventEventsBeforeInit = _p === void 0 ? true : _p,
+            _q = _b.deceleration,
+            deceleration = _q === void 0 ? 0.0075 : _q,
+            _r = _b.duration,
+            duration = _r === void 0 ? 500 : _r,
+            _s = _b.easing,
+            easing = _s === void 0 ? function (x) {
           return 1 - Math.pow(1 - x, 3);
-        } : _r,
-            _s = _b.inputType,
-            inputType = _s === void 0 ? ["mouse", "touch"] : _s,
-            _t = _b.moveType,
-            moveType = _t === void 0 ? "snap" : _t,
-            _u = _b.threshold,
-            threshold = _u === void 0 ? 40 : _u,
-            _v = _b.interruptable,
-            interruptable = _v === void 0 ? true : _v,
-            _w = _b.bounce,
-            bounce = _w === void 0 ? "20%" : _w,
-            _x = _b.iOSEdgeSwipeThreshold,
-            iOSEdgeSwipeThreshold = _x === void 0 ? 30 : _x,
-            _y = _b.preventClickOnDrag,
-            preventClickOnDrag = _y === void 0 ? true : _y,
-            _z = _b.disableOnInit,
-            disableOnInit = _z === void 0 ? false : _z,
-            _0 = _b.renderOnlyVisible,
-            renderOnlyVisible = _0 === void 0 ? false : _0,
-            _1 = _b.virtual,
-            virtual = _1 === void 0 ? null : _1,
-            _2 = _b.autoInit,
-            autoInit = _2 === void 0 ? true : _2,
-            _3 = _b.autoResize,
-            autoResize = _3 === void 0 ? true : _3,
-            _4 = _b.useResizeObserver,
-            useResizeObserver = _4 === void 0 ? true : _4,
-            _5 = _b.externalRenderer,
-            externalRenderer = _5 === void 0 ? null : _5,
-            _6 = _b.renderExternal,
-            renderExternal = _6 === void 0 ? null : _6;
+        } : _s,
+            _t = _b.inputType,
+            inputType = _t === void 0 ? ["mouse", "touch"] : _t,
+            _u = _b.moveType,
+            moveType = _u === void 0 ? "snap" : _u,
+            _v = _b.threshold,
+            threshold = _v === void 0 ? 40 : _v,
+            _w = _b.interruptable,
+            interruptable = _w === void 0 ? true : _w,
+            _x = _b.bounce,
+            bounce = _x === void 0 ? "20%" : _x,
+            _y = _b.iOSEdgeSwipeThreshold,
+            iOSEdgeSwipeThreshold = _y === void 0 ? 30 : _y,
+            _z = _b.preventClickOnDrag,
+            preventClickOnDrag = _z === void 0 ? true : _z,
+            _0 = _b.disableOnInit,
+            disableOnInit = _0 === void 0 ? false : _0,
+            _1 = _b.renderOnlyVisible,
+            renderOnlyVisible = _1 === void 0 ? false : _1,
+            _2 = _b.virtual,
+            virtual = _2 === void 0 ? null : _2,
+            _3 = _b.autoInit,
+            autoInit = _3 === void 0 ? true : _3,
+            _4 = _b.autoResize,
+            autoResize = _4 === void 0 ? true : _4,
+            _5 = _b.useResizeObserver,
+            useResizeObserver = _5 === void 0 ? true : _5,
+            _6 = _b.externalRenderer,
+            externalRenderer = _6 === void 0 ? null : _6,
+            _7 = _b.renderExternal,
+            renderExternal = _7 === void 0 ? null : _7;
 
         var _this = _super.call(this) || this; // Internal states
 
@@ -13998,6 +14094,7 @@ version: 4.4.1
         _this._defaultIndex = defaultIndex;
         _this._horizontal = horizontal;
         _this._circular = circular;
+        _this._circularFallback = circularFallback;
         _this._bound = bound;
         _this._adaptive = adaptive;
         _this._panelsPerView = panelsPerView;
@@ -14136,7 +14233,7 @@ version: 4.4.1
          * @readonly
          */
         get: function () {
-          return this._camera.controlParams.circular;
+          return this._camera.circularEnabled;
         },
         enumerable: false,
         configurable: true
@@ -14370,6 +14467,24 @@ version: 4.4.1
         enumerable: false,
         configurable: true
       });
+      Object.defineProperty(__proto, "circularFallback", {
+        /**
+         * Set panel control mode for the case when circular cannot be enabled.
+         * "linear" will set the view's range from the top of the first panel to the top of the last panel.
+         * "bound" will prevent the view from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel.
+         * @ko 순환 모드 사용 불가능시 사용할 패널 조작 범위 설정 방식을 변경합니다.
+         * "linear" 사용시 시점이 첫번째 엘리먼트 위에서부터 마지막 엘리먼트 위까지 움직일 수 있도록 설정합니다.
+         * "bound" 사용시 시점이 첫번째 엘리먼트와 마지막 엘리먼트의 끝과 끝 사이에서 움직일 수 있도록 설정합니다.
+         * @see CIRCULAR_FALLBACK
+         * @type {string}
+         * @default "linear"
+         */
+        get: function () {
+          return this._circularFallback;
+        },
+        enumerable: false,
+        configurable: true
+      });
       Object.defineProperty(__proto, "bound", {
         /**
          * Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
@@ -15330,7 +15445,7 @@ version: 4.4.1
           });
         }
 
-        (_a = this._plugins).push.apply(_a, __spreadArray([], __read$1(plugins)));
+        (_a = this._plugins).push.apply(_a, __spread$1(plugins));
 
         return this;
       };
@@ -15577,22 +15692,14 @@ version: 4.4.1
       };
 
       __proto._createCamera = function () {
-        var cameraOption = {
-          align: this._align
-        };
-
-        if (this._circular) {
-          if (this._bound) {
-            // eslint-disable-next-line no-console
-            console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
-          }
-
-          return new CircularCamera(cameraOption);
-        } else if (this._bound) {
-          return new BoundCamera(cameraOption);
-        } else {
-          return new LinearCamera(cameraOption);
+        if (this._circular && this._bound) {
+          // eslint-disable-next-line no-console
+          console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
         }
+
+        return new Camera$1({
+          align: this._align
+        });
       };
 
       __proto._createRenderer = function () {
@@ -15656,7 +15763,7 @@ version: 4.4.1
        */
 
 
-      Flicking.VERSION = "4.4.1";
+      Flicking.VERSION = "4.5.1";
       return Flicking;
     }(Component$1);
 
@@ -15712,7 +15819,7 @@ version: 4.4.1
                   args[_i] = arguments[_i];
                 }
 
-                return (_a = descriptor.value).call.apply(_a, __spreadArray([this[flickingName]], __read$1(args)));
+                return (_a = descriptor.value).call.apply(_a, __spread$1([this[flickingName]], args));
               }
             });
           } else {
@@ -15722,7 +15829,8 @@ version: 4.4.1
               getterDescriptor.get = function () {
                 var _a;
 
-                return (_a = descriptor.get) === null || _a === void 0 ? void 0 : _a.call(this[flickingName]);
+                var flicking = this[flickingName];
+                return flicking && ((_a = descriptor.get) === null || _a === void 0 ? void 0 : _a.call(flicking));
               };
             }
 
@@ -15736,7 +15844,7 @@ version: 4.4.1
                   args[_i] = arguments[_i];
                 }
 
-                return (_a = descriptor.set) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([this[flickingName]], __read$1(args)));
+                return (_a = descriptor.set) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spread$1([this[flickingName]], args));
               };
             }
 
@@ -15750,6 +15858,8 @@ version: 4.4.1
       var renderer = flicking.renderer;
       var panels = renderer.panels;
 
+      var prevList = __spread$1(diffResult.prevList);
+
       if (diffResult.removed.length > 0) {
         var endIdx_1 = -1;
         var prevIdx_1 = -1;
@@ -15765,6 +15875,8 @@ version: 4.4.1
           } else {
             prevIdx_1 = removedIdx;
           }
+
+          prevList.splice(removedIdx, 1);
         });
         batchRemove(renderer, prevIdx_1, endIdx_1 + 1);
       }
@@ -15804,13 +15916,14 @@ version: 4.4.1
       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 {
@@ -15819,19 +15932,19 @@ version: 4.4.1
         });
 
         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) {
-      renderer.batchInsert.apply(renderer, __spreadArray([], __read$1(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
+    var batchInsert = function (renderer, diffResult, addedElements, startIdx, endIdx) {
+      renderer.batchInsert.apply(renderer, __spread$1(diffResult.added.slice(startIdx, endIdx).map(function (index, elIdx) {
         return {
           index: index,
-          elements: [rendered[elIdx + diffResult.prevList.length]],
+          elements: [addedElements[elIdx]],
           hasDOMInElements: false
         };
-      }))));
+      })));
     };
 
     var batchRemove = function (renderer, startIdx, endIdx) {
@@ -15856,16 +15969,16 @@ version: 4.4.1
         map[prev] = current;
         return map;
       }, {});
-      return __spreadArray(__spreadArray([], __read$1(flicking.panels.filter(function (panel) {
+      return __spread$1(flicking.panels.filter(function (panel) {
         return !removedPanels[panel.index];
       }) // Sort panels by position
       .sort(function (panel1, panel2) {
         return panel1.position + panel1.offset - (panel2.position + panel2.offset);
       }).map(function (panel) {
         return diffResult.list[maintainedMap[panel.index]];
-      })), false), __read$1(diffResult.added.map(function (idx) {
+      }), diffResult.added.map(function (idx) {
         return diffResult.list[idx];
-      })));
+      }));
     });
 
     var getDefaultCameraTransform = (function (align, horizontal, firstPanelSize) {