@egjs/flicking 4.13.2-beta.0 → 4.14.0

package/src/Flicking.ts

@@ -10,13 +10,52 @@ import AutoResizer from "./core/AutoResizer";
 import { Panel } from "./core/panel";
 import { VanillaElementProvider } from "./core/panel/provider";
 import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
-import { Control, SnapControl, SnapControlOptions, FreeControl, StrictControl, FreeControlOptions, StrictControlOptions } from "./control";
+import {
+  Control,
+  SnapControl,
+  SnapControlOptions,
+  FreeControl,
+  StrictControl,
+  FreeControlOptions,
+  StrictControlOptions
+} from "./control";
 import { Camera } from "./camera";
-import { Renderer, VanillaRenderer, ExternalRenderer, RendererOptions, NormalRenderingStrategy, VirtualRenderingStrategy } from "./renderer";
-import { EVENTS, ALIGN, MOVE_TYPE, DIRECTION, CIRCULAR_FALLBACK } from "./const/external";
+import {
+  Renderer,
+  VanillaRenderer,
+  ExternalRenderer,
+  RendererOptions,
+  NormalRenderingStrategy,
+  VirtualRenderingStrategy
+} from "./renderer";
+import {
+  EVENTS,
+  ALIGN,
+  MOVE_TYPE,
+  DIRECTION,
+  CIRCULAR_FALLBACK
+} from "./const/external";
 import * as ERROR from "./const/error";
 import { findIndex, getElement, includes, parseElement } from "./utils";
-import { HoldStartEvent, HoldEndEvent, MoveStartEvent, SelectEvent, MoveEvent, MoveEndEvent, WillChangeEvent, WillRestoreEvent, NeedPanelEvent, VisibleChangeEvent, ReachEdgeEvent, ReadyEvent, AfterResizeEvent, BeforeResizeEvent, ChangedEvent, RestoredEvent, PanelChangeEvent } from "./type/event";
+import {
+  HoldStartEvent,
+  HoldEndEvent,
+  MoveStartEvent,
+  SelectEvent,
+  MoveEvent,
+  MoveEndEvent,
+  WillChangeEvent,
+  WillRestoreEvent,
+  NeedPanelEvent,
+  VisibleChangeEvent,
+  ReachEdgeEvent,
+  ReadyEvent,
+  AfterResizeEvent,
+  BeforeResizeEvent,
+  ChangedEvent,
+  RestoredEvent,
+  PanelChangeEvent
+} from "./type/event";
 import { LiteralUnion, ValueOf } from "./type/internal";
 import { ElementLike, Plugin, Status, MoveTypeOptions } from "./type/external";
 
