### Install Flicking Plugins

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Plugins.mdx

Install the @egjs/flicking-plugins package using npm.

```bash
npm install @egjs/flicking-plugins
```

--------------------------------

### Install Dependencies

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/GUIDE_SSR.md

Install project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install @egjs/react-flicking

Source: https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md

Install the @egjs/react-flicking package using npm.

```sh
npm install --save @egjs/react-flicking
```

--------------------------------

### Install @egjs/vue3-flicking

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md

Install the package using npm.

```sh
npm install --save @egjs/vue3-flicking
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/naver/egjs-flicking/blob/master/docs/README.md

Installs all necessary dependencies for the project using Yarn.

```console
yarn install
```

--------------------------------

### Install @egjs/vue-flicking

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md

Install the @egjs/vue-flicking package using npm.

```sh
npm install --save @egjs/vue-flicking
```

--------------------------------

### Install egjs-flicking via npm

Source: https://github.com/naver/egjs-flicking/blob/master/README.md

Install the egjs-flicking library using npm. This is the recommended method for most projects.

```bash
$ npm install --save @egjs/flicking
```

--------------------------------

### Start Local Development Server

Source: https://github.com/naver/egjs-flicking/blob/master/docs/README.md

Starts a local development server for live previewing changes. Changes are reflected without server restarts.

```console
yarn start
```

--------------------------------

### Vue 3 Progress Bar Script Setup

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Vue 3 script setup using the Composition API to integrate Flicking with a progress bar. Utilizes `useFlickingReactiveAPI` for progress tracking. Ensure Flicking is installed.

```js
import { ref, reactive, onMounted } from 'vue'
import Flicking from '../src/Flicking'
import { useFlickingReactiveAPI } from "../src/reactive";

const flickingRef = ref(null)

```

--------------------------------

### Install Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the core Flicking package using npm.

```shell
npm install @egjs/flicking
```

--------------------------------

### Install React Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the React-specific Flicking package using npm.

```shell
npm install @egjs/react-flicking
```

--------------------------------

### Install Preact Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the Preact Flicking package using npm.

```shell
npm install @egjs/preact-flicking
```

--------------------------------

### Start Local Development Server

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/CONTRIBUTING.md

Compiles the project with hot-reloading enabled for live previewing of changes during development.

```bash
npm run start
```

```bash
npm run demo
```

--------------------------------

### Install ngx-flicking

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/ngx-flicking/README.md

Install the ngx-flicking package using npm, yarn, or pnpm.

```sh
npm install @egjs/ngx-flicking
# Or if you're using yarn
yarn add @egjs/ngx-flicking
# Or if you're using pnpm
pnpm install @egjs/ngx-flicking
```

--------------------------------

### Install Svelte Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the Svelte Flicking package using npm.

```shell
npm install @egjs/svelte-flicking
```

--------------------------------

### Install Angular Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the Angular Flicking package using npm.

```shell
npm install @egjs/ngx-flicking
```

--------------------------------

### Variable Size Panels Example

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/variablesize/variablesize.component.html

This example shows how to set up multiple panels within the Flicking component, where each panel can have a different size. This is useful for creating layouts with content of varying dimensions.

```html
<flicking :options='{ panelsPerView: 3, duration: 500, circular: true }'>
  <div class="panel" :style="{ width: '100px', height: '100px', backgroundColor: 'red' }"></div>
  <div class="panel" :style="{ width: '200px', height: '150px', backgroundColor: 'blue' }"></div>
  <div class="panel" :style="{ width: '150px', height: '200px', backgroundColor: 'green' }"></div>
  <div class="panel" :style="{ width: '100px', height: '100px', backgroundColor: 'orange' }"></div>
  <div class="panel" :style="{ width: '250px', height: '120px', backgroundColor: 'purple' }"></div>
</flicking>
```

--------------------------------

### Install Vue 2 Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the Vue 2 Flicking package using npm.

```shell
npm install @egjs/vue-flicking
```

--------------------------------

### Install Vue 3 Flicking with npm

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/installation.mdx

Install the Vue 3 Flicking package using npm.

```shell
npm install @egjs/vue3-flicking
```

--------------------------------

### Basic Svelte Flicking Setup

Source: https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md

Import Flicking and FlickingPanel components and CSS. Then, use them to create a basic carousel with options.

```js
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import "@egjs/svelte-flicking/dist/flicking.css";
// Or, if you have to support IE9
import "@egjs/svelte-flicking/dist/flicking-inline.css";

<Flicking options={{ bound: true }}>
  <FlickingPanel><div>0</div></FlickingPanel>
  <FlickingPanel><div>1</div></FlickingPanel>
  <FlickingPanel><div>2</div></FlickingPanel>
  <FlickingPanel><div>3</div></FlickingPanel>
  <FlickingPanel><div>4</div></FlickingPanel>
  <FlickingPanel><div>5</div></FlickingPanel>
  <FlickingPanel><div>6</div></FlickingPanel>
