@egjs/flicking 3.8.3 → 3.9.2-beta.0

package/doc/eg.Flicking.html

@@ -1455,6 +1455,43 @@
         
     </li>
     
+    <li>
+        <!-- parameter name -->
+        <div>
+            <strong>useResizeObserver</strong>
+            
+                (default: <code>true</code>)
+            
+
+            
+                
+                    <span class="optional">optional</span>
+                
+                
+                    
+                
+            
+        </div>
+        <!-- parameter type -->
+        
+        <div>Type: 
+<span class="param-type">boolean</span>
+
+</div>
+        
+    
+        <!-- Description -->
+        <div>
+            
+            <div class="description en"><p>Whether to listen <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">ResizeObserver</a>'s event instead of Window's <a href="https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event">resize</a> event when using the <code>autoResize</code> option</p></div>
+            <div class="description ko"><p>autoResize 옵션 사용시 <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">ResizeObserver</a>의 이벤트를 Window객체의 <a href="https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event">resize</a> 이벤트 대신 수신할지 여부를 설정합니다</p></div>
+            
+        </div>
+
+        <!-- Sub parameters -->
+        
+    </li>
+    
     <li>
         <!-- parameter name -->
         <div>
@@ -2213,7 +2250,7 @@ eg.Flicking.DIRECTION.NEXT; // &quot;NEXT&quot;</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line482">line 482</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line478">line 478</a>
         </div>
         
     </div>
@@ -2364,7 +2401,7 @@ eg.Flicking.DIRECTION.NEXT; // &quot;NEXT&quot;</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line602">line 602</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line595">line 595</a>
         </div>
         
     </div>
