@egjs/flicking

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Class: Flicking | egjs::Flicking - API</title> <meta name="description" content="A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side." /> <meta name="keywords" content="UI Component, egjs, flicking, carousel" /> <meta name="keyword" content="UI Component, egjs, flicking, carousel" /> <meta property="og:title" content=""/> <meta property="og:type" content="website"/> <meta property="og:image" content=""/> <meta property="og:url" content=""/> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script> <script src="scripts/jquery.min.js"></script>  <link rel="canonical" href="https://naver.github.io/egjs-flicking/release/latest/doc/"/> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="styles/jaguar.css"> <script> var config = {"monospaceLinks":true,"cleverLinks":true,"default":{"outputSourceFiles":true},"applicationName":"eg.Flicking","disqus":"egjs","googleAnalytics":"UA-70842526-17","openGraph":{"title":"","type":"website","image":"","site_name":"","url":""},"meta":{"title":"egjs::Flicking - API","description":"A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side.","keyword":"UI Component, egjs, flicking, carousel"},"linenums":true,"link":{"canonical":"https://naver.github.io/egjs-flicking/release/latest/doc/"}}; </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', config.googleAnalytics]); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="wrap" class="clearfix"> <div class="navigation"> <h3 class="applicationName"> <a href="//naver.github.io/egjs/"><img style="width:40px; height:20px;" src="img/type_white.svg"/></a>  <a href="//naver.github.io/egjs-flicking/">Flicking</a> </h3> <div class="search"> <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentations"> </div> <ul class="list"> <li class="item"> <span class="title"> <a href="index.html">README</a> </span> </li>  <li class="item" data-name="eg.Flicking"> <span class="title"> <a href="eg.Flicking.html">eg.Flicking</a> </span> <ul class="members itemMembers expends"> <span class="subtitle">Members</span> <li data-name="eg.Flicking.DIRECTION"><a href="eg.Flicking.html#.DIRECTION">DIRECTION</a></li> <li data-name="eg.Flicking.EVENTS"><a href="eg.Flicking.html#.EVENTS">EVENTS</a></li> <li data-name="eg.Flicking.VERSION"><a href="eg.Flicking.html#.VERSION">VERSION</a></li> </ul> <ul class="typedefs itemMembers expends"> <span class="subtitle">Typedefs</span> <li data-name="eg.Flicking.ChangeEvent"><a href="eg.Flicking.html#.ChangeEvent">ChangeEvent</a></li> <li data-name="eg.Flicking.ContentErrorEvent"><a href="eg.Flicking.html#.ContentErrorEvent">ContentErrorEvent</a></li> <li data-name="eg.Flicking.ElementLike"><a href="eg.Flicking.html#.ElementLike">ElementLike</a></li> <li data-name="eg.Flicking.FlickingEvent"><a href="eg.Flicking.html#.FlickingEvent">FlickingEvent</a></li> <li data-name="eg.Flicking.FlickingOptions"><a href="eg.Flicking.html#.FlickingOptions">FlickingOptions</a></li> <li data-name="eg.Flicking.FlickingPanel"><a href="eg.Flicking.html#.FlickingPanel">FlickingPanel</a></li> <li data-name="eg.Flicking.FlickingStatus"><a href="eg.Flicking.html#.FlickingStatus">FlickingStatus</a></li> <li data-name="eg.Flicking.MoveTypeFreeScrollOption"><a href="eg.Flicking.html#.MoveTypeFreeScrollOption">MoveTypeFreeScrollOption</a></li> <li data-name="eg.Flicking.MoveTypeOption"><a href="eg.Flicking.html#.MoveTypeOption">MoveTypeOption</a></li> <li data-name="eg.Flicking.MoveTypeSnapOption"><a href="eg.Flicking.html#.MoveTypeSnapOption">MoveTypeSnapOption</a></li> <li data-name="eg.Flicking.NeedPanelEvent"><a href="eg.Flicking.html#.NeedPanelEvent">NeedPanelEvent</a></li> <li data-name="eg.Flicking.Plugin"><a href="eg.Flicking.html#.Plugin">Plugin</a></li> <li data-name="eg.Flicking.SelectEvent"><a href="eg.Flicking.html#.SelectEvent">SelectEvent</a></li> <li data-name="eg.Flicking.VisibleChangeEvent"><a href="eg.Flicking.html#.VisibleChangeEvent">VisibleChangeEvent</a></li> </ul> <ul class="methods itemMembers expends"> <span class="subtitle">Methods</span> <li data-name="eg.Flicking#addPlugins"><a href="eg.Flicking.html#addPlugins">addPlugins</a></li> <li data-name="eg.Flicking#append"><a href="eg.Flicking.html#append">append</a></li> <li data-name="eg.Flicking#destroy"><a href="eg.Flicking.html#destroy">destroy</a></li> <li data-name="eg.Flicking#disableInput"><a href="eg.Flicking.html#disableInput">disableInput</a></li> <li data-name="eg.Flicking#enableInput"><a href="eg.Flicking.html#enableInput">enableInput</a></li> <li data-name="eg.Flicking#getAllPanels"><a href="eg.Flicking.html#getAllPanels">getAllPanels</a></li> <li data-name="eg.Flicking#getCloneCount"><a href="eg.Flicking.html#getCloneCount">getCloneCount</a></li> <li data-name="eg.Flicking#getCurrentPanel"><a href="eg.Flicking.html#getCurrentPanel">getCurrentPanel</a></li> <li data-name="eg.Flicking#getElement"><a href="eg.Flicking.html#getElement">getElement</a></li> <li data-name="eg.Flicking#getIndex"><a href="eg.Flicking.html#getIndex">getIndex</a></li> <li data-name="eg.Flicking#getLastIndex"><a href="eg.Flicking.html#getLastIndex">getLastIndex</a></li> <li data-name="eg.Flicking#getPanel"><a href="eg.Flicking.html#getPanel">getPanel</a></li> <li data-name="eg.Flicking#getPanelCount"><a href="eg.Flicking.html#getPanelCount">getPanelCount</a></li> <li data-name="eg.Flicking#getSize"><a href="eg.Flicking.html#getSize">getSize</a></li> <li data-name="eg.Flicking#getStatus"><a href="eg.Flicking.html#getStatus">getStatus</a></li> <li data-name="eg.Flicking#getVisiblePanels"><a href="eg.Flicking.html#getVisiblePanels">getVisiblePanels</a></li> <li data-name="eg.Flicking#hasOn"><a href="eg.Flicking.html#hasOn">hasOn</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#isPlaying"><a href="eg.Flicking.html#isPlaying">isPlaying</a></li> <li data-name="eg.Flicking#moveTo"><a href="eg.Flicking.html#moveTo">moveTo</a></li> <li data-name="eg.Flicking#next"><a href="eg.Flicking.html#next">next</a></li> <li data-name="eg.Flicking#off"><a href="eg.Flicking.html#off">off</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#on"><a href="eg.Flicking.html#on">on</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#once"><a href="eg.Flicking.html#once">once</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> <li data-name="eg.Flicking#prepend"><a href="eg.Flicking.html#prepend">prepend</a></li> <li data-name="eg.Flicking#prev"><a href="eg.Flicking.html#prev">prev</a></li> <li data-name="eg.Flicking#remove"><a href="eg.Flicking.html#remove">remove</a></li> <li data-name="eg.Flicking#removePlugins"><a href="eg.Flicking.html#removePlugins">removePlugins</a></li> <li data-name="eg.Flicking#replace"><a href="eg.Flicking.html#replace">replace</a></li> <li data-name="eg.Flicking#resize"><a href="eg.Flicking.html#resize">resize</a></li> <li data-name="eg.Flicking#setLastIndex"><a href="eg.Flicking.html#setLastIndex">setLastIndex</a></li> <li data-name="eg.Flicking#setStatus"><a href="eg.Flicking.html#setStatus">setStatus</a></li> <li data-name="eg.Flicking#trigger"><a href="eg.Flicking.html#trigger">trigger</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li> </ul> <ul class="events itemMembers expends"> <span class="subtitle">Events</span> <li data-name="eg.Flicking#event:change"><a href="eg.Flicking.html#event:change">change</a></li> <li data-name="eg.Flicking#event:contentError"><a href="eg.Flicking.html#event:contentError">contentError</a></li> <li data-name="eg.Flicking#event:holdEnd"><a href="eg.Flicking.html#event:holdEnd">holdEnd</a></li> <li data-name="eg.Flicking#event:holdStart"><a href="eg.Flicking.html#event:holdStart">holdStart</a></li> <li data-name="eg.Flicking#event:move"><a href="eg.Flicking.html#event:move">move</a></li> <li data-name="eg.Flicking#event:moveEnd"><a href="eg.Flicking.html#event:moveEnd">moveEnd</a></li> <li data-name="eg.Flicking#event:moveStart"><a href="eg.Flicking.html#event:moveStart">moveStart</a></li> <li data-name="eg.Flicking#event:needPanel"><a href="eg.Flicking.html#event:needPanel">needPanel</a></li> <li data-name="eg.Flicking#event:restore"><a href="eg.Flicking.html#event:restore">restore</a></li> <li data-name="eg.Flicking#event:select"><a href="eg.Flicking.html#event:select">select</a></li> <li data-name="eg.Flicking#event:visibleChange"><a href="eg.Flicking.html#event:visibleChange">visibleChange</a></li> </ul> </li> </ul> </div> <div class="main"> <h1 class="page-title" data-filename="eg.Flicking.html">Class: Flicking</h1> <section> <header> <h2> <span>eg.Flicking</span> </h2> <button id="toggle"> English </button> </header> <article> <div class="container-overview"> <dt> <div class="nameContainer"> <h4 class="name" id="Flicking"> new eg.Flicking<span class="signature">(element, <span class="optional">options</span>)</span> </h4> <div class="tag-source"> <a href="src_Flicking.ts.html">Flicking.ts</a>, <a href="src_Flicking.ts.html#line46">line 46</a> </div> </div> </dt> <dd> <div class="description en"> </div> <ul class="parameters"> <li>  <div> <strong>element</strong> </div>  <div>Type: <span class="param-type">string | HTMLElement</span> </div>  <div> <div class="description en"><p>A base element for the eg.Flicking module. When specifying a value as a <code>string</code> type, you must specify a css selector string to select the element.</p></div> <div class="description ko"><p>eg.Flicking 모듈을 사용할 기준 요소. <code>string</code>타입으로 값 지정시 요소를 선택하기 위한 css 선택자 문자열을 지정해야 한다.</p></div> </div>  </li> <li>  <div> <strong>options</strong> (default: <code>{}</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">Partial<<a href="eg.Flicking.html#.FlickingOptions">FlickingOptions</a>></span> </div>  <div> <div class="description en"><p>An option object of the eg.Flicking module</p></div> <div class="description ko"><p>eg.Flicking 모듈의 옵션 객체</p></div> </div>  <ul class="parameters"> <li>  <div> <strong>classPrefix</strong> (default: <code>"eg-flick"</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">string</span> </div>  <div> <div class="description en"><p>A prefix of class names will be added for the panels, viewport, and camera.</p></div> <div class="description ko"><p>패널들과 뷰포트, 카메라에 추가될 클래스 이름의 접두사.</p></div> </div>  </li> <li>  <div> <strong>deceleration</strong> (default: <code>0.0075</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>Deceleration value for panel movement animation for animation triggered by manual user input. A higher value means a shorter running time.</p></div> <div class="description ko"><p>사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.</p></div> </div>  </li> <li>  <div> <strong>horizontal</strong> (default: <code>true</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>The direction of panel movement. (true: horizontal, false: vertical)</p></div> <div class="description ko"><p>패널 이동 방향. (true: 가로방향, false: 세로방향)</p></div> </div>  </li> <li>  <div> <strong>circular</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Enables circular mode, which connects first/last panel for continuous scrolling.</p></div> <div class="description ko"><p>순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능하다.</p></div> </div>  </li> <li>  <div> <strong>infinite</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Enables infinite mode, which can automatically trigger needPanel until reaching the last panel's index reaches the lastIndex.</p></div> <div class="description ko"><p>무한 모드를 활성화한다. 무한 모드에서는 needPanel 이벤트를 자동으로 트리거한다. 해당 동작은 마지막 패널의 인덱스가 lastIndex와 일치할때까지 일어난다.</p></div> </div>  </li> <li>  <div> <strong>infiniteThreshold</strong> (default: <code>0</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>A Threshold from viewport edge before triggering <code>needPanel</code> event in infinite mode.</p></div> <div class="description ko"><p>무한 모드에서 <code>needPanel</code>이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리.</p></div> </div>  </li> <li>  <div> <strong>lastIndex</strong> (default: <code>Infinity</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>Maximum panel index that Flicking can set. Flicking won't trigger <code>needPanel</code> when the event's panel index is greater than it.<br/>Also, if the last panel's index reached a given index, you can't add more panels.</p></div> <div class="description ko"><p>Flicking이 설정 가능한 패널의 최대 인덱스. <code>needPanel</code> 이벤트에 지정된 인덱스가 최대 패널의 개수보다 같거나 커야 하는 경우에 이벤트를 트리거하지 않게 한다.<br>또한, 마지막 패널의 인덱스가 주어진 인덱스와 동일할 경우, 새로운 패널을 더 이상 추가할 수 없다.</p></div> </div>  </li> <li>  <div> <strong>threshold</strong> (default: <code>40</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>Movement threshold to change panel(unit: pixel). It should be dragged above the threshold to change the current panel.</p></div> <div class="description ko"><p>패널 변경을 위한 이동 임계값 (단위: 픽셀). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.</p></div> </div>  </li> <li>  <div> <strong>duration</strong> (default: <code>100</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>Duration of the panel movement animation. (unit: ms)</p></div> <div class="description ko"><p>패널 이동 애니메이션 진행 시간.(단위: ms)</p></div> </div>  </li> <li>  <div> <strong>panelEffect</strong> (default: <code>x => 1 - Math.pow(1 - x, 3)</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">function</span> </div>  <div> <div class="description en"><p>An easing function applied to the panel movement animation. Default value is <code>easeOutCubic</code>.</p></div> <div class="description ko"><p>패널 이동 애니메이션에 적용할 easing함수. 기본값은 <code>easeOutCubic</code>이다.</p></div> </div>  </li> <li>  <div> <strong>defaultIndex</strong> (default: <code>0</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>Index of the panel to set as default when initializing. A zero-based integer.</p></div> <div class="description ko"><p>초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.</p></div> </div>  </li> <li>  <div> <strong>inputType</strong> (default: <code>["touch,"mouse"]</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">Array.<string></span> </div>  <div> <div class="description en"><p>Types of input devices to enable.(<a href="https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption">Reference</a>)</p></div> <div class="description ko"><p>활성화할 입력 장치 종류. (<a href="https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption">참고</a>)</p></div> </div>  </li> <li>  <div> <strong>thresholdAngle</strong> (default: <code>45</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>The threshold angle value(0 ~ 90).<br>If the input angle from click/touched position is above or below this value in horizontal and vertical mode each, scrolling won't happen.</p></div> <div class="description ko"><p>스크롤 동작을 막기 위한 임계각(0 ~ 90).<br>클릭/터치한 지점으로부터 계산된 사용자 입력의 각도가 horizontal/vertical 모드에서 각각 크거나 작으면, 스크롤 동작이 이루어지지 않는다.</p></div> </div>  </li> <li>  <div> <strong>bounce</strong> (default: <code>[10,10]</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> | <span class="param-type">string</span> | <span class="param-type">Array.<number></span> | <span class="param-type">Array.<string></span> </div>  <div> <div class="description en"><p>The size value of the bounce area. Only can be enabled when <code>circular=false</code>.<br>You can set different bounce value for prev/next direction by using array.<br><code>number</code> for px value, and <code>string</code> for px, and % value relative to viewport size.(ex - 0, "10px", "20%")</p></div> <div class="description ko"><p>바운스 영역의 크기값. <code>circular=false</code>인 경우에만 사용할 수 있다.<br>배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정 가능하다.<br><code>number</code>를 통해 px값을, <code>stirng</code>을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있다.(ex - 0, "10px", "20%")</p></div> </div>  </li> <li>  <div> <strong>autoResize</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether the <code>resize</code> method should be called automatically after a window resize event.</p></div> <div class="description ko"><p>window의 <code>resize</code> 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.</p></div> </div>  </li> <li>  <div> <strong>adaptive</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether the height(horizontal)/width(vertical) of the viewport element reflects the height/width value of the panel after completing the movement.</p></div> <div class="description ko"><p>목적 패널로 이동한 후 그 패널의 높이(horizontal)/너비(vertical)값을 뷰포트 요소의 높이/너비값에 반영할지 여부.</p></div> </div>  </li> <li>  <div> <strong>zIndex</strong> (default: <code>2000</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> | <span class="param-type">""</span> </div>  <div> <div class="description en"><p>z-index value for viewport element.</p></div> <div class="description ko"><p>뷰포트 엘리먼트의 z-index 값.</p></div> </div>  </li> <li>  <div> <strong>bound</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Prevent the view from going out of the first/last panel. Only can be enabled when <code>circular=false</code>.</p></div> <div class="description ko"><p>뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. <code>circular=false</code>인 경우에만 사용할 수 있다.</p></div> </div>  </li> <li>  <div> <strong>overflow</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Disables CSS property <code>overflow: hidden</code> in viewport if <code>true</code>.</p></div> <div class="description ko"><p><code>true</code>로 설정시 뷰포트에 <code>overflow: hidden</code> 속성을 해제한다.</p></div> </div>  </li> <li>  <div> <strong>hanger</strong> (default: <code>"50%"</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">string</span> </div>  <div> <div class="description en"><p>The reference position of the hanger in the viewport, which hangs panel anchors should be stopped at.<br>It should be provided in px or % value of viewport size.<br>You can combinate those values with plus/minus sign.<br>ex) "50", "100px", "0%", "25% + 100px"</p></div> <div class="description ko"><p>뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</p></div> </div>  </li> <li>  <div> <strong>anchor</strong> (default: <code>"50%"</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">string</span> </div>  <div> <div class="description en"><p>The reference position of the anchor in panels, which can be hanged by viewport hanger.<br>It should be provided in px or % value of panel size.<br>You can combinate those values with plus/minus sign.<br>ex) "50", "100px", "0%", "25% + 100px"</p></div> <div class="description ko"><p>패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다.<br>px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</p></div> </div>  </li> <li>  <div> <strong>gap</strong> (default: <code>0</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">number</span> </div>  <div> <div class="description en"><p>Space value between panels. Should be given in number.(px)</p></div> <div class="description ko"><p>패널간에 부여할 간격의 크기를 나타내는 숫자.(px)</p></div> </div>  </li> <li>  <div> <strong>moveType</strong> (default: <code>"snap"</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type"><a href="eg.Flicking.html#.MoveTypeOption">eg.Flicking.MoveTypeOption</a></span> </div>  <div> <div class="description en"><p>Movement style by user input. (ex: snap, freeScroll)</p></div> <div class="description ko"><p>사용자 입력에 의한 이동 방식.(ex: snap, freeScroll)</p></div> </div>  </li> <li>  <div> <strong>useOffset</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether to use <code>offsetWidth</code>/<code>offsetHeight</code> instead of <code>getBoundingClientRect</code> for panel/viewport size calculation.<br/>You can use this option to calculate the original panel size when CSS transform is applied to viewport or panel.<br/>⚠️ If panel size is not fixed integer value, there can be a 1px gap between panels.</p></div> <div class="description ko"><p>패널과 뷰포트의 크기를 계산할 때 <code>offsetWidth</code>/<code>offsetHeight</code>를 <code>getBoundingClientRect</code> 대신 사용할지 여부.<br/>패널이나 뷰포트에 CSS transform이 설정되어 있을 때 원래 패널 크기를 계산하려면 옵션을 활성화한다.<br/>⚠️ 패널의 크기가 정수로 고정되어있지 않다면 패널 사이에 1px의 공간이 생길 수 있다.</p></div> </div>  </li> <li>  <div> <strong>renderOnlyVisible</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether to render visible panels only. This can dramatically increase performance when there're many panels.</p></div> <div class="description ko"><p>보이는 패널만 렌더링할지 여부를 설정한다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있다.</p></div> </div>  </li> <li>  <div> <strong>isEqualSize</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> | <span class="param-type">Array.<string></span> </div>  <div> <div class="description en"><p>This option indicates whether all panels have the same size(true) of first panel, or it can hold a list of class names that determines panel size.<br/>Enabling this option can increase performance while recalculating panel size.</p></div> <div class="description ko"><p>모든 패널의 크기가 동일한지(true), 혹은 패널 크기를 결정하는 패널 클래스들의 리스트.<br/>이 옵션을 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</p></div> </div>  </li> <li>  <div> <strong>isConstantSize</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.</p></div> <div class="description ko"><p>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</p></div> </div>  </li> <li>  <div> <strong>renderExternal</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling <code>sync()</code> method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods.</p></div> <div class="description ko"><p>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, <code>sync()</code>를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.</p></div> </div>  </li> <li>  <div> <strong>resizeOnContentsReady</strong> (default: <code>false</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>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.</p></div> <div class="description ko"><p>Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.<br/>이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.</p></div> </div>  </li> <li>  <div> <strong>collectStatistics</strong> (default: <code>true</code>) <span class="optional">optional</span> </div>  <div>Type: <span class="param-type">boolean</span> </div>  <div> <div class="description en"><p>Whether to collect statistics on how you are using <code>Flicking</code>. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product.</p></div> <div class="description ko"><p>어떻게 <code>Flicking</code>을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.</p></div> </div>  </li> </ul> </li> </ul> <dl class="details"> <dt class="tag-see">See:</dt> <dd class="tag-see"> <ul> <li> <div class="en">Easing Functions Cheat Sheet <a href="http://easings.net/">http://easings.net/</a> </div> <div class="ko"><p>이징 함수 Cheat Sheet <a href="http://easings.net/">http://easings.net/</a></p></div> </li> </ul> </dd>  </dl> </dd> <h3 class="subsection-title">Browser Support</h3> <table class="support"> <thead> <tr> <th>Browser</th> <th>Version</th> </tr> </thead> <tbody> <tr> <td>Desktop - Internet Explorer</td> <td>10+</td> </tr> <tr> <td>Desktop - Chrome</td> <td>latest</td> </tr> <tr> <td>Desktop - Firefox</td> <td>latest</td> </tr> <tr> <td>Desktop - Safari</td> <td>latest</td> </tr> <tr> <td>Desktop - Edge</td> <td>latest</td> </tr> <tr> <td>iOS</td> <td>7+</td> </tr> <tr> <td>Andorid</td> <td>4.X+</td> </tr> </tbody> </table> </div> <h3 class="subsection-title">Extends</h3> <ul> <li> eg.Component </li> </ul> <h3 class="subsection-title">Requires</h3> <ul> <li><a href="https://github.com/naver/egjs-component">eg.Component</a></li> <li><a href="https://github.com/naver/egjs-axes">eg.Axes</a></li> </ul> <h3 class="subsection-title">Members</h3> <dl> <dt> <div class="nameContainer"> <h4 class="name" id=".DIRECTION"><span class="type-signature static">static</span>eg.Flicking.DIRECTION<span class="type-signature type object">object</span> </h4> </div> </dt> <dd> <div class="description en"> <p>Direction constant - "PREV" or "NEXT"</p> </div> <div class="description ko"> <p>방향 상수 - "PREV" 또는 "NEXT"</p> </div> <dl class="details"> <h5 class="subsection-title">Properties:</h5> <dl> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>PREV</code></td> <td class="type"> <span class="param-type">"PREV"</span> </td> <td class="description last"> <div class="en"><p>Prev direction from current hanger position.<br/>It's <code>left(←️)</code> direction when <code>horizontal: true</code>.<br/>Or, <code>up(↑️)</code> direction when <code>horizontal: false</code>.</p></div> <div class="ko"><p>현재 행어를 기준으로 이전 방향.<br/><code>horizontal: true</code>일 경우 <code>왼쪽(←️)</code> 방향.<br/><code>horizontal: false</code>일 경우 <code>위쪽(↑️)</code>방향이다.</p></div> </td> </tr> <tr> <td class="name"><code>NEXT</code></td> <td class="type"> <span class="param-type">"NEXT"</span> </td> <td class="description last"> <div class="en"><p>Next direction from current hanger position.<br/>It's <code>right(→)</code> direction when <code>horizontal: true</code>.<br/>Or, <code>down(↓️)</code> direction when <code>horizontal: false</code>.</p></div> <div class="ko"><p>현재 행어를 기준으로 다음 방향.<br/><code>horizontal: true</code>일 경우 <code>오른쪽(→)</code> 방향.<br/><code>horizontal: false</code>일 경우 <code>아래쪽(↓️)</code>방향이다.</p></div> </td> </tr> </tbody> </table></dl>  </dl> <h5>Example</h5> <pre class="prettyprint"><code><p>eg.Flicking.DIRECTION.PREV; // "PREV"<br> eg.Flicking.DIRECTION.NEXT; // "NEXT"</p></code></pre> </dd> <dt> <div class="nameContainer"> <h4 class="name" id=".EVENTS"><span class="type-signature static">static</span>eg.Flicking.EVENTS<span class="type-signature type object">object</span> </h4> </div> </dt> <dd> <div class="description en"> <p>Event type object with event name strings.</p> </div> <div class="description ko"> <p>이벤트 이름 문자열들을 담은 객체</p> </div> <dl class="details"> <h5 class="subsection-title">Properties:</h5> <dl> <table class="props"> <thead> <tr> <th>Name</th> <th>Type</th> <th class="last">Description</th> </tr> </thead> <tbody> <tr> <td class="name"><code>HOLD_START</code></td> <td class="type"> <span class="param-type">"holdStart"</span> </td> <td class="description last"> <div class="en"><p>holdStart event</p></div> <div class="ko"><p>holdStart 이벤트</p></div> </td> </tr> <tr> <td class="name"><code>HOLD_END</code></t