</Flicking>
```

--------------------------------

### Svelte Flicking Setup

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/quick-start.mdx

Basic setup for using Flicking and FlickingPanel components in a Svelte application.

```svelte
<script lang="ts">
  import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
  import "@egjs/svelte-flicking/dist/flicking.css";
  // Or, if you have to support IE9
  import "@egjs/svelte-flicking/dist/flicking-inline.css";
</script>

<Flicking options={{ align: "center", circular: true }}>
  {/* Those will render "div" element */}
  <FlickingPanel>0</FlickingPanel>
  <FlickingPanel>1</FlickingPanel>
  <FlickingPanel>2</FlickingPanel>
</Flicking>

```

--------------------------------

### Vue 2 Progress Bar Script

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Vue 2 script setup using Composition API to integrate Flicking with a progress bar. Leverages `useFlickingReactiveAPI` for progress tracking. Ensure Flicking and @vue/composition-api are installed.

```js
import { ref, onMounted } from '@vue/composition-api'
import Flicking from '../src/Flicking'
import { useFlickingReactiveAPI } from "../src/reactive";

export default {
  name: 'ProgressBarDemo',
  components: {
    Flicking
  },
  setup() {
    const panels = ref([
      { id: 1, text: 'Panel 1', color: '#ff6b6b' },
      { id: 2, text: 'Panel 2', color: '#4ecdc4' },
      { id: 3, text: 'Panel 3', color: '#45b7d1' },
      { id: 4, text: 'Panel 4', color: '#96ceb4' },
      { id: 5, text: 'Panel 5', color: '#feca57' }
    ])

    const flickingOptions = ref({
      circular: false,
      bound: false,
      duration: 500,
      defaultIndex: 0,
      moveType: "free-scroll"
    })

    const flickingRef = ref(null)
    const { 
      progress 
    } = useFlickingReactiveAPI(flickingRef)

    onMounted(() => {
      if (flickingRef.value) {
        console.log('Flicking instance mounted')
      }
    })

    return {
      panels,
      flickingOptions,
      flickingRef,
      progress
    }
  }
}
```

--------------------------------

### Basic Example with renderOnlyVisible

Source: https://github.com/naver/egjs-flicking/wiki/Applying-renderOnlyVisible-option-on-ngx-flicking

This example shows a basic implementation of Ngx-Flicking with the `renderOnlyVisible` option enabled. It configures the flicking component to only render panels that are currently visible to the user, improving performance. The `onRenderPanelChange` event is used to capture the currently visible panels.

```html
<ngx-flicking class="flicking" [options]="{ renderOnlyVisible: true}" [panels]="list0" (renderPanelChange)="onRenderPanelChange($event)">
    <ng-template>
      <div *ngFor="let panel of visiblePanels;trackBy=trackByFn">
          {{ panel.data }}
      </div>
    </ng-template>
  </ngx-flicking>
```

--------------------------------

### Forcing vue-template-compiler Installation

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

If multiple versions of 'vue-template-compiler' are being installed, use this command to force a specific version, such as 2.6.14.

```sh
npm install vue-template-compiler@2.6.14 --save-dev
```

--------------------------------

### Flicking with Fractional Size Enabled

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Example of Flicking with `useFractionalSize` set to `true`. This option helps resolve 1px offset issues by accurately calculating panel sizes.

```html
<Flicking useFractionalSize={true} defaultIndex={2} style={{ width: "200px" }}>
  <div className="has-background-primary" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-info" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-success" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-danger" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-warning" style={{ width: "199.5px", height: "200px" }}></div>
</Flicking>
```

--------------------------------

### Enable Auto Initialization

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Sets the `autoInit` option to `true`, which automatically calls the `init()` method when a Flicking instance is created. This is useful for immediate setup.

```javascript
autoInit: true
```

--------------------------------

### Basic AutoPlay Configuration

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/autoplay/autoplay.component.html

Configure Flicking to automatically play panels at a set interval. This snippet shows the basic setup for the AutoPlay plugin.

```typescript
import Flicking from "@egjs/flicking";
import AutoPlay from "@egjs/flicking-plugins/dist/plugins/AutoPlay";

const flicking = new Flicking("#flicking", {
  plugins: [new AutoPlay()]
});
```

--------------------------------

### Checking Installed Vue Package Versions with npm

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

Use 'npm list' to verify the installed versions of 'vue', 'vue-template-compiler', and '@vue/composition-api'. This helps in diagnosing version conflicts.

```sh
# 특정 패키지의 설치된 버전 확인
npm list vue vue-template-compiler @vue/composition-api