@@ -2529,7 +2566,7 @@ flicking.append(&quot;&lt;div&gt;Panel 1&lt;/div&gt;&lt;div&gt;Panel 2&lt;/div&g
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line506">line 506</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line502">line 502</a>
         </div>
         
     </div>
@@ -2693,7 +2730,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line436">line 436</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line432">line 432</a>
         </div>
         
     </div>
@@ -2810,7 +2847,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line425">line 425</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line421">line 421</a>
         </div>
         
     </div>
@@ -2927,7 +2964,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line350">line 350</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line346">line 346</a>
         </div>
         
     </div>
@@ -3085,7 +3122,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line384">line 384</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line380">line 380</a>
         </div>
         
     </div>
@@ -3202,7 +3239,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line323">line 323</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line319">line 319</a>
         </div>
         
     </div>
@@ -3319,7 +3356,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line305">line 305</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line301">line 301</a>
         </div>
         
     </div>
@@ -3436,7 +3473,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line296">line 296</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line292">line 292</a>
         </div>
         
     </div>
@@ -3553,7 +3590,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line394">line 394</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line390">line 390</a>
         </div>
         
     </div>
@@ -3680,7 +3717,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line336">line 336</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line332">line 332</a>
         </div>
         
     </div>
@@ -3828,7 +3865,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line375">line 375</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line371">line 371</a>
         </div>
         
     </div>
@@ -3945,7 +3982,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line314">line 314</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line310">line 310</a>
         </div>
         
     </div>
@@ -4062,7 +4099,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line447">line 447</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line443">line 443</a>
         </div>
         
     </div>
@@ -4179,7 +4216,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line366">line 366</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line362">line 362</a>
         </div>
         
     </div>
@@ -4462,7 +4499,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line416">line 416</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line412">line 412</a>
         </div>
         
     </div>
@@ -4579,7 +4616,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line231">line 231</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line227">line 227</a>
         </div>
         
     </div>
@@ -4770,7 +4807,7 @@ console.log(flick.moveTo); // null</p></code></pre>
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line210">line 210</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line206">line 206</a>
         </div>
         
     </div>
@@ -5583,7 +5620,7 @@ some.trigger(&quot;hi&quot;);
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line576">line 576</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line569">line 569</a>
         </div>
         
     </div>
@@ -5747,7 +5784,7 @@ flicking.prepend(&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;); // Prepended at inde
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line190">line 190</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line186">line 186</a>
         </div>
         
     </div>
@@ -5907,7 +5944,7 @@ flicking.prepend(&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;); // Prepended at inde
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line651">line 651</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line644">line 644</a>
         </div>
         
     </div>
@@ -6100,7 +6137,7 @@ flicking.prepend(&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;); // Prepended at inde
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line493">line 493</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line489">line 489</a>
         </div>
         
     </div>
@@ -6251,7 +6288,7 @@ flicking.prepend(&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;); // Prepended at inde
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line636">line 636</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line629">line 629</a>
         </div>
         
     </div>
@@ -6451,7 +6488,7 @@ flicking.replace(3, [&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;, &quot;&lt;div&gt;
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line528">line 528</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line521">line 521</a>
         </div>
         
     </div>
@@ -6568,7 +6605,7 @@ flicking.replace(3, [&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;, &quot;&lt;div&gt;
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line405">line 405</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line401">line 401</a>
         </div>
         
     </div>
@@ -6729,7 +6766,7 @@ flicking.replace(3, [&quot;&lt;div&gt;Panel&lt;/div&gt;&quot;, &quot;&lt;div&gt;
     
         
         <div class="tag-source">
-            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line472">line 472</a>
+            <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line468">line 468</a>
         </div>
         
     </div>
@@ -8990,6 +9027,32 @@ some.on(&quot;hi&quot;, (e) => {
             
             
             
+            <td class="description last">
+                
+
+                </td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>useResizeObserver</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">boolean</span>
+
+
+            
+            </td>
+            
+            
+            
+            
+            
             <td class="description last">
                 
 
@@ -11607,7 +11670,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line260">line 260</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line261">line 261</a>
         </div>
         
     </div>
@@ -11696,7 +11759,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line295">line 295</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line296">line 296</a>
         </div>
         
     </div>
@@ -11785,7 +11848,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line232">line 232</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line233">line 233</a>
         </div>
         
     </div>
@@ -11874,7 +11937,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line225">line 225</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line226">line 226</a>
         </div>
         
     </div>
@@ -11963,7 +12026,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line246">line 246</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line247">line 247</a>
         </div>
         
     </div>
@@ -12052,7 +12115,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line253">line 253</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line254">line 254</a>
         </div>
         
     </div>
@@ -12141,7 +12204,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line239">line 239</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line240">line 240</a>
         </div>
         
     </div>
@@ -12230,7 +12293,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line281">line 281</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line282">line 282</a>
         </div>
         
     </div>
@@ -12319,7 +12382,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line267">line 267</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line268">line 268</a>
         </div>
         
     </div>
@@ -12408,7 +12471,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line274">line 274</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line275">line 275</a>
         </div>
         
     </div>
@@ -12497,7 +12560,7 @@ panel.update(el => {
     
         
         <div class="tag-source">
-            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line288">line 288</a>
+            <a href="src_types.ts.html">types.ts</a>, <a href="src_types.ts.html#line289">line 289</a>
         </div>
         
     </div>
@@ -12596,7 +12659,7 @@ panel.update(el => {
         
 
         <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri May 28 2021 18:02:17 GMT+0900 (Korean Standard Time)
+            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
         </footer>
     </div>
 </div>

package/doc/global.html

@@ -405,7 +405,7 @@
         
 
         <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri May 28 2021 18:02:17 GMT+0900 (Korean Standard Time)
+            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
         </footer>
     </div>
 </div>

package/doc/index.html

@@ -491,7 +491,7 @@ THE SOFTWARE.
         
 
         <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri May 28 2021 18:02:17 GMT+0900 (Korean Standard Time)
+            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
         </footer>
     </div>
 </div>

package/doc/node_modules_@egjs_component_src_Component.ts.html

@@ -615,7 +615,7 @@ export default Component;
         
 
         <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri May 28 2021 18:02:17 GMT+0900 (Korean Standard Time)
+            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
         </footer>
     </div>
 </div>

package/doc/src_Flicking.ts.html

@@ -249,8 +249,10 @@
 
 import Component from "@egjs/component";
 import ImReady from "@egjs/imready";
+import { DiffResult } from "@egjs/list-differ";
 import Viewport from "./components/Viewport";
 import Panel from "./components/Panel";
+import AutoResizer from "./components/AutoResizer";
 
 import { merge, getProgress, parseElement, isString, counter, findIndex } from "./utils";
 import { DEFAULT_OPTIONS, EVENTS, DIRECTION, AXES_EVENTS, STATE_TYPE, DEFAULT_MOVE_TYPE_OPTIONS } from "./consts";
@@ -276,8 +278,6 @@ import {
   MoveTypeStringOption,
   ValueOf,
 } from "./types";
-// import { sendEvent } from "./ga/ga";
-import { DiffResult } from "@egjs/list-differ";
 
 /**
  * @memberof eg
@@ -342,6 +342,7 @@ class Flicking extends Component<{
 
   private wrapper: HTMLElement;
   private viewport: Viewport;
+  private autoResizer: AutoResizer;
   private contentsReadyChecker: ImReady | null = null;
 
   private eventContext: FlickingContext;
@@ -379,6 +380,7 @@ class Flicking extends Component<{
    * @param {boolean} [options.isConstantSize=false] Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
    * @param {boolean} [options.renderExternal=false] Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling `sync()` method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods.<ko>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, `sync()`를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.</ko>
    * @param {boolean} [options.resizeOnContentsReady=false] Whether to resize the Flicking after the image/video elements inside viewport are ready.<br/>Use this property to prevent wrong Flicking layout caused by dynamic image / video sizes.<ko>Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.<br/>이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.</ko>
+   * @param {boolean} [options.useResizeObserver=true] 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} 이벤트 대신 수신할지 여부를 설정합니다</ko>
    * @param {boolean} [options.collectStatistics=true] Whether to collect statistics on how you are using `Flicking`. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product.<ko>어떻게 `Flicking`을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.</ko>
    */
   constructor(
@@ -413,16 +415,10 @@ class Flicking extends Component<{
 
     // Make viewport instance with panel container element
     this.viewport = new Viewport(this, this.options, this.triggerEvent);
+    this.autoResizer = new AutoResizer(this);
+
     this.listenInput();
     this.listenResize();
-
-    // if (this.options.collectStatistics) {
-    //   sendEvent(
-    //     "usage",
-    //     "options",
-    //     options,
-    //   );
-    // }
   }
 
   /**
@@ -750,10 +746,7 @@ class Flicking extends Component<{
   public destroy(option: Partial<DestroyOption> = {}): void {
     this.off();
 
-    if (this.options.autoResize) {
-      window.removeEventListener("resize", this.resize);
-    }
-
+    this.autoResizer.disable();
     this.viewport.destroy(option);
     this.contentsReadyChecker?.destroy();
 
@@ -1013,7 +1006,10 @@ class Flicking extends Component<{
     }
     panelManager.replacePanels(newPanels, newClones);
 
-    if (!currentPanel && newPanels.length > 0) {
+    const currentPanelIndex = currentPanel?.getIndex() ?? -1;
+    const currentPanelIsRemoved = findIndex(removed, index => index === currentPanelIndex) >= 0;
+
+    if ((!currentPanel || currentPanelIsRemoved) && newPanels.length > 0) {
       viewport.setCurrentPanel(newPanels[0]);
     } else if (newPanels.length <= 0) {
       viewport.setCurrentPanel(undefined);
@@ -1113,7 +1109,7 @@ class Flicking extends Component<{
     const options = this.options;
 
     if (options.autoResize) {
-      window.addEventListener("resize", this.resize);
+      this.autoResizer.enable();
     }
 
     if (options.resizeOnContentsReady) {
@@ -1253,7 +1249,7 @@ export default Flicking;
         
 
         <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri May 28 2021 18:02:17 GMT+0900 (Korean Standard Time)
+            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
         </footer>
     </div>
 </div>

package/doc/src_types.ts.html

@@ -331,6 +331,7 @@ export interface FlickingOptions {
   iOSEdgeSwipeThreshold: number;
   resizeOnContentsReady: boolean;
   collectStatistics: boolean;
+  useResizeObserver: boolean;
 }
 
 export type MoveTypeObjectOption = MoveTypeSnapOption | MoveTypeFreeScrollOption;
@@ -805,7 +806,7 @@ export type SyncResult = Pick<DiffResult<HTMLElement>, "added" | "changed"
         
 
         <footer>
-            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri May 28 2021 18:02:17 GMT+0900 (Korean Standard Time)
+            Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
         </footer>
     </div>
 </div>