@@ -48,7 +87,10 @@ export interface FlickingEvents {
  */
 export interface FlickingOptions {
   // UI / LAYOUT
-  align: LiteralUnion<ValueOf<typeof ALIGN>> | number | { panel: number | string; camera: number | string };
+  align:
+  | LiteralUnion<ValueOf<typeof ALIGN>>
+  | number
+  | { panel: number | string; camera: number | string };
   defaultIndex: number;
   horizontal: boolean;
   circular: boolean;
@@ -71,7 +113,9 @@ export interface FlickingOptions {
 
   // INPUT
   inputType: string[];
-  moveType: ValueOf<typeof MOVE_TYPE> | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
+  moveType:
+  | ValueOf<typeof MOVE_TYPE>
+  | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
   threshold: number;
   dragThreshold: number;
   interruptable: boolean;
@@ -91,9 +135,11 @@ export interface FlickingOptions {
   autoResize: boolean;
   useResizeObserver: boolean;
   resizeDebounce: number;
+  observePanelResize: boolean;
   maxResizeDebounce: number;
   useFractionalSize: boolean;
   externalRenderer: ExternalRenderer | null;
+  optimizeSizeUpdate: boolean;
 
   // @deprecated
   renderExternal: {
@@ -168,14 +214,17 @@ class Flicking extends Component<FlickingEvents> {
   private _autoResize: FlickingOptions["autoResize"];
   private _useResizeObserver: FlickingOptions["useResizeObserver"];
   private _resizeDebounce: FlickingOptions["resizeDebounce"];
+  private _observePanelResize: FlickingOptions["observePanelResize"];
   private _maxResizeDebounce: FlickingOptions["maxResizeDebounce"];
   private _useFractionalSize: FlickingOptions["useFractionalSize"];
   private _externalRenderer: FlickingOptions["externalRenderer"];
   private _renderExternal: FlickingOptions["renderExternal"];
+  private _optimizeSizeUpdate: FlickingOptions["optimizeSizeUpdate"];
 
   // Internal State
   private _initialized: boolean;
   private _plugins: Plugin[];
+  private _isResizing: boolean;
 
   // Components
   /**
@@ -188,7 +237,10 @@ class Flicking extends Component<FlickingEvents> {
    * @see SnapControl
    * @see FreeControl
    */
-  public get control() { return this._control; }
+  public get control() {
+    return this._control;
+  }
+
   /**
    * {@link Camera} instance of the Flicking
    * @ko 현재 Flicking에 활성화된 {@link Camera} 인스턴스
@@ -200,7 +252,10 @@ class Flicking extends Component<FlickingEvents> {
    * @see BoundCamera
    * @see CircularCamera
    */
-  public get camera() { return this._camera; }
+  public get camera() {
+    return this._camera;
+  }
+
   /**
    * {@link Renderer} instance of the Flicking
    * @ko 현재 Flicking에 활성화된 {@link Renderer} 인스턴스
@@ -211,7 +266,10 @@ class Flicking extends Component<FlickingEvents> {
    * @see VanillaRenderer
    * @see ExternalRenderer
    */
-  public get renderer() { return this._renderer; }
+  public get renderer() {
+    return this._renderer;
+  }
+
   /**
    * A component that manages viewport size
    * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
@@ -220,6 +278,13 @@ class Flicking extends Component<FlickingEvents> {
    * @see Viewport
    */
   public get viewport() { return this._viewport; }
+  /**
+   * {@link AutoResizer} instance of the Flicking
+   * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+   * @internal
+   * @readonly
+   */
+  public get autoResizer() { return this._autoResizer; }
   // Internal States
   /**
    * Whether Flicking's {@link Flicking#init init()} is called.
@@ -230,7 +295,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @readonly
    */
-  public get initialized() { return this._initialized; }
+  public get initialized() {
+    return this._initialized;
+  }
+
   /**
    * 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.
@@ -240,7 +308,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @readonly
    */
-  public get circularEnabled() { return this._camera.circularEnabled; }
+  public get circularEnabled() {
+    return this._camera.circularEnabled;
+  }
+
   /**
    * Whether the `virtual` option is enabled.
    * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
@@ -250,7 +321,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @readonly
    */
-  public get virtualEnabled() { return this._panelsPerView > 0 && this._virtual != null; }
+  public get virtualEnabled() {
+    return this._panelsPerView > 0 && this._virtual != null;
+  }
+
   /**
    * Index number of the {@link Flicking#currentPanel currentPanel}
    * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
@@ -258,14 +332,20 @@ class Flicking extends Component<FlickingEvents> {
    * @default 0
    * @readonly
    */
-  public get index() { return this._control.activeIndex; }
+  public get index() {
+    return this._control.activeIndex;
+  }
+
   /**
    * The root(`.flicking-viewport`) element
    * @ko root(`.flicking-viewport`) 엘리먼트
    * @type {HTMLElement}
    * @readonly
    */
-  public get element() { return this._viewport.element; }
+  public get element() {
+    return this._viewport.element;
+  }
+
   /**
    * Currently active panel
    * @ko 현재 선택된 패널
@@ -273,7 +353,10 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    * @see Panel
    */
-  public get currentPanel() { return this._control.activePanel; }
+  public get currentPanel() {
+    return this._control.activePanel;
+  }
+
   /**
    * Array of panels
    * @ko 전체 패널들의 배열
@@ -281,14 +364,20 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    * @see Panel
    */
-  public get panels() { return this._renderer.panels; }
+  public get panels() {
+    return this._renderer.panels;
+  }
+
   /**
    * Count of panels
    * @ko 전체 패널의 개수
    * @type {number}
    * @readonly
    */
-  public get panelCount() { return this._renderer.panelCount; }
+  public get panelCount() {
+    return this._renderer.panelCount;
+  }
+
   /**
    * Array of panels that is visible at the current position
    * @ko 현재 보이는 패널의 배열
@@ -296,28 +385,39 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    * @see Panel
    */
-  public get visiblePanels() { return this._camera.visiblePanels; }
+  public get visiblePanels() {
+    return this._camera.visiblePanels;
+  }
+
   /**
    * Whether Flicking's animating
    * @ko 현재 애니메이션 동작 여부
    * @type {boolean}
    * @readonly
    */
-  public get animating() { return this._control.animating; }
+  public get animating() {
+    return this._control.animating;
+  }
+
   /**
    * Whether user is clicking or touching
    * @ko 현재 사용자가 클릭/터치중인지 여부
    * @type {boolean}
    * @readonly
    */
-  public get holding() { return this._control.holding; }
+  public get holding() {
+    return this._control.holding;
+  }
+
   /**
    * A current list of activated plugins
    * @ko 현재 활성화된 플러그인 목록
    * @type {Plugin[]}
    * @readonly
    */
-  public get activePlugins() { return this._plugins; }
+  public get activePlugins() {
+    return this._plugins;
+  }
 
   // Options Getter
   // UI / LAYOUT
@@ -349,7 +449,10 @@ class Flicking extends Component<FlickingEvents> {
    * });
    * ```
    */
-  public get align() { return this._align; }
+  public get align() {
+    return this._align;
+  }
+
   /**
    * Index of the panel to move when Flicking's {@link Flicking#init init()} is called. A zero-based integer
    * @ko Flicking의 {@link Flicking#init init()}이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다.
@@ -357,7 +460,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 0
    * @see {@link https://naver.github.io/egjs-flicking/Options#defaultindex defaultIndex ( Options )}
    */
-  public get defaultIndex() { return this._defaultIndex; }
+  public get defaultIndex() {
+    return this._defaultIndex;
+  }
+
   /**
    * Direction of panel movement (true: horizontal, false: vertical)
    * @ko 패널 이동 방향 (true: 가로방향, false: 세로방향)
@@ -365,7 +471,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default true
    * @see {@link https://naver.github.io/egjs-flicking/Options#horizontal horizontal ( Options )}
    */
-  public get horizontal() { return this._horizontal; }
+  public get horizontal() {
+    return this._horizontal;
+  }
+
   /**
    * Enables circular(continuous loop) mode, which connects first/last panel for continuous scrolling.
    * @ko 순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다.
@@ -373,7 +482,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#circular circular ( Options )}
    */
-  public get circular() { return this._circular; }
+  public get circular() {
+    return this._circular;
+  }
+
   /**
    * 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.
@@ -386,7 +498,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default "linear"
    * @see {@link https://naver.github.io/egjs-flicking/Options#circularfallback circularFallback ( Options )}
    */
-  public get circularFallback() { return this._circularFallback; }
+  public get circularFallback() {
+    return this._circularFallback;
+  }
+
   /**
    * 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
    * Only can be enabled when `circular=false`
@@ -396,7 +511,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#bound bound ( Options )}
    */
-  public get bound() { return this._bound; }
+  public get bound() {
+    return this._bound;
+  }
+
   /**
    * Update height of the viewport element after movement same to the height of the panel below. This can be only enabled when `horizontal=true`
    * @ko 이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. `horizontal=true`인 경우에만 사용할 수 있습니다.
@@ -404,7 +522,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#adaptive adaptive ( Options )}
    */
-  public get adaptive() { return this._adaptive; }
+  public get adaptive() {
+    return this._adaptive;
+  }
+
   /**
    * A visible number of panels on viewport. Enabling this option will automatically resize panel size
    * @ko 한 화면에 보이는 패널의 개수. 이 옵션을 활성화할 경우 패널의 크기를 강제로 재조정합니다
@@ -412,7 +533,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default -1
    * @see {@link https://naver.github.io/egjs-flicking/Options#panelsperview panelsPerView ( Options )}
    */
-  public get panelsPerView() { return this._panelsPerView; }
+  public get panelsPerView() {
+    return this._panelsPerView;
+  }
+
   /**
    * Enabling this option will not change `width/height` style of the panels if {@link Flicking#panelsPerView} is enabled.
    * This behavior can be useful in terms of performance when you're manually managing all panel sizes
@@ -421,7 +545,10 @@ class Flicking extends Component<FlickingEvents> {
    * @type {boolean}
    * @default false
    */
-  public get noPanelStyleOverride() { return this._noPanelStyleOverride; }
+  public get noPanelStyleOverride() {
+    return this._noPanelStyleOverride;
+  }
+
   /**
    * Enabling this option will automatically call {@link Flicking#resize} when all image/video inside panels are loaded.
    * This can be useful when you have contents inside Flicking that changes its size when it's loaded
@@ -431,7 +558,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#resizeOnContentsReady resizeOnContentsReady ( Options )}
    */
-  public get resizeOnContentsReady() { return this._resizeOnContentsReady; }
+  public get resizeOnContentsReady() {
+    return this._resizeOnContentsReady;
+  }
+
   /**
    * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
    * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
@@ -441,7 +571,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#nested nested ( Options )}
    */
-  public get nested() { return this._nested; }
+  public get nested() {
+    return this._nested;
+  }
+
   // EVENTS
   /**
    * A Threshold from viewport edge before triggering `needPanel` event
@@ -450,7 +583,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 0
    * @see {@link https://naver.github.io/egjs-flicking/Options#needpanelthreshold needPanelThreshold ( Options )}
    */
-  public get needPanelThreshold() { return this._needPanelThreshold; }
+  public get needPanelThreshold() {
+    return this._needPanelThreshold;
+  }
+
   /**
    * When enabled, events are not triggered before `ready` when initializing
    * @ko 활성화할 경우 초기화시 `ready` 이벤트 이전의 이벤트가 발생하지 않습니다.
@@ -458,7 +594,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default true
    * @see {@link https://naver.github.io/egjs-flicking/Options#preventeventsbeforeinit preventEventsBeforeInit ( Options )}
    */
-  public get preventEventsBeforeInit() { return this._preventEventsBeforeInit; }
+  public get preventEventsBeforeInit() {
+    return this._preventEventsBeforeInit;
+  }
+
   // ANIMATION
   /**
    * Deceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time
@@ -467,7 +606,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 0.0075
    * @see {@link https://naver.github.io/egjs-flicking/Options#deceleration deceleration ( Options )}
    */
-  public get deceleration() { return this._deceleration; }
+  public get deceleration() {
+    return this._deceleration;
+  }
+
   /**
    * An easing function applied to the panel movement animation. Default value is `easeOutCubic`
    * @ko 패널 이동 애니메이션에 적용할 easing 함수. 기본값은 `easeOutCubic`이다
@@ -476,7 +618,10 @@ class Flicking extends Component<FlickingEvents> {
    * @see Easing Functions Cheat Sheet {@link http://easings.net/} <ko>이징 함수 Cheat Sheet {@link http://easings.net/}</ko>
    * @see {@link https://naver.github.io/egjs-flicking/Options#easing Easing ( Options )}
    */
-  public get easing() { return this._easing; }
+  public get easing() {
+    return this._easing;
+  }
+
   /**
    * Default duration of the animation (ms)
    * @ko 디폴트 애니메이션 재생 시간 (ms)
@@ -484,7 +629,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 500
    * @see {@link https://naver.github.io/egjs-flicking/Options#duration duration ( Options )}
    */
-  public get duration() { return this._duration; }
+  public get duration() {
+    return this._duration;
+  }
+
   // INPUT
   /**
    * Types of input devices to enable
@@ -495,7 +643,10 @@ class Flicking extends Component<FlickingEvents> {
    * <ko>{@link https://naver.github.io/egjs-axes/Options#paninput-options 가능한 값들 (PanInputOption#inputType)}</ko>
    * @see {@link https://naver.github.io/egjs-flicking/Options#inputtype inputType ( Options )}
    */
-  public get inputType() { return this._inputType; }
+  public get inputType() {
+    return this._inputType;
+  }
+
   /**
    * Movement style by user input. This will change instance type of {@link Flicking#control}
    * You can use the values of the constant {@link MOVE_TYPE}
@@ -527,7 +678,10 @@ class Flicking extends Component<FlickingEvents> {
    * });
    * ```
    */
-  public get moveType() { return this._moveType; }
+  public get moveType() {
+    return this._moveType;
+  }
+
   /**
    * Movement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel.
    * @ko 패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능합니다.
@@ -535,7 +689,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 40
    * @see {@link https://naver.github.io/egjs-flicking/Options#threshold Threshold ( Options )}
    */
-  public get threshold() { return this._threshold; }
+  public get threshold() {
+    return this._threshold;
+  }
+
   /**
    * Minimal distance of user input before recognizing (unit: px). It should be dragged above the dragThreshold to move the panel.
    * @ko 사용자의 입력을 인식하기 위한 최소한의 거리 (단위: px). 주어진 값 이상으로 스크롤해야만 패널이 움직입니다.
@@ -543,7 +700,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 1
    * @see {@link https://naver.github.io/egjs-flicking/Options#dragThreshold dragThreshold ( Options )}
    */
-  public get dragThreshold() { return this._dragThreshold; }
+  public get dragThreshold() {
+    return this._dragThreshold;
+  }
+
   /**
    * Set animation to be interruptable by click/touch.
    * @ko 사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다.
@@ -551,7 +711,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default true
    * @see {@link https://naver.github.io/egjs-flicking/Options#interruptable Interruptable ( Options )}
    */
-  public get interruptable() { return this._interruptable; }
+  public get interruptable() {
+    return this._interruptable;
+  }
+
   /**
    * The size value of the bounce area. Only can be enabled when `circular=false`.
    * You can set different bounce value for prev/next direction by using array.
@@ -584,7 +747,10 @@ class Flicking extends Component<FlickingEvents> {
    * flicking.control.updateInput(); // Call this to update!
    * ```
    */
-  public get bounce() { return this._bounce; }
+  public get bounce() {
+    return this._bounce;
+  }
+
   /**
    * Size of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward
    * @ko iOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px)
@@ -592,7 +758,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 30
    * @see {@link https://naver.github.io/egjs-flicking/Options#iosedgeswipethreshold iOSEdgeSwipeThreshold ( Options )}
    */
-  public get iOSEdgeSwipeThreshold() { return this._iOSEdgeSwipeThreshold; }
+  public get iOSEdgeSwipeThreshold() {
+    return this._iOSEdgeSwipeThreshold;
+  }
+
   /**
    * Automatically prevent `click` event if the user has dragged at least a single pixel on the viewport element
    * @ko 사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트를 취소합니다
@@ -600,7 +769,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default true
    * @see {@link https://naver.github.io/egjs-flicking/Options#preventclickondrag preventClickOnDrag ( Options )}
    */
-  public get preventClickOnDrag() { return this._preventClickOnDrag; }
+  public get preventClickOnDrag() {
+    return this._preventClickOnDrag;
+  }
+
   /**
    * Whether to use the {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} when the user starts dragging
    * @ko 사용자가 드래그를 시작할 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} 실행 여부
@@ -608,7 +780,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#preventDefaultOnDrag preventDefaultOnDrag ( Options )}
    */
-  public get preventDefaultOnDrag() { return this._preventDefaultOnDrag; }
+  public get preventDefaultOnDrag() {
+    return this._preventDefaultOnDrag;
+  }
+
   /**
    * Automatically call {@link Flicking#disableInput disableInput()} on initialization
    * @ko Flicking init시에 {@link Flicking#disableInput disableInput()}을 바로 호출합니다
@@ -616,7 +791,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#disableoninit disableOnInit ( Options )}
    */
-  public get disableOnInit() { return this._disableOnInit; }
+  public get disableOnInit() {
+    return this._disableOnInit;
+  }
+
   /**
    * Change active panel index on mouse/touch hold while animating.
    * `index` of the `willChange`/`willRestore` event will be used as new index.
@@ -626,7 +804,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
    */
-  public get changeOnHold() { return this._changeOnHold; }
+  public get changeOnHold() {
+    return this._changeOnHold;
+  }
+
   // PERFORMANCE
   /**
    * Whether to render visible panels only. This can dramatically increase performance when there're many panels
@@ -635,7 +816,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#renderonlyvisible renderOnlyVisible ( Options )}
    */
-  public get renderOnlyVisible() { return this._renderOnlyVisible; }
+  public get renderOnlyVisible() {
+    return this._renderOnlyVisible;
+  }
+
   /**
    * By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
    * Must be used with `panelsPerview`.
@@ -668,7 +852,9 @@ class Flicking extends Component<FlickingEvents> {
    * flicking.virtual.remove(0, 100);
    * ```
    */
-  public get virtual() { return this._virtualManager; }
+  public get virtual() {
+    return this._virtualManager;
+  }
 
   // OTHERS
   /**
@@ -679,14 +865,20 @@ class Flicking extends Component<FlickingEvents> {
    * @see {@link https://naver.github.io/egjs-flicking/Options#autoinit autoInit ( Options )}
    * @readonly
    */
-  public get autoInit() { return this._autoInit; }
+  public get autoInit() {
+    return this._autoInit;
+  }
+
   /**
    * Whether to automatically call {@link Flicking#resize resize()} when the viewport element(.flicking-viewport)'s size is changed
    * @ko 뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 {@link Flicking#resize resize()} 메소드를 자동으로 호출할지 여부를 설정합니다
    * @type {boolean}
    * @default true
    */
-  public get autoResize() { return this._autoResize; }
+  public get autoResize() {
+    return this._autoResize;
+  }
+
   /**
    * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option
    * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
@@ -695,6 +887,15 @@ class Flicking extends Component<FlickingEvents> {
    * @see {@link https://naver.github.io/egjs-flicking/Options#useresizeobserver useResizeObserver ( Options )}
    */
   public get useResizeObserver() { return this._useResizeObserver; }
+  /**
+   * Whether to use {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver} to observe the size of the panel element
+   * This is only available when `useResizeObserver` is enabled.
+   * This option garantees that the resize event is triggered when the size of the panel element is changed.
+   * @ko 이 옵션을 활성화할 경우, {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}를 사용하여 패널 엘리먼트의 크기를 추적합니다.
+   * 이 옵션은 `useResizeObserver` 옵션이 활성화된 경우에만 사용할 수 있습니다.
+   * 이 옵션은 패널 엘리먼트의 크기가 변경될 경우 resize 이벤트가 발생하도록 보장합니다.
+   */
+  public get observePanelResize() { return this._observePanelResize; }
   /**
    * Delays size recalculation from `autoResize` by the given time in milisecond.
    * If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
@@ -706,7 +907,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 0
    * @see {@link https://naver.github.io/egjs-flicking/Options#resizedebounce resizeDebounce ( Options )}
    */
-  public get resizeDebounce() { return this._resizeDebounce; }
+  public get resizeDebounce() {
+    return this._resizeDebounce;
+  }
+
   /**
    * The maximum time for size recalculation delay when using `resizeDebounce`, in milisecond.
    * This guarantees that size recalculation is performed at least once every (n)ms.
@@ -716,7 +920,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default 100
    * @see {@link https://naver.github.io/egjs-flicking/Options#maxresizedebounce maxResizeDebounce ( Options )}
    */
-  public get maxResizeDebounce() { return this._maxResizeDebounce; }
+  public get maxResizeDebounce() {
+    return this._maxResizeDebounce;
+  }
+
   /**
    * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
    * This can prevent 1px offset issue in some cases where panel size has the fractional part.
@@ -728,7 +935,10 @@ class Flicking extends Component<FlickingEvents> {
    * @default false
    * @see {@link https://naver.github.io/egjs-flicking/Options#usefractionalsize useFractionalSize ( Options )}
    */
-  public get useFractionalSize() { return this._useFractionalSize; }
+  public get useFractionalSize() {
+    return this._useFractionalSize;
+  }
+
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -736,7 +946,10 @@ class Flicking extends Component<FlickingEvents> {
    * @internal
    * @readonly
    */
-  public get externalRenderer() { return this._externalRenderer; }
+  public get externalRenderer() {
+    return this._externalRenderer;
+  }
+
   /**
    * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
    * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
@@ -745,7 +958,27 @@ class Flicking extends Component<FlickingEvents> {
    * @readonly
    * @deprecated
    */
-  public get renderExternal() { return this._renderExternal; }
+  public get renderExternal() {
+    return this._renderExternal;
+  }
+
+  /**
+   * This option works only when autoResize is set to true.
+   * By default, autoResize listens to changes in both the viewport's width and height, updating all panel sizes accordingly.
+   * When optimizeSizeUpdate is enabled, the update behavior is optimized based on the flicking direction:
+   * If direction is "horizontal", only changes in width will trigger panel size updates.
+   * If direction is "vertical", only changes in height will do so.
+   * This option is useful when panel heights vary and unwanted flickering occurs due to frequent size recalculations during flicking. Enabling optimizeSizeUpdate prevents unnecessary updates and helps maintain visual stability.
+   * @ko optimizeSizeUpdate는 autoResize가 true일 때만 동작합니다.
+   * 기본적으로 autoResize는 뷰포트의 width와 height 변화를 모두 감지하여 패널들의 사이즈를 업데이트합니다.
+   * 이 옵션을 활성화하면 플리킹 방향에 따라 필요한 차원(horizontal → width, vertical → height)에 대해서만 사이즈를 업데이트합니다.
+   * 내부 패널의 높이가 서로 다를 때, 플리킹 중 과도한 리사이징으로 인한 깜빡임 현상을 줄이는 데 유용합니다.
+   * @type {boolean}
+   * @default false
+   */
+  public get optimizeSizeUpdate() {
+    return this._optimizeSizeUpdate;
+  }
 
   // Options Setter
   // UI / LAYOUT
@@ -756,7 +989,10 @@ class Flicking extends Component<FlickingEvents> {
     void this.resize();
   }
 
-  public set defaultIndex(val: FlickingOptions["defaultIndex"]) { this._defaultIndex = val; }
+  public set defaultIndex(val: FlickingOptions["defaultIndex"]) {
+    this._defaultIndex = val;
+  }
+
   public set horizontal(val: FlickingOptions["horizontal"]) {
     this._horizontal = val;
     this._control.controller.updateDirection();
@@ -783,12 +1019,16 @@ class Flicking extends Component<FlickingEvents> {
     void this.resize();
   }
 
-  public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) {
+  public set noPanelStyleOverride(
+    val: FlickingOptions["noPanelStyleOverride"]
+  ) {
     this._noPanelStyleOverride = val;
     void this.resize();
   }
 
-  public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) {
+  public set resizeOnContentsReady(
+    val: FlickingOptions["resizeOnContentsReady"]
+  ) {
     this._resizeOnContentsReady = val;
     if (val) {
       this._renderer.checkPanelContentsReady(this._renderer.panels);
@@ -805,8 +1045,16 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   // EVENTS
-  public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) { this._needPanelThreshold = val; }
-  public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) { this._preventEventsBeforeInit = val; }
+  public set needPanelThreshold(val: FlickingOptions["needPanelThreshold"]) {
+    this._needPanelThreshold = val;
+  }
+
+  public set preventEventsBeforeInit(
+    val: FlickingOptions["preventEventsBeforeInit"]
+  ) {
+    this._preventEventsBeforeInit = val;
+  }
+
   // ANIMATION
   public set deceleration(val: FlickingOptions["deceleration"]) {
     this._deceleration = val;
@@ -826,7 +1074,10 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
-  public set duration(val: FlickingOptions["duration"]) { this._duration = val; }
+  public set duration(val: FlickingOptions["duration"]) {
+    this._duration = val;
+  }
+
   // INPUT
   public set inputType(val: FlickingOptions["inputType"]) {
     this._inputType = val;
@@ -854,7 +1105,9 @@ class Flicking extends Component<FlickingEvents> {
     this._control.updateInput();
   }
 
-  public set threshold(val: FlickingOptions["threshold"]) { this._threshold = val; }
+  public set threshold(val: FlickingOptions["threshold"]) {
+    this._threshold = val;
+  }
 
   public set dragThreshold(val: FlickingOptions["dragThreshold"]) {
     this._dragThreshold = val;
@@ -880,7 +1133,9 @@ class Flicking extends Component<FlickingEvents> {
     this._control.updateInput();
   }
 
-  public set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]) {
+  public set iOSEdgeSwipeThreshold(
+    val: FlickingOptions["iOSEdgeSwipeThreshold"]
+  ) {
     this._iOSEdgeSwipeThreshold = val;
     const panInput = this._control.controller.panInput;
 
@@ -905,7 +1160,9 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = val;
   }
 
-  public set preventDefaultOnDrag(val: FlickingOptions["preventDefaultOnDrag"]) {
+  public set preventDefaultOnDrag(
+    val: FlickingOptions["preventDefaultOnDrag"]
+  ) {
     this._preventDefaultOnDrag = val;
     const panInput = this._control.controller.panInput;
 
@@ -914,8 +1171,14 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
-  public set disableOnInit(val: FlickingOptions["disableOnInit"]) { this._disableOnInit = val; }
-  public set changeOnHold(val: FlickingOptions["changeOnHold"]) { this._changeOnHold = val; }
+  public set disableOnInit(val: FlickingOptions["disableOnInit"]) {
+    this._disableOnInit = val;
+  }
+
+  public set changeOnHold(val: FlickingOptions["changeOnHold"]) {
+    this._changeOnHold = val;
+  }
+
   // PERFORMANCE
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) {
     this._renderOnlyVisible = val;
@@ -926,6 +1189,10 @@ class Flicking extends Component<FlickingEvents> {
   public set autoResize(val: FlickingOptions["autoResize"]) {
     this._autoResize = val;
 
+    if (!this._initialized) {
+      return;
+    }
+
     if (val) {
       this._autoResizer.enable();
     } else {
@@ -936,11 +1203,27 @@ class Flicking extends Component<FlickingEvents> {
   public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
     this._useResizeObserver = val;
 
-    if (this._autoResize) {
+    if (this._initialized && this._autoResize) {
       this._autoResizer.enable();
     }
   }
 
+  public set observePanelResize(val: FlickingOptions["observePanelResize"]) {
+    this._observePanelResize = val;
+
+    if (this._initialized && this._autoResize) {
+      if (val) {
+        this._autoResizer.observePanels();
+      } else {
+        this._autoResizer.unobservePanels();
+      }
+    }
+  }
+
+  public set optimizeSizeUpdate(val: FlickingOptions["optimizeSizeUpdate"]) {
+    this._optimizeSizeUpdate = val;
+  }
+
   /**
    * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
    * <ko>Flicking을 초기화할 HTMLElement로, `string` 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.</ko>
@@ -1003,16 +1286,19 @@ class Flicking extends Component<FlickingEvents> {
     autoResize = true,
     useResizeObserver = true,
     resizeDebounce = 0,
+    observePanelResize = false,
     maxResizeDebounce = 100,
     useFractionalSize = false,
     externalRenderer = null,
-    renderExternal = null
+    renderExternal = null,
+    optimizeSizeUpdate = false
   }: Partial<FlickingOptions> = {}) {
     super();
 
     // Internal states
     this._initialized = false;
     this._plugins = [];
+    this._isResizing = false;
 
     // Bind options
     this._align = align;
@@ -1049,9 +1335,11 @@ class Flicking extends Component<FlickingEvents> {
     this._useResizeObserver = useResizeObserver;
     this._resizeDebounce = resizeDebounce;
     this._maxResizeDebounce = maxResizeDebounce;
+    this._observePanelResize = observePanelResize;
     this._useFractionalSize = useFractionalSize;
     this._externalRenderer = externalRenderer;
     this._renderExternal = renderExternal;
+    this._optimizeSizeUpdate = optimizeSizeUpdate;
 
     // Create core components
     this._viewport = new Viewport(this, getElement(root));
@@ -1111,7 +1399,7 @@ class Flicking extends Component<FlickingEvents> {
 
     return renderer.render().then(() => {
       // Done initializing & emit ready event
-      this._plugins.forEach(plugin => plugin.init(this));
+      this._plugins.forEach((plugin) => plugin.init(this));
 
       if (preventEventsBeforeInit) {
         this.trigger = originalTrigger;
@@ -1133,7 +1421,7 @@ class Flicking extends Component<FlickingEvents> {
     this._camera.destroy();
     this._renderer.destroy();
 
-    this._plugins.forEach(plugin => plugin.destroy());
+    this._plugins.forEach((plugin) => plugin.destroy());
 
     this._initialized = false;
   }
@@ -1172,7 +1460,11 @@ class Flicking extends Component<FlickingEvents> {
    * @return {Promise<void>} A Promise which will be resolved after reaching the previous panel<ko>이전 패널 도달시에 resolve되는 Promise</ko>
    */
   public prev(duration: number = this._duration): Promise<void> {
-    return this.moveTo(this._control.activePanel?.prev()?.index ?? -1, duration, DIRECTION.PREV);
+    return this.moveTo(
+      this._control.activePanel?.prev()?.index ?? -1,
+      duration,
+      DIRECTION.PREV
+    );
   }
 
   /**
@@ -1210,7 +1502,11 @@ class Flicking extends Component<FlickingEvents> {
    * @return {Promise<void>} A Promise which will be resolved after reaching the next panel<ko>다음 패널 도달시에 resolve되는 Promise</ko>
    */
   public next(duration: number = this._duration) {
-    return this.moveTo(this._control.activePanel?.next()?.index ?? this._renderer.panelCount, duration, DIRECTION.NEXT);
+    return this.moveTo(
+      this._control.activePanel?.next()?.index ?? this._renderer.panelCount,
+      duration,
+      DIRECTION.NEXT
+    );
   }
 
   /**
@@ -1249,18 +1545,32 @@ class Flicking extends Component<FlickingEvents> {
    * </ko>
    * @return {Promise<void>} A Promise which will be resolved after reaching the target panel<ko>해당 패널 도달시에 resolve되는 Promise</ko>
    */
-  public moveTo(index: number, duration: number = this._duration, direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE) {
+  public moveTo(
+    index: number,
+    duration: number = this._duration,
+    direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE
+  ) {
     const renderer = this._renderer;
     const panelCount = renderer.panelCount;
 
     const panel = renderer.getPanel(index);
 
     if (!panel) {
-      return Promise.reject(new FlickingError(ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1), ERROR.CODE.INDEX_OUT_OF_RANGE));
+      return Promise.reject(
+        new FlickingError(
+          ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1),
+          ERROR.CODE.INDEX_OUT_OF_RANGE
+        )
+      );
     }
 
     if (this._control.animating) {
-      return Promise.reject(new FlickingError(ERROR.MESSAGE.ANIMATION_ALREADY_PLAYING, ERROR.CODE.ANIMATION_ALREADY_PLAYING));
+      return Promise.reject(
+        new FlickingError(
+          ERROR.MESSAGE.ANIMATION_ALREADY_PLAYING,
+          ERROR.CODE.ANIMATION_ALREADY_PLAYING
+        )
+      );
     }
 
     if (this._control.holding) {
@@ -1284,7 +1594,11 @@ class Flicking extends Component<FlickingEvents> {
    * <ko>{@link ERROR_CODE INDEX_OUT_OF_RANGE} 해당 인덱스를 가진 패널이 존재하지 않을 경우</ko>
    * @return {void}
    */
-  public updateAnimation(index: number, duration?: number, direction?: ValueOf<typeof DIRECTION>): void {
+  public updateAnimation(
+    index: number,
+    duration?: number,
+    direction?: ValueOf<typeof DIRECTION>
+  ): void {
     if (!this._control.animating) {
       return;
     }
@@ -1295,7 +1609,10 @@ class Flicking extends Component<FlickingEvents> {
     const panel = renderer.getPanel(index);
 
     if (!panel) {
-      throw new FlickingError(ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1), ERROR.CODE.INDEX_OUT_OF_RANGE);
+      throw new FlickingError(
+        ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1),
+        ERROR.CODE.INDEX_OUT_OF_RANGE
+      );
     }
 
     this._control.updateAnimation(panel, duration, direction);
@@ -1377,7 +1694,7 @@ class Flicking extends Component<FlickingEvents> {
     const panels = visiblePanelsOnly ? this.visiblePanels : this.panels;
 
     const status: Status = {
-      panels: panels.map(panel => {
+      panels: panels.map((panel) => {
         const panelInfo: Status["panels"][0] = { index: panel.index };
 
         if (includePanelHTML) {
@@ -1400,7 +1717,6 @@ class Flicking extends Component<FlickingEvents> {
           progressInPanel: camera.getProgressInPanel(nearestAnchor.panel)
         };
       }
-
     }
 
     if (visiblePanelsOnly) {
@@ -1420,40 +1736,43 @@ class Flicking extends Component<FlickingEvents> {
    */
   public setStatus(status: Status): void {
     if (!this._initialized) {
-      throw new FlickingError(ERROR.MESSAGE.NOT_INITIALIZED, ERROR.CODE.NOT_INITIALIZED);
+      throw new FlickingError(
+        ERROR.MESSAGE.NOT_INITIALIZED,
+        ERROR.CODE.NOT_INITIALIZED
+      );
     }
 
-    const {
-      index,
-      position,
-      visibleOffset,
-      panels
-    } = status;
+    const { index, position, visibleOffset, panels } = status;
 
     const renderer = this._renderer;
     const control = this._control;
 
     // Can't add/remove panels on external rendering
     if (panels[0]?.html && !this._renderExternal) {
-      renderer.batchRemove({ index: 0, deleteCount: this.panels.length, hasDOMInElements: true });
-      renderer.batchInsert({ index: 0, elements: parseElement(panels.map(panel => panel.html!)), hasDOMInElements: true });
+      renderer.batchRemove({
+        index: 0,
+        deleteCount: this.panels.length,
+        hasDOMInElements: true
+      });
+      renderer.batchInsert({
+        index: 0,
+        elements: parseElement(panels.map((panel) => panel.html!)),
+        hasDOMInElements: true
+      });
     }
 
     if (index != null) {
-      const panelIndex = visibleOffset
-        ? index - visibleOffset
-        : index;
+      const panelIndex = visibleOffset ? index - visibleOffset : index;
 
       void this.moveTo(panelIndex, 0).catch(() => void 0);
     }
 
     if (position && this._moveType === MOVE_TYPE.FREE_SCROLL) {
       const { panel, progressInPanel } = position;
-      const panelIndex = visibleOffset
-        ? panel - visibleOffset
-        : panel;
+      const panelIndex = visibleOffset ? panel - visibleOffset : panel;
       const panelRange = renderer.panels[panelIndex].range;
-      const newCameraPos = panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;
+      const newCameraPos =
+        panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;
 
       void control.moveToPosition(newCameraPos, 0).catch(() => void 0);
     }
@@ -1468,7 +1787,7 @@ class Flicking extends Component<FlickingEvents> {
    */
   public addPlugins(...plugins: Plugin[]) {
     if (this._initialized) {
-      plugins.forEach(item => item.init(this));
+      plugins.forEach((item) => item.init(this));
     }
 
     this._plugins.push(...plugins);
@@ -1484,8 +1803,8 @@ class Flicking extends Component<FlickingEvents> {
    * @see https://github.com/naver/egjs-flicking-plugins
    */
   public removePlugins(...plugins: Plugin[]) {
-    plugins.forEach(item => {
-      const foundIndex = findIndex(this._plugins, val => val === item);
+    plugins.forEach((item) => {
+      const foundIndex = findIndex(this._plugins, (val) => val === item);
 
       if (foundIndex >= 0) {
         item.destroy();
@@ -1505,6 +1824,10 @@ class Flicking extends Component<FlickingEvents> {
    * @return {this}
    */
   public async resize(): Promise<void> {
+    if (this._isResizing) return;
+
+    this._isResizing = true;
+
     const viewport = this._viewport;
     const renderer = this._renderer;
     const camera = this._camera;
@@ -1517,14 +1840,27 @@ class Flicking extends Component<FlickingEvents> {
       ? camera.getProgressInPanel(activePanel)
       : 0;
 
-    this.trigger(new ComponentEvent(EVENTS.BEFORE_RESIZE, {
-      width: prevWidth,
-      height: prevHeight,
-      element: viewport.element
-    }));
+    this.trigger(
+      new ComponentEvent(EVENTS.BEFORE_RESIZE, {
+        width: prevWidth,
+        height: prevHeight,
+        element: viewport.element
+      })
+    );
 
     viewport.resize();
-    await renderer.forceRenderAllPanels(); // Render all panel elements, to update sizes
+
+    // 뷰포트 사이즈가 변경되었을 때 내부의 패널 사이즈들도 전부 업데이트 되어야 하므로 패널들을 전부 리렌더링한다.
+    // optimizeSizeUpdate가 true일 경우에는 플리킹 방향에 대응되는 뷰포트 사이즈 요소가 변경되었을 때만 패널들을 리렌더링한다.
+    // 자세한 사항은 optimizeSizeUpdate 옵션의 설명을 참고.
+    if (this._optimizeSizeUpdate) {
+      if ((this.horizontal && viewport.width !== prevWidth) || (!this.horizontal && viewport.height !== prevHeight)) {
+        await renderer.forceRenderAllPanels();
+      }
+    } else {
+      await renderer.forceRenderAllPanels(); // Render all panel elements, to update sizes
+    }
+
     if (!this._initialized) {
       return;
     }
@@ -1551,16 +1887,20 @@ class Flicking extends Component<FlickingEvents> {
     const newHeight = viewport.height;
     const sizeChanged = newWidth !== prevWidth || newHeight !== prevHeight;
 
-    this.trigger(new ComponentEvent(EVENTS.AFTER_RESIZE, {
-      width: viewport.width,
-      height: viewport.height,
-      prev: {
-        width: prevWidth,
-        height: prevHeight
-      },
-      sizeChanged,
-      element: viewport.element
-    }));
+    this.trigger(
+      new ComponentEvent(EVENTS.AFTER_RESIZE, {
+        width: viewport.width,
+        height: viewport.height,
+        prev: {
+          width: prevWidth,
+          height: prevHeight
+        },
+        sizeChanged,
+        element: viewport.element
+      })
+    );
+
+    this._isResizing = false;
   }
 
   /**
@@ -1634,10 +1974,17 @@ class Flicking extends Component<FlickingEvents> {
    */
   public insert(index: number, element: ElementLike | ElementLike[]): Panel[] {
     if (this._renderExternal) {
-      throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
+      throw new FlickingError(
+        ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK,
+        ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK
+      );
     }
 
-    return this._renderer.batchInsert({ index, elements: parseElement(element), hasDOMInElements: true });
+    return this._renderer.batchInsert({
+      index,
+      elements: parseElement(element),
+      hasDOMInElements: true
+    });
   }
 
   /**
@@ -1651,26 +1998,34 @@ class Flicking extends Component<FlickingEvents> {
    */
   public remove(index: number, deleteCount: number = 1): Panel[] {
     if (this._renderExternal) {
-      throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
+      throw new FlickingError(
+        ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK,
+        ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK
+      );
     }
 
-    return this._renderer.batchRemove({ index, deleteCount, hasDOMInElements: true });
+    return this._renderer.batchRemove({
+      index,
+      deleteCount,
+      hasDOMInElements: true
+    });
   }
 
   private _createControl(): Control {
     const moveType = this._moveType;
-    const moveTypes = Object.keys(MOVE_TYPE).map(key => MOVE_TYPE[key] as ValueOf<typeof MOVE_TYPE>);
+    const moveTypes = Object.keys(MOVE_TYPE).map(
+      (key) => MOVE_TYPE[key] as ValueOf<typeof MOVE_TYPE>
+    );
 
-    const moveTypeStr = Array.isArray(moveType)
-      ? moveType[0]
-      : moveType;
+    const moveTypeStr = Array.isArray(moveType) ? moveType[0] : moveType;
 
-    const moveTypeOptions = Array.isArray(moveType)
-      ? moveType[1] ?? {}
-      : {};
+    const moveTypeOptions = Array.isArray(moveType) ? moveType[1] ?? {} : {};
 
     if (!includes(moveTypes, moveTypeStr)) {
-      throw new FlickingError(ERROR.MESSAGE.WRONG_OPTION("moveType", JSON.stringify(moveType)), ERROR.CODE.WRONG_OPTION);
+      throw new FlickingError(
+        ERROR.MESSAGE.WRONG_OPTION("moveType", JSON.stringify(moveType)),
+        ERROR.CODE.WRONG_OPTION
+      );
     }
 
     switch (moveTypeStr) {
@@ -1686,7 +2041,9 @@ class Flicking extends Component<FlickingEvents> {
   private _createCamera(): Camera {
     if (this._circular && this._bound) {
       // eslint-disable-next-line no-console
-      console.warn("\"circular\" and \"bound\" option cannot be used together, ignoring bound.");
+      console.warn(
+        "\"circular\" and \"bound\" option cannot be used together, ignoring bound."
+      );
     }
 
     return new Camera(this, {
@@ -1698,7 +2055,9 @@ class Flicking extends Component<FlickingEvents> {
     const externalRenderer = this._externalRenderer;
     if (this._virtual && this._panelsPerView <= 0) {
       // eslint-disable-next-line no-console
-      console.warn("\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual.");
+      console.warn(
+        "\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual."
+      );
     }
 
     return externalRenderer
@@ -1709,12 +2068,9 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   private _createExternalRenderer(): ExternalRenderer {
-    const {
-      renderer,
-      rendererOptions
-    } = this._renderExternal!;
+    const { renderer, rendererOptions } = this._renderExternal!;
 
-    return new (renderer)({ align: this._align, ...rendererOptions });
+    return new renderer({ align: this._align, ...rendererOptions });
   }
 
   private _createVanillaRenderer(): VanillaRenderer {
@@ -1734,16 +2090,25 @@ class Flicking extends Component<FlickingEvents> {
     const renderer = this._renderer;
     const control = this._control;
     const camera = this._camera;
-    const defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+    const defaultPanel =
+      renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
 
     if (!defaultPanel) return;
 
     const nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
-    const initialPanel = (nearestAnchor && defaultPanel.position !== nearestAnchor.panel.position && defaultPanel.index !== nearestAnchor.panel.index) ? nearestAnchor.panel : defaultPanel;
+    const initialPanel =
+      nearestAnchor &&
+      defaultPanel.position !== nearestAnchor.panel.position &&
+      defaultPanel.index !== nearestAnchor.panel.index
+        ? nearestAnchor.panel
+        : defaultPanel;
     control.setActive(initialPanel, null, false);
 
     if (!nearestAnchor) {
-      throw new FlickingError(ERROR.MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position), ERROR.CODE.POSITION_NOT_REACHABLE);
+      throw new FlickingError(
+        ERROR.MESSAGE.POSITION_NOT_REACHABLE(initialPanel.position),
+        ERROR.CODE.POSITION_NOT_REACHABLE
+      );
     }
 
     let position = initialPanel.position;
@@ -1763,11 +2128,13 @@ class Flicking extends Component<FlickingEvents> {
     const camera = this._camera;
     const control = this._control;
 
-    this.trigger(new ComponentEvent(EVENTS.BEFORE_RESIZE, {
-      width: 0,
-      height: 0,
-      element: viewport.element
-    }));
+    this.trigger(
+      new ComponentEvent(EVENTS.BEFORE_RESIZE, {
+        width: 0,
+        height: 0,
+        element: viewport.element
+      })
+    );
 
     viewport.resize();
     renderer.updatePanelSize();
@@ -1781,16 +2148,18 @@ class Flicking extends Component<FlickingEvents> {
     const newHeight = viewport.height;
     const sizeChanged = newWidth !== 0 || newHeight !== 0;
 
-    this.trigger(new ComponentEvent(EVENTS.AFTER_RESIZE, {
-      width: viewport.width,
-      height: viewport.height,
-      prev: {
-        width: 0,
-        height: 0
-      },
-      sizeChanged,
-      element: viewport.element
-    }));
+    this.trigger(
+      new ComponentEvent(EVENTS.AFTER_RESIZE, {
+        width: viewport.width,
+        height: viewport.height,
+        prev: {
+          width: 0,
+          height: 0
+        },
+        sizeChanged,
+        element: viewport.element
+      })
+    );
   }
 }