# 전체 의존성 트리 확인 (깊이 제한)
npm list --depth=0

# 특정 패키지의 상세 정보 확인
npm view vue versions --json
npm view vue-template-compiler versions --json
```

--------------------------------

### Virtual Rendering - Initial Panel Count

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Set the `initialPanelCount` option to define the starting number of panels when virtual rendering is enabled.

```javascript
initialPanelCount: 10
```

--------------------------------

### Flicking with Fractional Size Disabled

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Example of Flicking with `useFractionalSize` set to `false`. This is the default behavior.

```html
<Flicking useFractionalSize={false} defaultIndex={2} style={{ width: "200px" }}>
  <div className="has-background-primary" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-info" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-success" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-danger" style={{ width: "199.5px", height: "200px" }}></div>
  <div className="has-background-warning" style={{ width: "199.5px", height: "200px" }}></div>
</Flicking>
```

--------------------------------

### Initialize Flicking with CDN

Source: https://github.com/naver/egjs-flicking/blob/master/README.md

Initialize Flicking after including the necessary CDN scripts. This example demonstrates initializing with circular mode enabled.

```javascript
var flicking = new Flicking("#my-flicking", { circular: true });
```

--------------------------------

### Peer Dependencies Example in package.json

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

This JSON snippet shows how '@vue/composition-api' declares its 'peerDependencies', specifying that it requires a Vue version of '^2.6.0'. This is crucial for compatibility.

```json
{
  "peerDependencies": {
    "vue": "^2.6.0"
  }
}
```

--------------------------------

### Call Flicking Methods in JavaScript

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/using-the-methods.mdx

Instantiate Flicking and call methods directly on the instance. No special setup is required for plain JavaScript.

```javascript
const flicking = new Flicking("#el", options);

flicking.next();
```

--------------------------------

### Progress Bar with Reactive API

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

This snippet demonstrates how to use the `useFlickingReactiveAPI` hook to get the progress of the flicking instance. It initializes panels and flicking options, then logs a message when the flicking instance is mounted.

```javascript
const panels = reactive([
  { id: 1, text: 'Panel 1', color: '#ff6b6b' },
  { id: 2, text: 'Panel 2', color: '#4ecdc4' },
  { id: 3, text: 'Panel 3', color: '#45b7d1' },
  { id: 4, text: 'Panel 4', color: '#96ceb4' },
  { id: 5, text: 'Panel 5', color: '#feca57' }
])

const flickingOptions = reactive({
  circular: false,
  bound: false,
  duration: 500,
  defaultIndex: 0,
  moveType: "free-scroll"
})

const { 
  progress
} = useFlickingReactiveAPI(flickingRef)

onMounted(() => {
  if (flickingRef.value) {
    console.log('Flicking instance mounted')
  }
})
```

--------------------------------

### Vue 2 Script for Flicking Reactive API and Pagination

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Vue 2 script setup using Composition API to manage Flicking instance, panels, and reactive API for pagination and controls. Includes progress calculation and reachability checks.

```js
import { ref, onMounted } from '@vue/composition-api'
import Flicking from "../src/Flicking"
import { useFlickingReactiveAPI } from "../src/reactive";

export default {
  name: 'ReactiveDemo',
  components: {
    Flicking
  },
  setup() {
    // Reactive data
    const panels = ref([
      { id: 1, text: '패널 1', color: '#ff6b6b' },
      { id: 2, text: '패널 2', color: '#4ecdc4' },
      { id: 3, text: '패널 3', color: '#45b7d1' },
      { id: 4, text: '패널 4', color: '#96ceb4' },
      { id: 5, text: '패널 5', color: '#feca57' }
    ])

    // Flicking options
    const flickingOptions = ref({
      circular: false,

```

--------------------------------

### Apply Custom Easing Function

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Use a custom easing function for panel movement animations. This example uses a cubic easing function.

```javascript
easing: x => 1 - Math.pow(1 - x, 3)
```

--------------------------------

### Run Development Server

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/GUIDE_SSR.md

Compile and hot-reload the demo application for development.

```bash
npm run dev
```

--------------------------------

### React Progress Bar Integration

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Demonstrates synchronizing a Material UI LinearProgress component with Flicking's progress using the `useFlickingReactiveAPI` hook in React. Ensure Material UI is installed.

```jsx
import React from "react";
import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
import LinearProgress from "@mui/material/LinearProgress";

export default function ProgressBarExample() {
  const flickingRef = React.useRef(null);
  const { 
    progress 
  } = useFlickingReactiveAPI(flickingRef);

  return (
    <div>
      <Flicking 
        ref={flickingRef}
        moveType="free-scroll"
      >
        {panels.map((panel, index) => (
          <div key={index} className="panel">{panel}</div>
        ))}
      </Flicking>
      
      <div style={{ marginTop: "20px" }}>
        <LinearProgress 
          variant="determinate" 
          value={progress} 
          style={{ width: "100%" }}
        />
        <div style={{ textAlign: "center", marginTop: "10px" }}>
          Progress: {progress.toFixed(1)}%
        </div>
      </div>
    </div>
  );
}
```

--------------------------------

### Checking Current Vue Package Status

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

Use 'npm list' to check the installed versions of key Vue packages and 'cat package.json' to review the dependencies section in your project's package.json file.

```sh
# 현재 설치된 vue 관련 패키지 확인
npm list vue vue-template-compiler @vue/composition-api

# package.json의 의존성 확인
cat package.json | grep -A 10 -B 5 "dependencies"
```

--------------------------------

### Build Project for Production

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/CONTRIBUTING.md

Compiles and minifies the project's code for deployment to production environments.

```bash
npm run build
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/naver/egjs-flicking/blob/master/docs/README.md

Builds the website and pushes it to the 'gh-pages' branch, convenient for GitHub Pages hosting. Ensure to replace <Your GitHub username>.

```console
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Get Previous Panel and Element

Source: https://github.com/naver/egjs-flicking/wiki/Migration-Guide-(🔖2.x-to-🔖3.x)

Use the `prev()` method on a FlickingPanel instance to get the previous panel. Retrieve its index and element if it exists. This replaces deprecated `getPrevElement` and `getPrevIndex` methods.

```javascript
const prevPanel = flicking.getPanel(index).prev();
// getPrevIndex
const prevIndex = prevPanel ? prevPanel.getIndex() : -1;
// getPrevElement
const prevElement = prevPanel ? prevPanel.getElement() : null;
```

--------------------------------

### Get Next Panel and Element

Source: https://github.com/naver/egjs-flicking/wiki/Migration-Guide-(🔖2.x-to-🔖3.x)

Use the `next()` method on a FlickingPanel instance to get the next panel. Retrieve its index and element if it exists. This replaces deprecated `getNextElement` and `getNextIndex` methods.

```javascript
const nextPanel = flicking.getPanel(index).next();
// getNextIndex
const nextIndex = nextPanel ? nextPanel.getIndex() : -1;
// getNextElement
const nextElement = nextPanel ? nextPanel.getElement() : null;
```

--------------------------------

### Download es6-promise Polyfill

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/polyfills.mdx

Download the es6-promise polyfill script for self-hosting, which is recommended over CDN for services to avoid unpredictable issues.

```bash
# Download
https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.js
```

--------------------------------

### Build Static Website Content

Source: https://github.com/naver/egjs-flicking/blob/master/docs/README.md

Generates static website content into the 'build' directory, ready for hosting on any static content service.

```console
yarn build
```

--------------------------------

### Get Overall Flicking Progress

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/progress/progress.component.html

Retrieves the overall progress of the flicking animation. This value ranges from 0 to 1.

```typescript
const progress = flicking.progress;
console.log(progress);
```

--------------------------------

### Import Flicking Plugins CSS via CDN

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Plugins.mdx

Link to the Flicking plugins CSS file using a CDN.

```html
<link rel="stylesheet" href="https://naver.github.io/egjs-flicking-plugins/release/latest/dist/flicking-plugins.css">
```

--------------------------------

### Call Flicking Methods in Preact

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/using-the-methods.mdx

Use Preact's `createRef` to get a reference to the Flicking component and then call its methods.

```jsx
import { createRef, render } from "preact";
import Flicking, { FlickingError } from "@egjs/preact-flicking";

const ref = createRef();
render(<Flicking ref={ref}>{...}</Flicking>, dom);

const flicking = ref.current;
flicking.next();
```

--------------------------------

### Custom Gap Configuration

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/gap/gap.component.html

Demonstrates how to set a custom gap of 20 pixels between frames in Flicking.

```html
<flicking :options="{gap: 20}">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</flicking>
```

--------------------------------

### Left Align Panels

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/demo/ssr/dist/features/Align/index.html

Aligns panels to the left by setting both hanger and anchor to 0. This ensures the first panel is always at the start.

```html
<flicking class="flicking flicking1" :options="{ hanger: 0, anchor: 0 }">
  <div class="panel0"><div class="anchor"></div></div>
  <div class="panel1"><div class="anchor"></div></div>
  <div class="panel2"><div class="anchor"></div></div>
  <div class="panel3"><div class="anchor"></div></div>
  <div class="panel4"><div class="anchor"></div></div>
  <div class="panel0"><div class="anchor"></div></div>
</flicking>
```

--------------------------------

### Run Project Tests

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/CONTRIBUTING.md

Executes the project's test suite to ensure code quality and functionality.

```bash
npm run test
```

--------------------------------

### Add/Remove Panels

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Demonstrates how to dynamically add and remove panels from a Flicking instance.

```jsx
import Flicking from "@egjs/react-flicking";
import Panel from "@site/src/component/Panel";

function AddRemove() {
  const flicking = React.useRef(null);
  const [panels, setPanels] = React.useState([0, 1, 2, 3, 4]);

  return (
    <>
      <Flicking ref={flicking} className="my-4" id="add-remove" options={{
        default: {
          panelPerView: 3,
          duration: 500,
          easing: t => 1 - Math.pow(1 - t, 3)
        }
      }} >
        {panels.map(panel => (
          <Panel key={panel} index={panel} />
        ))}
      </Flicking>
      <div className="button-wrap">
        <button onClick={() => {
          const panels = flicking.current.panels;
          const index = panels.length - 1;
          flicking.current.insert({ index: index, data: index + 1 });
          setPanels(panels.map(p => p.index));
        }}>Add Panel</button>
        <button onClick={() => {
          flicking.current.remove({ index: 0 });
          setPanels(flicking.current.panels.map(p => p.index));
        }}>Remove Panel</button>
      </div>
    </>
  );
}

export default AddRemove;
```

--------------------------------

### Call Flicking Methods in Svelte

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/using-the-methods.mdx

Use Svelte's `bind:this` directive to get a reference to the Flicking component and then call its methods.

```jsx
<script lang="ts">
  import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
  import "@egjs/svelte-flicking/dist/flicking.css";

  let flicking: Flicking;
</script>

<Flicking bind:this={flicking}>
  <FlickingPanel>0</FlickingPanel>
  <FlickingPanel>1</FlickingPanel>
  <FlickingPanel>2</FlickingPanel>
</Flicking>
<button on:click{() => { flicking.next(); }} />
```

--------------------------------

### Initializing Flicking with UMD Modules

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/migration-from-v3.mdx

In Flicking v4, the 'eg' namespace has been removed from UMD modules. Initialize Flicking directly using the 'Flicking' constructor.

```javascript
const flicking = new Flicking("#my-flicking");
```

--------------------------------

### Listen to Flicking Events with JavaScript

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/listening-to-events.mdx

Use Flicking#on to attach event listeners. Import EVENTS from '@egjs/flicking' or use the global Flicking.EVENTS if using a CDN.

```javascript
// If you're using a package manager
import { EVENTS } from "@egjs/flicking";
// Or, if you're using a CDN
const EVENTS = Flicking.EVENTS;

flicking.on(EVENTS.MOVE, evt => {
  console.log(evt);
})
```

--------------------------------

### Get Panel Progress

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/progress/progress.component.html

Retrieves the progress of a specific panel relative to its index. This is useful for understanding the position of a panel within the flicking sequence.

```typescript
const panel = flicking.getPanel(0);
const progress = panel.getProgress();
console.log(progress);
```

--------------------------------

### Enable Fractional Size Calculation

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Set `useFractionalSize` to `true` to enable fractional size calculation. This can prevent 1px offset issues in cases where panel sizes have fractional parts.

```javascript
useFractionalSize: false // default
```

--------------------------------

### Enable Fractional Size Calculation

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Set `useFractionalSize` to `true` to enable fractional size calculation. This can prevent 1px offset issues in cases where panel sizes have fractional parts.

```javascript
useFractionalSize: true
```

--------------------------------

### Basic Flicking Component Usage

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md

Use the Flicking component in your Vue template with options and event handlers. Includes example of using plugins.

```vue
<template>
  <flicking
    :options="{ circular: true, moveType: 'freeScroll' }"
    :viewportTag="'div'"
    :cameraTag="'div'"
    :cameraClass="''"
    :plugins="plugins"
    @need-panel="e => {
      // ADD PANELS
    }"
  >
    <div>CONTENTS OF PANEL 0</div>
    <div>CONTENTS OF PANEL 1</div>
    <div>CONTENTS OF PANEL 2</div>
  </flicking>
</template>
<script>
import { Vue } from "vue-class-component";
import { Fade, AutoPlay } from "@egjs/flicking-plugins";

export default class DemoClass extends Vue {
  plugins = [new Fade(), new AutoPlay(2000, "NEXT")];
}
</script>
```

--------------------------------

### Removing Node Modules and Lock File

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

Before reinstalling dependencies, remove the 'node_modules' directory and the lock file ('package-lock.json' or 'yarn.lock') to ensure a clean installation.

```sh
rm -rf node_modules package-lock.json
```

--------------------------------

### Grid Layout

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Shows how to create a grid layout using Flicking, potentially in conjunction with @egjs/grid.

```jsx
import Grid from "@site/src/demo/Grid";

<Grid />
```

--------------------------------

### JavaScript Integration with Prev/Next Buttons

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Demos.mdx

Synchronizes Flicking carousel with Prev/Next buttons using the reactive API. It disables buttons when reaching the start or end.

```js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport");
const reactiveObj = connectFlickingReactiveAPI(flicking);

// Connect with Prev/Next button
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");

prevBtn.addEventListener("click", () => {
  if (!reactiveObj.isReachStart) {
    reactiveObj.moveTo(flicking.index - 1);
  }
});

nextBtn.addEventListener("click", () => {
  if (!reactiveObj.isReachEnd) {
    reactiveObj.moveTo(flicking.index + 1);
  }
});

// Update button state
reactiveObj.subscribe("isReachStart", (nextValue) => {
  prevBtn.disabled = nextValue;
});

reactiveObj.subscribe("isReachEnd", (nextValue) => {
  nextBtn.disabled = nextValue;
});
```

--------------------------------

### Set Resize Debounce and Max Resize Debounce (Defaults)

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Configures `resizeDebounce` to 16ms and `maxResizeDebounce` to 100ms. This provides a short delay for resizing events while guaranteeing a recalculation within 100ms.

```javascript
resizeDebounce: 16
maxResizeDebounce: 100 // default
```

--------------------------------

### Get Panel Visible Ratio

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/progress/progress.component.html

Retrieves the percentage of a panel's area that is currently visible within the viewport. This value ranges from 0 to 1.

```typescript
const panel = flicking.getPanel(0);
const visibleRatio = panel.getVisibleRatio();
console.log(visibleRatio);
```

--------------------------------

### Call Flicking Methods in Angular

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/using-the-methods.mdx

Use Angular's template reference variable (`#flick`) to get a reference to the `ngx-flicking` component and call its methods.

```js
@Component({
  selector: 'flicking-parent',
  template: `
    <button (click)="flick.prev()">Prev</button>
    <button (click)="flick.next()">Next</button>
    <ngx-flicking #flick></ngx-flicking>
  `
})
export class FlickingParent { }
```

--------------------------------

### Get Panel Element by Index

Source: https://github.com/naver/egjs-flicking/wiki/Migration-Guide-(🔖2.x-to-🔖3.x)

Use the `getElement()` method on a FlickingPanel instance to retrieve its corresponding DOM element. This replaces the deprecated `getElement` and `getAllElements` methods.

```javascript
// getElement
flicking.getPanel(index).getElement();

// getAllElements
flicking.getAllPanels().map(panel => panel.getElement());
```

--------------------------------

### Initialize Flicking with ES Modules

Source: https://github.com/naver/egjs-flicking/blob/master/README.md

Initialize Flicking using ES Modules. Import the necessary CSS files based on browser support requirements.

```typescript
import Flicking from "@egjs/flicking";
// import styles
import "@egjs/flicking/dist/flicking.css"; // Supports IE10+, using CSS flex
// Or...
import "@egjs/flicking/dist/flicking.inline.css"; //Supports IE9+, using CSS inline-box

const flicking = new Flicking("#my-flicking", { circular: true });
```

--------------------------------

### Basic Flicking Component Usage

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md

Example of using the Flicking component in a Vue template. Configure options, viewport/camera tags, and event handlers like 'need-panel'.

```vue
<template>
  <flicking
    :options="{ circular: true, moveType: 'freeScroll' }"
    :viewportTag="'div'"
    :cameraTag="'div'"
    :cameraClass="''"
    :plugins="plugins"
    @need-panel="e => {
      // ADD PANELS
    }"
  >
    <div>CONTENTS OF PANEL 0</div>
    <div>CONTENTS OF PANEL 1</div>
    <div>CONTENTS OF PANEL 2</div>
  </flicking>
</template>
<script>
import { Component, Vue } from "vue-property-decorator";
import { Fade, AutoPlay } from "@egjs/flicking-plugins";

@Component({})
export default class DemoClass extends Vue {
  plugins = [new Fade(), new AutoPlay(2000, "NEXT")];
}
</script>
```

--------------------------------

### Viewing Package Information with npm

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

Use 'npm view' to inspect package details, including its versions, peer dependencies, and other dependencies. This is useful for understanding package requirements.

```sh
# 패키지의 기본 정보 확인
npm view @cfcs/vue2

# peerDependencies 확인
npm view @cfcs/vue2 peerDependencies

# dependencies 확인
npm view @cfcs/vue2 dependencies

# devDependencies 확인
npm view @cfcs/vue2 devDependencies
```

--------------------------------

### Add Plugin with Parallax Effect

Source: https://github.com/naver/egjs-flicking/wiki/Migration-Guide-(🔖2.x-to-🔖3.x)

Use `addPlugins` to incorporate plugins like Parallax. This example shows how to add a Parallax plugin for images with a specified depth.

```javascript
flicking.addPlugins(new eg.Flicking.plugins.Parallax("img", 4));
```

--------------------------------

### Basic Fade Effect Implementation

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/fade/fade.component.html

This snippet shows how to integrate the Fade plugin to enable fade effects during panel transitions.

```typescript
import { Component } from "@angular/core";
import { Fade } from "@egjs/ngx-flicking-plugins";

@Component({
  selector: "app-fade",
  templateUrl: "./fade.component.html",
  styleUrls: ["./fade.component.css"],
})
export class FadeComponent {
  plugins = [new Fade()];
}

```

--------------------------------

### Checking for Dependency Conflicts with npm

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/package-issue-archive/VUE_VERSION_ISSUE.md

Run 'npm ls' to check for any dependency conflicts within your project. This command lists installed packages and highlights version mismatches.

```sh
# 의존성 충돌 확인
npm ls

# 특정 패키지의 의존성 트리 확인
npm ls vue
npm ls vue-template-compiler
```

--------------------------------

### Basic HTML Structure for SSR

Source: https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/demo/ssr/dist/index.html

This HTML structure is a basic setup for a Vue Flicking component intended for SSR. It includes necessary CSS and a placeholder for the Flicking instance.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Flicking SSR</title>
    <link rel="stylesheet" href="https://unpkg.com/@egjs/flicking-plugins@4.10.0/dist/flicking-plugins.min.css">
    <style>
        body,em,i {
            font-family: Helvetica Neue,sans-serif;
            font-weight: 300;
            font-style: normal;
        }
        .container,.hljs {
            margin: 30px auto;
            max-width: 800px;
        }
        .container {
            width: 100%;
        }
        h1 a {
            position: relative;
            color: #333;
        }
        pre {
            max-width: 800px;
            margin: 30px auto;
        }
        ul.extra {
            max-width: 800px;
            margin: 10px auto;
            padding: 10px 10px 10px 40px;
            border-radius: 10px;
            background: #f5f5f5;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        ul.extra, ul.extra li {
            font-size: 16px;
            list-style: disc outside none;
            list-style: initial;
        }
        ul.extra li {
            margin: 10px 0;
            height: auto;
            overflow: visible;
        }
        .flicking {
            width: 500px;
            height: 130px;
            margin: 0 auto;
            background: #eee;
            background: rgba(55,55,55 .1);
            border-radius: 5px;
        }
        .flicking .infinite, .flicking .panel0, .flicking .panel1, .flicking .panel2, .flicking .panel3, .flicking .panel4 {
            position: relative;
            display: block;
            border-radius: 5px;
            width: 200px;
            margin-top: 5px;
            background: #f55;
            height: 120px;
            text-align: center;
            line-height: 120px;
        }
        .flicking .panel0 {
            background: #f47071;
        }
        .flicking .panel1 {
            background: #f69462;
        }
        .flicking .panel2 {
            background: #ede484;
        }
        .flicking .panel3 {
            background: #90f290;
        }
        .flicking .panel4 {
            background: #78caff;
        }
        .hljs {
            display: block;
            overflow-x: auto;
            padding: .5em;
            color: #abb2bf;
            background: #282c34;
        }
        .hljs-comment,
        .hljs-quote {
            color: #5c6370;
            font-style: italic;
        }
        .hljs-doctag,
        .hljs-formula,
        .hljs-keyword {
            color: #c678dd;
        }
        .hljs-deletion,
        .hljs-name,
        .hljs-section,
        .hljs-selector-tag,
        .hljs-subst {
            color: #e06c75;
        }
        .hljs-literal {
            color: #56b6c2;
        }
        .hljs-addition,
        .hljs-attribute,
        .hljs-meta-string,
        .hljs-regexp,
        .hljs-string {
            color: #98c379;
        }
        .hljs-built_in,
        .hljs-class .hljs-title {
            color: #e6c07b;
        }
        .hljs-attr,
        .hljs-number,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-pseudo,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable {
            color: #d19a66;
        }
        .hljs-bullet,
        .hljs-link,
        .hljs-meta,
        .hljs-selector-id,
        .hljs-symbol,
        .hljs-title {
            color: #61aeee;
        }
        .hljs-emphasis {
            font-style: italic;
        }
        .hljs-strong {
            font-weight: 700;
        }
        .hljs-link {
            text-decoration: underline;
        }
        .plugins h1 {
            line-height: 1;
        }
        .plugins h1 a {
            font-size: 20px;
            vertical-align: bottom;
            margin-left: 10px;
        }
        .plugins .flicking {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            background: #eee;
            background: rgba(55,55,55 .1);
            border-radius: 5px;
        }
        .plugins .flicking .panel {
            position: relative;
            display: block;
            border-radius: 5px;
            width: 400px;
            margin-top: 5px;
            background: #f55;
            height: 200px;
            text-align: center;
            line-height: 200px;
            overflow: hidden;
        }
        .plugins .panel:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,.1);
        }
        .plugins .panel img {
            top: -100%;
            bottom: -100%;
            margin: auto;
            position: absolute;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }
        a {
            margin: 10px;
        }
        .component-fade-enter-active,
        .component-fade-leave-active {
            -webkit-transition: opacity .3s ease;
            transition: opacity .3s ease;
        }
        .component-fade-enter,
        .component-fade-leave-to {
            opacity: 0;
        }
        .nuxt-progress {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            width: 0;
            opacity: 1;
            -webkit-transition: width .1s,opacity .4s;
            transition: width .1s,opacity .4s;
            background-color: #3b8070;
            z-index: 999999;
        }
        .nuxt-progress.nuxt-progress-notransition {
            -webkit-transition: none;
            transition: none;
        }
        .nuxt-progress-failed {
            background-color: red;
        }
        html {
            font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            font-size: 16px;
            word-spacing: 1px;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
        }
        *,:after,:before,html {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        *,:after,:before {
            margin: 0;
        }
        body,html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        body,em,i {
            font-family: Helvetica Neue,sans-serif;
            font-weight: 300;
            font-style: normal;
        }
        #wrapper {
            width: 100vw;
            height: 100vh;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .link-wrapper {
            margin: 30px;
        }
        .hljs {
            padding: 10px;
            border-radius: 5px;
        }
        .container,.hljs {
            margin: 30px auto;
            max-width: 800px;
        }
        .container {
            width: 100%;
        }
        h1 a {
            position: relative;
            color: #333;
        }
        pre {
            max-width: 800px;
            margin: 30px auto;
        }
        ul.extra {
            max-width: 800px;
            margin: 10px auto;
            padding: 10px 10px 10px 40px;
            border-radius: 10px;
            background: #f55f5f5;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        ul.extra, ul.extra li {
            font-size: 16px;
            list-style: disc outside none;
            list-style: initial;
        }
        ul.extra li {
            margin: 10px 0;
            height: auto;
            overflow: visible;
        }
        .flicking {
            width: 500px;
            height: 130px;
            margin: 0 auto;
            background: #eee;
            background: rgba(55,55,55 .1);
            border-radius: 5px;
        }
        .hljs {
            display: block;
            overflow-x: auto;
            padding: .5em;
            color: #abb2bf;
            background: #282c34;
        }
        .hljs-comment,
        .hljs-quote {
            color: #5c6370;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="app">
        <flicking :options="{
            align: 'center',
            horizontal: true,
            panelsPerView: 3,
            defaultHeight: 130,
            defaultWidth: 200,
            duration: 500,
            adaptive: true,
            infinite: true,
            }">
            <div class="panel" v-for="(item, index) in items" :key="index">
                {{ item }}
            </div>
            <span slot="pagination">
            </span>
        </flicking>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/@egjs/flicking@4.10.0/dist/flicking.pkgd.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                items: [
                    'panel0',
                    'panel1',
                    'panel2',
                    'panel3',
                    'panel4'
                ]
            }
        });
    </script>
</body>
</html>
```

--------------------------------

### Enable Events Before Initialization

Source: https://github.com/naver/egjs-flicking/blob/master/docs/src/pages/Options.mdx

Set `preventEventsBeforeInit` to `true` to prevent events from triggering before the `ready` state during initialization.

```javascript
preventEventsBeforeInit: true
```

--------------------------------

### Get Panel OutsetProgress

Source: https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/projects/demo/src/app/progress/progress.component.html

Retrieves the outset progress of a panel, indicating its visibility status when completely outside the viewport. -1 for left/up, 1 for right/down, and 0 when overlapped.

```typescript
const panel = flicking.getPanel(0);
const outsetProgress = panel.getOutsetProgress();
console.log(outsetProgress);
```

--------------------------------

### Call Flicking Methods in React

Source: https://github.com/naver/egjs-flicking/blob/master/docs/docs/tutorials/using-the-methods.mdx

Use React's `createRef` to get a reference to the Flicking component and then call its methods. Includes error handling for method calls.

```jsx
import { createRef, Component } from "react";
import Flicking, { FlickingError } from "@egjs/react-flicking";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.flicking = createRef();
    this.panels = [0, 1, 2];
  }
  render() {
    return <Flicking ref={this.flicking}>
      { this.panels.map(idx => <div className="panel" key={idx}>{idx}</div>) }
    </Flicking>;
  }
  async moveToNextPanel() {
    try {
      await this.flicking.next();
    } catch (e) {
      console.log(e instanceof FlickingError); // true
      console.log(e.code);
    }
  }
}
```